Webpack导入返回不确定的,具体取决于导入的顺序

JavaScript Webpack

西里神奇

2020-03-23

我正在使用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而不是第一个版本中的模块?怎么了?

第2936篇《Webpack导入返回不确定的,具体取决于导入的顺序》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
蛋蛋 2020.03.23

在解决问题(拉头发)几乎整天的工作后,我终于意识到我有一个循环依赖。

它说的是// some other imports hereA导入另一个模块C,然后又导入BA首先在得到进口main.js,所以B最终是在“圆”的最后一个环节,和的WebPack(或任何CommonJS的般的环境,对于这个问题,如Node)刚刚短路通过返回Amodule.exports,这仍然是undefined最终,它等于some-const,但是最终同步代码被B处理undefined

通过删除C依赖于out 的代码,消除了循环依赖关系B,从而解决了该问题。希望Webpack会以某种方式警告我。

编辑:最后一点,如@cookie所指出的,如果您想避免再次遇到此问题,则有一个用于循环依赖检测的插件

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android