circular-dependency-plugin v 5.2.0

在 webpack 打包时,检测循环依赖的模块。

循环依赖关系在复杂的软件工程中经常是必须的,循环依赖关系的存在并不总是意味着存在缺陷,但是如果您认为存在缺陷,这个模块可以帮您找到它。

Webpack 版本

该插件的最新主版本号为5,支持 webpack 4.0.1和更高版本的对等依赖。主版本号为4及以下的版本支持的是 webpack 3.x,x 以下为兼容依赖(peer dependency)。

基本使用

// webpack.config.js
const CircularDependencyPlugin = require('circular-dependency-plugin')

module.exports = {
  entry: "./src/index",
  plugins: [
    new CircularDependencyPlugin({
      // 排除检测符合正则的文件
      exclude: /a\.js|node_modules/,
      // 将符合正则的文件包含在内
      include: /dir/,
      // 向 webpack 输出错误而不是警告
      failOnError: true,
      // 允许包含异步导入的循环
      // 举例:via import(/* webpackMode: "weak" */ './file.js')
      allowAsyncCycles: false,
      // 设置当前的工作目录以显示模块路径
      cwd: process.cwd(),
    })
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

高级用法

// webpack.config.js
const CircularDependencyPlugin = require('circular-dependency-plugin')

module.exports = {
  entry: "./src/index",
  plugins: [
    new CircularDependencyPlugin({
      // `onStart` 在循环检测开始前调用。
      onStart({ compilation }) {
        console.log('start detecting webpack modules cycles');
      },
      // `onDetected` 检测到有模块循环时调用。
      onDetected({ module: webpackModuleRecord, paths, compilation }) {
        // `paths` 是出现循环引用的相对模块路径的数组。
        // `module` 是 webpack 生成的导致循环依赖的模块记录
        compilation.errors.push(new Error(paths.join(' -> ')))
      },
      // `onEnd` 会在循环检测结束后调用
      onEnd({ compilation }) {
        console.log('end detecting webpack modules cycles');
      },
    })
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

如果您对循环的数量有要求,并且希望在出现新的循环时报错警告并阻止它,M那么可以使用生命周期方法进行计数,超过时就让它失败。 (注意,如果您关心的是检测一个循环被另一个循环替换的情况,那么不会被捕捉到。)

// webpack.config.js
const CircularDependencyPlugin = require('circular-dependency-plugin')

const MAX_CYCLES = 5;
let numCyclesDetected = 0;

module.exports = {
  entry: "./src/index",
  plugins: [
    new CircularDependencyPlugin({
      onStart({ compilation }) {
        numCyclesDetected = 0;
      },
      onDetected({ module: webpackModuleRecord, paths, compilation }) {
        numCyclesDetected++;
        compilation.warnings.push(new Error(paths.join(' -> ')))
      },
      onEnd({ compilation }) {
        if (numCyclesDetected > MAX_CYCLES) {
          compilation.errors.push(new Error(
            `Detected ${numCyclesDetected} cycles which exceeds configured limit of ${MAX_CYCLES}`
          ));
        }
      },
    })
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27