[tool]循环依赖?拿捏!

背景

之前为朋友解决一个报错的时候,意外发现的'好物',只一眼就确定了这是好东西,必须要分享给jym!

madge

npm: www.npmjs.com/package/mad…

github: github.com/pahen/madge

npx执行指令:

npx madge --circular --extensions ts .

看官网描述:

Madge is a developer tool for generating a visual graph of your module dependencies, finding circular dependencies, and giving you other useful info. Joel Kemp's awesome dependency-tree is used for extracting the dependency tree.

简单翻译:

Madge 是一个开发者工具，用于生成你的模块依赖关系的可视化图谱，发现循环依赖，并提供其他有用信息。它使用了 Joel Kemp 的出色工具 dependency-tree 来提取依赖树。 适用于 JavaScript（AMD、CommonJS 和 ES6 模块） 也适用于 CSS 预处理器（Sass、Stylus 和 Less） 默认排除了通过 NPM 安装的依赖项（可以启用） 排除了所有核心 Node.js 模块（如 assert、path、fs 等） 将自动遍历子依赖项

Madge,简单来说就是一个代码结构分析工具,可以帮你分析出代码的依赖关系.在你发现你的模块之间纠缠不清的时候,循环依赖找不到位置的时候,有了它就可以轻松找出模块之间的依赖关系啦~

用例

为大家演示一下具体的使用,先模拟一个最简单的循环应用场景a->b->c->a

我们遇到这种情况的时候会遇到报错:

源码

app.component.ts

import { Component } from '@angular/core';
import {A} from "../test/a";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'circular-dept';
  constructor() {
    const a = new A();
    console.log(a)
  }
}

test/a.ts

import {B} from "./b";

export class A{
  b!:B;
  constructor() {
    this.b = new B();
  }
}

test/b.ts

import {C} from "./c";

export class B{
  c!:C;
  constructor() {
    this.c=new C();
  }
}

test/c.ts

import {A} from "./a";

export class C{
  a!:A;
  constructor() {
    this.a = new A();
  }
}

使用效果

# 执行查询循环依赖 指定ts文件 指定目录 在src目录下
npx madge --circular --extensions ts ./src    

最后

希望这个工具对大家有用,另外再推一下我们力扣刷题脚手架leetcode-practice啦~

自从几个月前将所有issue解决后,基本都不动了,还是欢迎大家提出好的issue,让我们更进一步~