验证和可视化依赖项。有了你的规则。 JavaScript。打字稿。咖啡本。 ES6,commonjs,amd。
这贯穿于任何JavaScript,Typescript,Livestript或Coffeescript项目中的依赖项和...
作为副作用,它可以以各种输出格式生成依赖图,包括凉爽的可视化,您可以粘在墙上以打动奶奶。
npm install --save-dev dependency-cruiser
# or
yarn add -D dependency-cruiser
pnpm add -D dependency-cruisernpx depcruise --init这将在您的环境中稍微环顾四周,问您一些问题,并创建一个.dependency-cruiser.js配置文件,该文件适合您的项目1 2 。
要在SRC文件夹中创建依赖项的图,您将使用输出类型dot运行依赖巡洋舰,并在结果上运行GraphViz Dot 3 。在一个衬里:
npx depcruise src --include-only " ^src " --output-type dot | dot -T svg > dependency-graph.svg依赖性 - 捕痕V12及以上:add-Config选项
虽然从依赖项 - cruiser v13及以后不需要必要,但是在V12及以后,您必须通过-Config选项,以使其找到.conipendenty-cruiser.js配置文件:
npx depcruise src --include-only " ^src " --config --output-type dot | dot -T svg > dependency-graph.svg
--include-only命令行选项。mermaid , json , csv , html或纯文本等格式,那么我们也会覆盖她。当您在上面运行depcruise --init时,该命令还为.dependency-cruiser.js添加了一些规则,这些规则在大多数项目中都是有意义的,例如检测循环依赖项,套件中缺少的依赖项。
通过调整该文件开始添加自己的规则。
样本规则:
{
"forbidden" : [
{
"name" : " not-to-test " ,
"comment" : " don't allow dependencies from outside the test folder to test " ,
"severity" : " error " ,
"from" : { "pathNot" : " ^test " },
"to" : { "path" : " ^test " }
}
]
}npx depcruise src依赖性 - 捕痕V12及以上:add-Config选项
虽然从依赖关系 - 捕获器V13中没有必要,但是在V12及以上,您必须传递 - config选项才能使其找到.epentendency-cruiser.js配置文件:
npx depcruise --config .dependency-cruiser.js src
这将根据您的规则来验证,并以类似Eslint的格式显示出任何违规行为:
还有更多报告验证的方法;在图中(如此读数的顶部)或在含有自我的html文件中。
depcruise脚本。 您来对地方:-)::
麻省理工学院

与?在荷兰。
为了方便起见,我们在示例脚本中使用npx 。当您在package.json中使用脚本中的命令时。JSON不必以npx前缀。 ↩
如果您不想使用npx ,而是pnpx (来自pnpm软件包管理器)或yarn - 请参阅该工具的文档。特别是pnpx语义与npx有很大不同,并且您想在使用之前要注意。同时:即使您使用与npm不同的软件包管理器安装了依赖项, npx也应该工作。 ↩
假设可以使用GraphViz dot命令 - 在大多数Linux和可比较的系统上。如果不是,请参见GraphViz的下载页面,以获取有关如何在计算机上获取的说明。 ↩