使用索引文件时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.

问题是,in ModuleB ModuleC未定义,因此doSomething无法执行.
我怀疑循环依赖的一些问题,因为moduleB尝试再次访问索引,moduleB之前解析moduleC.

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

Answer 1

这里的问题是，到ModuleB 被导出并运行时，ModuleC 还没有被导出，而且由于ModuleC 是ModuleB 的一个要求，所以它不能运行。如果我是你，我只会从他们自己的文件中导出每个文件，当你导入它们时，从他们自己的文件而不是 index.js 中导入它们。

例子

模块A.js：

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

模块B.js

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

模块C.js

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

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