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之前会看到export { default as ModuleA } from './moduleA' export { default as ModuleC } from './moduleC' export { default as ModuleB } from './moduleB'。
它似乎仅适用于两个模块，因为我认为索引文件没有得到解析。

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

所以 index.js 应如下所示：

[System.Diagnostics.CodeAnalysis.SuppressMessage(
"Microsoft.Maintainability"
, "CA1500:VariableNamesShouldNotMatchFieldNames"
, MessageId = "CS$<>8__locals1")]

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

2 个答案: