使用 madge 生成工程依赖关系图

4,590 阅读1分钟

举个例子🌰

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