使用索引文件时Webpack ES6模块循环依赖

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试图再次访问索引，它在moduleB之前解析moduleC。

是不是可以这样做，还是有另一种解决方案？

Answer 1

这里的问题是ModuleB在导出和运行ModuleB时尚未导出，而且由于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时，索引将再次被解析并且在它到达ModuleB之前将看到ModuleC。 它似乎仅适用于两个模块，因为我认为索引文件没有得到解析。

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

所以index.js应该如下所示：

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