我正在使用webpack + babel。我有三个看起来像这样的模块:
// A.js
// some other imports here
console.log('A');
export default 'some-const';
// B.js
import someConst from './A';
console.log('B', someConst);
export default 'something-else';
// main.js
import someConst from './A';
import somethingElse from './B';
console.log('main', someConst);
当main.js
执行时,我看到以下内容:
B undefined
A
main some-const
如果将中的导入交换为main.js
,则B
成为第一个,我得到:
A
B some-const
main some-const
为什么会B.js
得到undefined
而不是第一个版本中的模块?怎么了?
在解决问题(拉头发)几乎整天的工作后,我终于意识到我有一个循环依赖。
它说的是
// some other imports here
,A
导入另一个模块C
,然后又导入B
。A
首先在得到进口main.js
,所以B
最终是在“圆”的最后一个环节,和的WebPack(或任何CommonJS的般的环境,对于这个问题,如Node)刚刚短路通过返回A
的module.exports
,这仍然是undefined
。最终,它等于some-const
,但是最终同步代码被B
处理undefined
。通过删除
C
依赖于out 的代码,消除了循环依赖关系B
,从而解决了该问题。希望Webpack会以某种方式警告我。编辑:最后一点,如@cookie所指出的,如果您想避免再次遇到此问题,则有一个用于循环依赖检测的插件。