ES6 circular dependency

快速檢查 circular dependency

透過 madge 套件

• 列出文字版內容
  • 只列出透過相對路徑 import 的 module (src 可替換成其他路徑或指定檔案)
    ​​​​​​​​npx madge src --extensions ts 
    

  • 只列出循環依賴的項目
    ​​​​​​​​--circular
    

  • 讀取 tsconfig (可解析 alias)
    ​​​​​​​​--ts-config ./tsconfig.json
    

• 將循環依賴關係圖像化(輸出 svg 或 dot)
  • OS 需要安裝 Graphviz
  • windows 安裝需選擇自動設定環境變數的路徑 (環境變數 -> Path -> 上面會列出 graphviz 的 gvpr.exe 所在路徑)
    • e.g. x64 版本在 C:\Program Files\Graphviz\bin
  • windows 以管理者權限啟動 powershell 或 command prompt, 然後切換到專案目錄
  • 使用範例 (會產生 123.svg 在專案目錄底下)
    ​​​​​​​​npx madge src --extensions ts --circular --ts-config ./tsconfig.json --image 123.svg
    

  • dot 可透過 Edotor 這類線上編輯器來觀看

tags: 教學