将 JavaScript 项目文件依赖关系图形化

有时我们拿到一份 js 项目代码，很想了解其中的代码结构以及引用关系，如果能够将文件引用关系图形化，对于我们理解项目会有很大的帮助。

蓝色代表有依赖，绿色代表无依赖，红色代表循环依赖

接下来就介绍一种将文件依赖关系图形化的方法。

madge : Create graphs from your CommonJS, AMD or ES6 module dependencies

打开 https://github.com/pahen/madge，按照提示操作，下载 npm 包：

$ npm -g install madge

有一个类似的包 https://www.npmjs.com/package/depcheck

可以在项目中引入 madge，也可以使用 CLI，可以直接生成 json 文件，如果想要生成图片，需要安装 graphviz，前往https://graphviz.gitlab.io/download/ 下载安装，并添加到 PATH 中。

安装完成后，我们先使用 CLI 尝试一下。进入一个项目，运行命令：

$ madge -i app.svg app.js

这条命令就是将 app.js 的依赖关系生成图片 app.svg 并保存到本地。

更进一步，我们还可以在 Node 端引入 madge，然后逐级生成依赖图，这样看起来更加清晰。

作者：二驸马
链接：https://www.jianshu.com/p/38694618b2e6