Webpack ES6 modules 使用索引文件时的循环依赖

Question

我有一个大项目，我现在尝试重构为 ES6 模块。

为了进一步开发更容易，我想引入索引文件，它只导出目录中的所有模块：

index.js:

export { default as ModuleA } from './moduleA'
export { default as ModuleB } from './moduleB'
export { default as ModuleC } from './moduleC'

moduleA.js:

import { ModuleB } from './index'

moduleB.js:

import { ModuleC } from './index'

ModuleC.doSomething()

moduleC.js:

export default {
  doSomething: () => {}
}

起点是ModuleA。

问题是，ModuleB中的ModuleC未定义，所以doSomething无法执行。
我怀疑循环依赖存在一些问题，因为 moduleB 尝试再次访问索引，它在 moduleC.

之前解析 moduleB

是不是不能这样做，还是有其他解决方案？

Answer 1

这里的问题是在导出 ModuleB 和运行s 时 ModuleC 还没有导出，并且由于 ModuleC 是 ModuleB 的要求，它不能运行。如果我是你，我会从它们各自的文件中导出它们，当你导入它们时，从它们自己的文件中导入它们而不是 index.js。

例子

ModuleA.js:

import { ModuleB } from 'moduleB.js'
    export default {
      // Your code here
}

ModuleB.js

import { ModuleC } from 'moduleC.js'
moduleC.doSomething();

ModuleC.js

export default {
    doSomething: () => {
      // Your code
    }
}

最后，由于 ModuleA 是 index.js 的入口点，只需将其导入 index.js 和运行您需要的运行。

Answer 2

好的。解决了。

问题是，当 ModuleB 尝试从索引中导入 ModuleC 时，索引将被再次解析并在到达 [=12= 之前看到 ModuleB ].
它似乎只适用于两个模块，因为我认为索引文件没有得到重新解析。

解决方法：
导入模块，最后尝试从索引文件加载其他模块。

所以index.js应该是这样的：

export { default as ModuleA } from './moduleA'
export { default as ModuleC } from './moduleC'
export { default as ModuleB } from './moduleB'

Webpack ES6 modules circular dependencies when using index files