使用 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 使用手册