背景：
随着项目复杂度及工程量大起来，项目中优化就显得非常重要。这个过程中入要快速复用工程时，你会发现项目运行部起来，但不知是那种依赖报错，一时也很难检测，以下推荐几种常用的解决方式
依赖关系可视化：
第一种：
使用命令可以生成和控制输出的依赖关系图。对于追踪单个文件的依赖关系的场景，使用 VS Code 插件会更方便。
使用 VSCode 插件 Dependency Cruiser Extension
使用方式也很简单，安装插件后在文件右键菜单中点击「View Dependencies」即可看到基于该文件的依赖图。
第二种
安装Graphviz，仅提供win下的下载安装方式
执行命令：
npx depcruise —-output-type dot src | dot -T svg > dependency-graph.svg
执行后会在根目录下得到一张 svg 格式的依赖关系图。
上方的核心命令是 depcruise src，表示对 src 下的文件进行依赖追踪。
其余参数用来控制输出格式：
—-output-type dot 表示输出格式为 dot，意味着使用 Graphviz 来输出。 dot -T svg > dependency-graph.svg 为 Graphviz 的命令行语法，表示输出名为 dependency-graph 的 svg 文件。
建议将该命令放在 package.json 的 npm 脚本中，还能配合 CI/CD 完成依赖图生成自动化。
其它参数
除了控制输出格式，我们还能通过一些参数对依赖图进行控制。 —-exclude：用于过滤掉图上不关心的依赖。 --include-only：与 --exclude 相反，只保留范围内的依赖。 -—do-not-follow：会过滤掉某个依赖的后续依赖。 —-max-depth：指定依赖树的深度。将依赖图的输出大小保持在可控范围内。 比如设置 --max-depth 1后生成的 preact 依赖图仅有一级依赖
依赖关系校验：
Github 仓库：github.com/sverweij/de…
dependency-cruiser 直译过来就是「依赖巡洋舰」，用于可视化和校验模块之间的依赖关系。
它支持前端常用的 JavaScript，TypeScript 语言和 ESM，CommonJS 等模块规范。
在项目里通常与 ESLint 配套使用，一个用于代码检查，一个用于依赖检查。
可以像 ESLint 一样通过命令来校验依赖关系，而且支持自定义规则，比如「禁止循环依赖」，「禁止跨模块引用」等。
dependency-cruiser 也可以像 ESLint 一样自定义规则来对依赖关系进行校验。
安装
npm i dependency-cruiser -D
npx depcruise -—init
执行命令
npx depcruise src --config .dependency-cruiser.js
子依赖禁止再依赖其它模块
比如项目内基于浏览器的 cookie api 封装了一个 cookie 库。
cookie 库只依赖 cookie api，不依赖其它模块，可以配置一条规则来「强制它是一个叶子依赖」。
{
name: 'cookies-define', //规则名称
severity: 'error', //严重等级
comment: //禁止循环引用
// from 和 to 描述规则的具体内容，from 表示「依赖方」，to 表示「被依赖方」
from: { // 不填则表示所有引用
path: '^src/lib/cookies',
},
to: { // 不能引用任何其它依赖
// circular: true // 不允许成环
}
},
第三种 使用 depcheck 检测项目中不用的依赖包，或缺失包文件
安装
npm install -g depcheck
node.js >= 10
使用
在项目目录下直接执行命令 depcheck，或者 depcheck <你的项目目录>
注意：也可以创建一个 .depcheckrc 文件，然后直接配置
ignores: ["eslint", "babel-*", "@babel/*"] skip-missing: true
删除
npm uninstall <包名>
项目久了依赖太多，可以通过以上命令删除无用的包，为项目减负
总结
本文主要介绍了 dependency-cruiser 治理项目模块依赖关系的几种使用方式。
依赖关系可视化：使用命令可以生成和控制输出的依赖关系图。对于追踪单个文件的依赖关系的场景，使用 VS Code 插件会更方便。
依赖关系校验：可以像 ESLint 一样通过命令来校验依赖关系，而且支持自定义规则，比如「禁止循环依赖」，「禁止跨模块引用」等。
使用插件检查缺失依赖包
[1] Real world samples: github.com/sverweij/de…
[2] Dependency Cruiser Extension: marketplace.visualstudio.com/items?itemN…
[3]依赖验证规则 www.5axxw.com/wiki/conten…
