codecrumbs
1.0.0
您是否曾經迷失在大型或未知的程式碼庫中？這個工具將幫助您解決這個問題。此外，它將提高您的開發速度並提供有關應用程式架構的更多知識。
如果你喜歡這個項目，請在 Twitter 上關注我@bliashenko，以了解我正在建立的東西。
查看該專案的新版本作為獨立應用程式。只需點擊幾下，您就可以開始以更有效的方式探索程式碼庫，建立互動式視覺指南並在您自己的部落格上與其他人分享！請參閱此處的快速指南。
請參閱此處運行的獨立版本的準備範例。
它是如何運作的？您為程式碼庫執行
codecrumbs命令，它會分析原始程式碼並建立其視覺化表示。寫下程式碼屑註釋，程式碼庫狀態將由瀏覽器中的視覺客戶端動態反映。請查看我在 React-Finland 上的演講以了解更多詳細資訊。
前提條件：更新/安裝
NodeJS版本 >= 8.11.1
yarn global add codecrumbs add codecrumbs )codecrumbs -d project-src-dir -e project-src-dir/index.js 。更改參數以符合您的專案： -d是包含原始程式碼的目錄， -e是入口點檔案。使用 CLI 參數執行 codecrumbs 或指定靜態設定檔codecrumbs.config.js （請參閱此處的範例）
| 命令列介面 | 設定檔 | 描述 | 例子 |
|---|---|---|---|
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 |
使用者介面解釋：
如何到達那裡？
透過寫下註解在程式碼中留下痕跡： //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）來將麵包屑分組，當您知道正確的順序時，您始終可以稍後新增步驟編號。
您可能有興趣研究多個程式碼庫（子模組）之間的連接，codecrumbs 支援這一點。只需多次啟動程式碼屑（每個程式碼庫一次），所有內容都將在瀏覽器標籤內的一張圖片中同步。要控制圖表 UI - 透過點擊將其選取。
例如，對於客戶端-伺服器應用程序，請前往伺服器程式碼的來源目錄並執行codecrumbs -e your-server-src/index.py -d your-server-src ，對於客戶端codecrumbs -e src-client/index.js -d src-client
注意：程式碼庫可以位於您想要的任何位置（不需要像 mono-repo 等那樣擁有它們），只需為您需要的目錄運行
codecrumbs即可。
目前版本支援以下程式語言：
C#C++FortranGoHaskellJavaJavaScriptKotlinPHPPythonRubyTypeScript請提出問題以支援您想要的其他語言。
注意：目前版本僅 [JavaScript、TypeScript] 提供此功能
使用者介面解釋：
注意：在目前版本中，只有 JavaScript 提供此功能
js2flowchart 用於在側邊欄中為所選檔案程式碼繪製流程圖。
非常感謝任何支持！ ？ ？ ❤️ 如果您喜歡這個項目，請發布並發推文。謝謝！
請考慮捐款，這將有助於進一步開發更酷的功能！我們將通過在此處添加您的姓名/公司徽標來感謝您
0+X支援開發
向此儲存庫做出貢獻時，請先透過問題、電子郵件或任何其他方法與此儲存庫的擁有者討論您希望進行的更改，然後再進行更改。歡迎提出想法和建議。若要啟動開發環境，請克隆儲存庫並執行：
yarn && yarn start 下一個功能正在開發中：
