使用 madge 生成工程依賴關係圖

舉個例子🌰

下圖是 vconsole 的依賴關係圖，依賴關係清晰明瞭，實在是優秀代碼的典範啊

madge

madge 使用手冊

安裝 madge

npm -g install madge
複製代碼

安裝 graphviz

Mac OS X

brew install graphviz || port install graphviz
複製代碼

Ubuntu

apt-get install graphviz
複製代碼

下邊以 Mac OS X 爲例：

一、安裝執行 brew install graphviz || port install graphviz 報錯，提示無權限

執行 執行 sudo chown -R $(whoami) /usr/local/share/man/man5 /usr/local/share/man/man7 受權

二、再次執行 brew install graphviz || port install graphviz 報錯，提示缺乏工具

執行 xcode-select —install 安裝 xcode-select

三、再次執行 brew install graphviz || port install graphviz 報錯，提示沒有權限

3.一、建立目錄

執行 sudo mkdir /usr/local/Frameworks

3.二、受權

執行 sudo chown $(whoami):admin /usr/local/Frameworks

四、最後一次執行 brew install graphviz || port install graphviz 安裝成功

導出依賴關係圖

madge --image /Users/rainzhao/collect/vConsole/dependency.svg /Users/rainzhao/collect/vConsole/src/vconsole.js
複製代碼

更多功能參考 madge 使用手冊