搜索
您的当前位置:首页正文

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

来源:二三娱乐

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


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

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

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

$ npm -g install madge

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

$ madge -i app.svg app.js

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

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

Top