这篇文章首次发表在公共帐户“小李的前端hut”中,欢迎关注?
随着项目的巨大规模,文件级别和结构的复杂性越来越高,模块关系是混乱的,循环依赖性,相反的依赖性也在增加。
为了保持项目和结构的稳定性,需要模块依赖性。
在这方面,这是一个很棒的工具。今天,它主要介绍其应用程序:
Github Ware
依赖性驱动器实际上转化为“对巡洋舰的依赖性”,用于可视化和验证模块之间的依赖性。
它支持常用的JavaScript,Typescript语言和ESM,CONCORJ和其他模块规格。
在项目中,通常与ESLINT一起使用,一个用于代码检查,另一个用于依赖检查。
视觉依赖关系的关系可以帮助您更快地理解和深入了解项目。下图是依赖性捕捞者产生的预先依赖关系。
它就像一个代码映射,“山脉的视图”,依赖性清晰。
首先安装GraphViz以生成依赖关系图。
然后在项目中安装。
安装后,您可以直接执行命令使用:
执行后,您将在根目录中获得SVG格式依赖图。
上面的核心命令是依靠跟踪SRC下的文件。
其余参数用于控制输出格式:
建议将命令放在软件包的npm脚本中。
除了控制输出格式外,我们还可以通过某些参数控制依赖项。
例如,设置后生成的预先反应依赖项为::
复杂性将大大降低。
对于更多情况,您可以参考官方文件现实世界样本。
除命令外,vscode插头-in依赖巡洋舰扩展名还可以快速查看依赖项。
使用方法也很简单。安装插头 - 之后,单击“右键单击”菜单中的“查看依赖项”,以根据文件查看依赖图。
可以在图中看到其文件级别和下游依赖关系对于临时文件的依赖关系更方便。
依赖性驱动器还可以自定义诸如ESLINT之类的规则以验证依赖关系。
它可以避免在准备法规面前可能发生各种依赖关系,并且使用非常简单。
根据命令行提示完成操作。
配置文件将在根目录中生成。
配置文件看起来很长并且被驳回。实际上,它主要由两个主要区块组成:
规则列表由一一规则组成,自动生成后将建立一些建议的规则。
还会自动生成依赖项,模块规格,TS,WebPack配置文件路径等,通常不需要更改。
简化的总体结构如下:
在排除了不需要关注的配置之后,它看起来更清晰吗?
以下将说明如何详细配置规则。
裁定订单
依赖性验证不会像ESLINT那样通过异常。
建议将命令放入package.json中的NPM脚本中,并用git Hook或ci设置卡点。
默认配置文件已为我们构建 - 在建议的规则中,让我们看一下。
“禁止的周期参考”规则周期参考是指模块A依赖模块B,模块B依赖于模块A。
如果治疗的位置不好,可能会导致程序异常。这样一个大型项目将不可避免地发生。
禁止的周期参考规则用于检测该场景。规则配置如下:
以及描述规则的基本信息。
对于描述规则的具体内容,从所述“依赖方”到表示“依赖方”。
上面的配置表明,任何依赖关系参考都会报告为错误(默认级别是警告,此处更改为演示的错误)。
测试上面的模块和B周期的示例,验证命令的执行将在控制台上看到一个错误并阻止以下过程。
除了“禁止循环参考”的其他规则中,其他规则的其他规则也:
2。:检测未使用的模块以提醒我们及时清理代码以避免干扰。
3。:开发依赖生产环境代码的使用,在开发节点应用程序或NPM软件包时可能会出现问题。
我们还可以根据项目方案自定义规则。
如果发生交叉模块参考,则“禁止跨模块参考”规则的两个非相关模块将导致强耦合。
例如,PAGEA和PAGEB是两个独立的页面组件,但Pagea下方的组件直接引用Pageb的效果。
这将导致两页被纠缠,应尽可能避免。
正确的方法应该是将公共模块置于更高级别,并且该页面是从公共模块中引入的。
但是在实际发展中,这也很难避免。我们可以基于此场景来配置规则:“禁止Pagea引入其他页面模块。”
任何PAGEA依赖性参考,只要它不是来自自身或全局utils,它将报告错误错误。
测试验证命令的执行是否会在控制台上看到错误。
这里的其他自定义规则简要介绍了两个自定义规则。
如果将项目封装到Axios中,则应在业务开发过程中使用包装请求库。
为了避免直接使用Axios,可以配置“禁止直接引用Axios”规则。
它仍然是封装的场景,例如项目封装的cookie库中的基于浏览器的cookie API。
cookie库仅取决于cookie API,并且不依赖其他模块。它可以配置规则以“强迫它为叶子依赖性”。
有关更多其他情况,请留言以讨论和交换。
在本文中,我们介绍了两种使用依赖性捕捞者的治理项目模块的方法。
当然,这只是其能力的尖端。您可以进入Github主页以了解更多信息。
如果这篇文章对您有帮助,请帮助我喜欢它(更多的关注更好 ^ ^。
请注意我的公共帐户“ Little Li's Front -end Hut”,并变得更加强大!还有什么?
原始:https://juejin.cn/post/7096650413209813029