# ES6 circular dependency

### 快速檢查 circular dependency
#### 透過 [madge](https://www.npmjs.com/package/madge) 套件
- 列出文字版內容
- 只列出透過相對路徑 import 的 module (src 可替換成其他路徑或指定檔案)

        npx madge src --extensions ts 

- 只列出循環依賴的項目

        --circular

- 讀取 tsconfig (可解析 alias)

        --ts-config ./tsconfig.json

- 將循環依賴關係圖像化(輸出 svg 或 dot)
- OS 需要安裝 [Graphviz](https://www.graphviz.org/download/)
- 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](https://edotor.net) 這類線上編輯器來觀看

###### tags: `教學`