前端依赖文件可视化

前端依赖文件可视化

前端复杂项目开发时，或是在研究库、框架代码的源码时，我们常常想，当前文件依赖了哪些模块文件，有没有可视化的呈现方式？

答案是有的。下面我推荐三种不同的方式来可视化前端依赖文件。这三种方式各有优缺点，可根据自身需求选择。

Dependency Cruiser Extension

这是一个VSCode 插件：

安装完了后，在项目中，打开一个文件（我这里拿lodash源码的es分支中的date.js文件举例）：

mac电脑上使用Cmd + Shift + P，windows电脑上使用Ctrl + Shift + P快捷键，打开VSCode的命令面板，选择View Dependencies命令回车，即可打开可视化依赖文件：

点击文件节点，还可以跳到对应的文件中。

madge

这种是通过生成可视化svg，通过预览svg来查看依赖文件的方式。其可视化可以容易辨别叶子（没有依赖其他文件模块）文件和循环依赖文件（如a.js文件引用了b.js文件的内容，b.js文件里又引用了a.js文件的内容）的情况。

Mac电脑上安装如下：

brew install graphviz || port install graphviz
npm -g install madge

命令行使用方法如下：

# 切换到项目中，`lodash.js`替换成你需要可视化的文件，`app.svg`可以换成其他名字，全局安装了madge的可不用npx
npx madge -i app.svg lodash.js

这会生成app.svg文件（如果你没起别的名字，起了别的名字，就会生成你起的名字的svg文件）。这时，我们可以安装一个Svg Preview的VSCode 插件来可视化查看svg文件。安装完了Svg Preview这个插件后，编辑器点击打开svg文件，VSCode旁边一栏会自动打开预览可视化这个svg。也可以把svg文件拖到浏览器中，浏览器会可视化预览svg文件。

dependency-cruiser

这种也是通过生成可视化svg，通过预览svg来查看依赖文件的方式。不过它没有特别的颜色区分各个引用的文件。

安装方法：

pnpm add -D dependency-cruiser

使用方法：

# 在项目的上层目录上执行下面命令
npx dependency-cruiser --init
# ? Where do your source files live? 这里输入你需要可视化的目录，我这里写lodash
# ? Do your test files live in a separate folder? › (y/N) 根据你的实际情况输入y或N，即如果有测试目录输入y，我这输入N
# 这回车后会生成 `.dependency-cruiser.js` 文件
# 下面命令中的`lodash`替换成你项目目录名，`dependency-graph.svg`也可起别名，这命令执行成功会生成`dependency-graph.svg`文件
npx depcruise lodash --include-only "^lodash" --output-type dot | dot -T svg > dependency-graph.svg

同样，预览svg可用Svg Preview VSCode插件，也可用浏览器打开（详讲见上面的madge）。这种可视化出来的文件，在浏览器打开，可以点击文件节点，查看到该文件的源代码。