使用 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 为例：

1、安装执行 brew install graphviz || port install graphviz 报错，提示无权限

执行 执行 sudo chown -R $(whoami) /usr/local/share/man/man5 /usr/local/share/man/man7 授权

2、再次执行 brew install graphviz || port install graphviz 报错，提示缺少工具

执行 xcode-select —install 安装 xcode-select

3、再次执行 brew install graphviz || port install graphviz 报错，提示没有权限

3.1、创建目录

执行 sudo mkdir /usr/local/Frameworks

3.2、授权

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

4、最后一次执行 brew install graphviz || port install graphviz 安装成功

导出依赖关系图

madge --image /Users/rainzhao/collect/vConsole/dependency.svg /Users/rainzhao/collect/vConsole/src/vconsole.js
复制代码

更多功能参考 madge 使用手册