时隔三年，一个可视化可交互的前端依赖分析工具发布了

🔥 🔥 🔥 [Demo 演示](JsAnalyzer | 依赖分析工具 Demo)

终于有勇气发布了~

我一直认为它只是一个不完美的半成品，所以我只是悄悄的上架到了个人的 github 仓库，并没打算公之于众。不过就在今天，我意外的发现仓库多了一个陌生人的 Issue，真的很震惊，我没想到真的有人安装文档安装使用了。这真的让我感到意外，也许真的有人觉得有用，那么我就要做好它，也有责任做好它！

前言

从事开发工作以来，很多时候我们除了开发业务代码以外，更多时候是在想如何优化自己的代码。在这个过程中，交叉的依赖关系以及不清楚修改后影响的范围，这特别是对于还不熟悉项目的新人，每一步都走得小心翼翼。

在开发工作中，因为修改某个文件导致其他引用它的模块出现问题的现象屡见不鲜。至此，我一直在寻找一个依赖分析工具，能帮我快速高效的理清项目的框架、依赖关系，模块的引用上下文。

现存方案

为此，我也找了很多开源的分析工具，不过让我很失望，类似的工具不多，而且它们都是命令行工具，想要分析不同模块的依赖需要多次执行不同的代码，分析结果也只是一个 json 文件或者依赖图片。json 文件和 png 图都是"死的"，它们只是某一个依赖关系的临时快照，不具备实时性，也不能显示模块更多上下文信息。

Dependency cruiser验证和可视化依赖关系
Madge生成模块依赖关系的可视化图表
dependo可视化 CommonJS、AMD 或 ES6 模块依赖关系
JSCity将 JavaScript 源代码可视化为可导航的 3D 城市
colony表示 Node.js 代码及其依赖项之间链接的浏览器内集群图
TsUML从 TypeScript 源代码生成 UML 图

写文章时在 GitHub 发现一个工具 [knip](GitHub - webpro/knip: ✂️ Find unused files, dependencies and exports in your JavaScript and TypeScript projects. Knip it before you ship it!)，它可以帮你发现未依赖的文件，我的这个工具其实囊括了它里面很多功能，使用起来会更简单。参考应用场景4和场景5。

想法萌生

所以，我相信不止我一个人在重构的过程中遇到过如上问题，至此，我决定要开发一个依赖分析工具，解决上面的所有问题，而且还必须做得更好，有 UI 界面操作，可交互，能动态切换分析文件，还能展示更多的模块关联信息。

开始做产品

自己做产品，真的是很酷的事情。三年前，我终于开始的我的依赖分析工具开发之路。我的初步想法是这样的，服务端生成依赖数据，前端负责可视化展示依赖关系。下面是架构图：核心的流程就是服务端对不用的文件分析，通过 AST 解析从而收集到文件中的依赖信息，然后再将这些依赖关系梳理清洗整合，最终生成一个物料包给到前端展示。

它来了

时隔快三年，我利用业余时间间断的开发，终于完成了核心分析功能，并不是因为这些功能很多，需要花费这么多的时间，而是有如下两个原因：其一：业余时间开发，时间本就不固定，我也只是当做业务爱好来做；其二：中间有一段时间开发停止了，那段时间我怀疑自己做的产品是不是真的有用，是否真的能帮助到别人，是不是一件有意义的事情。

最后，我想通了，一定有需要它的人，不能放弃，2024 年它来了!

产品功能/优势

一个可视化可交互的 Web 文件依赖分析工具，跨框架,可用于 Vue React Svelte Angular Node 等前端项目

基于 AST 语法分析，可交互的一体化可视化依赖分析系统
支持切换分析入口文件。
支持依赖反转。
支持显示文件被引用次数，以及引用地址。
支持显示文件的导出变量被引用信息。
适用于 ES6、CommonJs。
支持的文件类型：JS、TS、JSX、TSX、Vue、Sass、Less、Css、html。
支持 package 依赖分析。
支持未引用文件、npm 包分析。
非常安全：所有文件本地存储，不涉及联网和上传。
支持使用默认编辑器打开文件和文件预览。
支持暗黑模式。

快速开始

🔥 🔥 🔥 Github 仓库

🔥 🔥 🔥 [Demo 演示](JsAnalyzer | 依赖分析工具 Demo)

如果觉得还不错，或者对你有帮助，别忘了点一下 Star 哦~

shell 复制代码

# 1. 全局安装
npm install @js-analyzer/server -g

# 2. 进入到需要分析得项目根目录
cd /xxx/project

# 3. 指定当前项目并启动
js-analyzer --root ./

接下来，访问链接就能看到了！

默认配置不一定适合你的项目，请告诉工具更多信息，会使分析结果更加准确

详细配置请点击

图文介绍

左侧菜单有四个，依次是：文件依赖分析、npm 包依赖分析、变量热图、未知引用文件

其他的页面功能比较简单，这里我重点讲一下 文件依赖分析页面的功能，也是整个工具最核心的功能。

关系图-文件夹关系图

点击左侧目录树，如果点击的是文件夹，则显示 文件夹关系视图，点击的是文件则显示该文件的被依赖视图。

显示文件夹下的所有文件依赖关系，图标中节点的大小表示被依赖的次数，节点越大，依赖的次数就越多。

关系图-被依赖视图

双击某个节点，可进入该节点的被依赖视图，显示当前文件被哪些文件依赖。

关系图-依赖视图

双击某个节点，可进入该节点的被依赖视图，然后点击左上角视图切换图标，第二个，则显示 依赖视图。显示当前文件依赖了哪些文件。

关系图-上游依赖图

双击某个节点后（处于被依赖视图），再点击左上角的正数第三个图标，切换成上游依赖图

，显示该文件，所有上游的依赖文件视图。

上游依赖图，我研究了很多展示的图形，路径图、环形图、力导向图。模块的引用关系是无序的，混乱的，这会使的展示的图形错中复杂，看起来很费劲，最后综合性能和显示效果，选择了力导向图，这个布局算法非常有趣，是基于物理模型，即将图形视为一个力学系统，节点作为物体，边作为弹簧或者电磁力之类的力（吸引或排斥），然后通过模拟力的作用来计算图的布局。