JavaScript 模組的迴圈載入（迴圈依賴問題分析）
阿新 • • 發佈：2022-05-17
簡介
"迴圈載入"（circular dependency）指的是，a 指令碼的執行依賴 b 指令碼，而 b 指令碼的執行又依賴 a 指令碼。
分析
使用 madge 工具進行迴圈載入分析。
安裝
yarn global add
檢測是否存在迴圈載入/依賴
下述命令中的 ./dist 目錄是 .js 檔案所在的相對/絕對目錄路徑（如果是 TypeScript 專案，將其替換為編譯後的 .js 檔案相對/絕對目錄路徑）
madge ./dist -c
生成載入/依賴關係圖
安裝 Graphviz
開啟 Download 頁面，找到適用於自己作業系統的軟體，我這裡是 Windows 10，我下載的軟體為 graphviz-3.0.0 (64-bit) EXE installer
下載之後開啟安裝包，在 許可證協議 介面點選 我接受(I) 後，會進入到 Install Options 介面 ，在該介面選擇第二個選項 Add Graphviz to the system Path for all users，即新增系統環境變數，這樣 madge 才可以隨處執行它，也可以選擇第三個選項，那是新增使用者環境變數，只對當前登入賬號生效。後面的步驟一直點選下一步就可以了，等待安裝完畢。
安裝完畢後，開啟一個新的 cmd 或 bash 視窗，因為在 Windows 中新新增的環境變數只對新開啟的控制檯視窗生效，之前開啟的視窗並不能讀取的上面安裝軟體時新增的環境變數。
生成
madge ./dist -i image.png
輸出結果：
D:\dev\backend-hospital-next-nodejs\restful-api>madge ./dist -i image.png
Processed 268 files (4.1s)
√ Image created at D:\dev\backend-hospital-next-nodejs\restful-api\image.png
從輸出結果中可以看到載入/依賴圖已成功生成，位於磁碟 D:\dev\backend-hospital-next-nodejs\restful-api\image.png 處，開啟檢視即可。