dependency-cruiser 是最可靠的 CLI 依赖分析工具,需配合 Graphviz 的 dot 渲染图表,配置 .dependency-cruiser.js 并排除 node_modules 等无关路径才能生成有效业务依赖图。

dependency-cruiser 是当前最可靠的 CLI 工具
VSCode 本身不生成依赖图,必须靠 dependency-cruiser 这类外部 CLI 工具先产出结构化数据,再交由 dot 渲染。它不是 VSCode 插件,而是命令行工具,需手动集成进终端或 tasks。
安装后第一件事是运行:npx dependency-cruiser --init,生成 .dependency-cruiser.js。跳过这步等于裸跑——尤其 doNotFollow 和 exclude 字段不配,遇到 node_modules 里的循环引用,depcruise 会卡死或直接报 error: cycle detected。
Vue/TSX 项目务必加参数:--extensions js,ts,jsx,tsx,vue,否则 <script setup> 中的 import 全被忽略;ESM 项目默认不扫 node_modules,这是优点,但若要排除特定内部包(如 @myorg/utils),得在配置里显式写 exclude: ["^@myorg/utils"]。
Graphviz 是渲染环节不可跳过的依赖
没装 dot 命令,npx depcruise --output-type dot 的输出就无法转成图,直接报 command not found: dot。
- macOS:用
brew install graphviz - Windows:去 Graphviz 官网下载安装包,并确保
dot.exe在PATH中
典型管道命令:npx depcruise --silent src/ --output-type dot | dot -Tsvg > deps.svg。其中 --silent 很关键——不加的话,depcruise 的警告日志会混进 dot 数据,导致 dot 报 syntax error in line X。
SVG 打开是空白?可能是图太大浏览器撑不住,改用 dot -Tpng,或加 --max-depth 2 控制层级。
VSCode 插件只是快捷入口,不是全自动方案
像 Project Dependencies Viewer(ID: grunow.project-dependencies-viewer)这类插件,右键文件 → “Show Dependencies” 就能触发扫描,但它只做单向静态分析:
- 只展示“当前文件
import了谁”,不显示“谁import了当前文件” - 对
import()动态路径、require('' + name)、eval加载的模块完全不可见 - 不读
.dependency-cruiser.js配置,所有过滤逻辑失效,node_modules全塞进图里,核心模块反而难定位 - 首次加载慢,大项目可能卡顿十几秒;节点能点击跳转,但无缩放、拖拽、悬停提示路径等交互功能
madge 生成的 HTML 图更实用
如果只是想快速看循环依赖和整体流向,madge 生成的 HTML 图比 SVG 更省事:npx madge --html deps.html --layout dot src/。
打开 deps.html 就能缩放、拖拽、悬停看路径,循环节点自动高亮,比在 SVG 里肉眼找箭头靠谱得多。
注意:madge 默认只识别 CommonJS 的 require,若项目全用 ESM,得加 --extensions js,ts,jsx,tsx 显式声明后缀,否则大量模块会被忽略;它默认不扫 node_modules,天然避开噪音,但若要排除特定内部包,得用 --exclude 正则。
真正麻烦的不是生成图,而是图里一堆 node_modules 内部依赖把关键业务链路淹没了。每次生成前,务必用配置文件过滤掉第三方包——这个动作容易被跳过,但跳过之后,图就失去了分析价值。


















