我正在使用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所指出的,如果您想避免再次遇到此问题,则有一个用于循环依赖检测的插件。