前端依赖文件可视化

前端依赖文件可视化

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

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

Dependency Cruiser Extension

这是一个VSCode 插件：

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

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