本文介绍了三种前端依赖文件的可视化方法：Dependency Cruiser Extension、madge 和 dependency-cruiser，分别通过VSCode插件和生成SVG文件的方式，帮助开发者理解和管理项目的依赖结构。
前端依赖文件可视化
前端复杂项目开发时，或是在研究库、框架代码的源码时，我们常常想，当前文件依赖了哪些模块文件，有没有可视化的呈现方式？
答案是有的。下面我推荐三种不同的方式来可视化前端依赖文件。这三种方式各有优缺点，可根据自身需求选择。
Dependency Cruiser Extension
这是一个VSCode 插件：
安装完了后，在项目中，打开一个文件（我这里拿lodash源码的es分支中的date.js文件举例）：
mac电脑上使用Cmd + Shift + P，windows电脑上使用Ctrl + Shift + P快捷键，打开VSCode的命令面板，选择View Dependencies命令回车，即可打开可视化依赖文件：
最低0.47元/天 解锁文章
扫一扫
564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
