codecrumbs
1.0.0
大きなコードベースや未知のコードベースで迷ったことがありますか?このツールはそれを解決するのに役立ちます。また、開発速度が向上し、アプリケーション アーキテクチャに関する知識が深まります。
このプロジェクトが気に入ったら、Twitter @bliashenko をフォローして、私が構築しているものについて聞いてください。
このプロジェクトの新しいバージョンをスタンドアロン アプリケーションとしてチェックしてください。数回クリックするだけで、より効率的な方法でコードベースの探索を開始し、インタラクティブなビジュアルガイドを作成して、それを自分のブログで他の人と共有できます。こちらのクイックガイドをご覧ください。
ここでスタンドアロン バージョンを実行するために準備されたサンプルを確認してください。
仕組みは?コードベースに対して
codecrumbsコマンドを実行すると、ソース コードが分析され、その視覚的表現が構築されます。コードクラム コメントを書き留めると、コードベースの状態がブラウザのビジュアル クライアントにオンザフライで反映されます。詳細については、React-Finland での私の講演をご覧ください。
前提条件:
NodeJSバージョンを8.11.1以上に更新/インストールする
codecrumbsグローバルにインストールします ( yarn global add codecrumbs )codecrumbs -d project-src-dir -e project-src-dir/index.jsを実行します。プロジェクトに合わせてパラメータを変更します。 -dはソース コードのあるディレクトリ、 -eはエントリ ポイント ファイルです。CLI パラメーターを使用して codecrumbs を実行するか、静的構成ファイルcodecrumbs.config.jsを指定します (ここで例を参照)
| CLI | 設定ファイル | 説明 | 例 |
|---|---|---|---|
d | projectDir | プロジェクトのソースコードディレクトリへの相対パス | -d src |
e | entryPoint | プロジェクト ソース エントリ ポイント ファイルへの相対パス ( dir内にある必要があります) | -e src/app.js |
x | excludeDir | 除外するディレクトリへの相対パス( ,で区切られたパス) | -x src/doc,src/thirdparty |
p | clientPort | Codecrumbs クライアントのポート (オプション、デフォルトは2018 ) | -p 2019 |
n | projectNameAlias | プロジェクト名のエイリアス (オプション、デフォルトは-d値と同じ) | -n my-hello-world |
C | - | codecrumbs.config.js へのパス (オプション、デフォルトでは PWD でファイルの検索を試みます) | -C config/codecrumbs.config.js |
D | debugModeEnabled | ログのデバッグ モードを有効にする (オプション、デフォルトはfalse ) | -D |
UI は次のように説明しました。
そこに行くにはどうすればいいですか？
コメント//cc:[parameters;]を書き留めて、コード内にパンくずリストを残します。
cc (「CodeCrumb」の略) は、パーサーによって使用されるプレフィックスです。以下の表のパラメータの例を確認してください。
| 例 | 説明 | 使用事例 |
|---|---|---|
//cc:remember place | シンプルなブレッドクラム。 remember place | 重要な場所にマークを付けて、それがどこにあったかを忘れないようにします |
//cc:here is bug;well, seems like a bug in logic | 単純なブレッドクラムwell, seems like a bug in logic 。パンくずリストの詳細は; | 追加情報を追加するとポップアップに表示されます |
//cc:signin#3;enable route | ブレッドクラムのトレイル、 signinはトレイル ID 、 #3はステップの順序番号、 enable routeステップを説明するタイトルです。 | コードクラムのシーケンス。一部のデータ フロー (ユーザー ログイン、フォーム送信など) を記述するために使用されます。 |
//cc:signin#1;firebase sign in;+2;do call to firebase with credentials | ブレッドクラムの軌跡。 +2は強調表示する行数で、 ;で区切られます。 | 行数を使用してパンくずリストに関連するコードを強調表示します。 |
注: 現在のバージョンでは、単一行のコメントのみがサポートされています。
ヒント: ブレッドクラムをグループ化するためだけに、ステップ番号なしのトレイル ID (例
//cc:groupname#;test) を使用できます。正しい順序がわかったら、後でいつでもステップ番号を追加できます。
いくつかのコードベース (サブモジュール) 間の接続を調べることに興味があるかもしれません。コードクラムはそれをサポートしています。コードクラムを複数回 (コードベースごとに 1 回) 開始するだけで、すべてがブラウザー タブ内の1 つの画像内で同期されます。ダイアグラム UI を制御するには、それをクリックして選択します。
たとえば、クライアント/サーバー アプリケーションの場合は、サーバー コードのソース ディレクトリに移動し、 codecrumbs -e your-server-src/index.py -d your-server-srcを実行します。クライアントcodecrumbs -e src-client/index.js -d src-client 。
注:コードベースはどこにでも配置できます (モノリポジトリなどのようにコードベースを配置する必要はありません)。必要なディレクトリの
codecrumbsを実行するだけです。
現在のバージョンでは、次のプログラミング言語がサポートされています。
C#C++FortranGoHaskellJavaJavaScriptKotlinPHPPythonRubyTypeScript希望する他の言語をサポートするには、問題を提出してください。
注: 現在のバージョンでは [JavaScript、TypeScript] のみがこの機能を提供します
UI は次のように説明しました。
注: 現在のバージョンでは、JavaScript のみがこの機能を提供します
js2flowchart は、選択したファイル コードのフローチャートを描画するためにサイドバーで使用されます。
ご支援をよろしくお願いいたします。 ? ? ❤️ このプロジェクトが気に入ったら、を付けてツイートしてください。ありがとう！
金銭的な寄付をご検討ください。寄付は、より優れた機能のさらなる開発に役立ちます。ここにあなたの名前/会社のロゴを含めて感謝の意を表します
0+Xで開発をサポート
このリポジトリに貢献する場合は、変更を加える前に、発行、電子メール、またはその他の方法で、このリポジトリの所有者と希望する変更について話し合ってください。アイデアや提案は大歓迎です。開発環境を開始するには、リポジトリを複製して実行します。
yarn && yarn start 次の機能は開発中です。
