循环导入，webpack返回空对象

Question

目前遇到这个问题：

FileA:
var b = require file B
var c = require file C

FileB:
var a = require file A

FileC:
var a = require file A

当我运行代码时，我在文件C中收到错误：

A.doSomething is not a function

在那里抛出一个调试器，看到A是一个空对象。什么是真的奇怪的是我只在文件C中收到错误，但不是文件B.在这里超级混淆。

Answer 1

这不是webpack问题，而是CommonJS模块的属性。

首次需要CommonJS模块时，其exports属性会在幕后初始化为空对象。

module.exports = {};

然后，模块可以决定扩展此exports属性，或覆盖它。

exports.namedExport = function() { /* ... */ }; // extends

module.exports = { namedExport: function() { /* ... */ } }; // overrides

因此，当A需要B且B需要A之后，A不再执行（这会产生无限循环），但是返回其当前的exports属性。由于A在文件的最顶部需要B，因此在导出任何内容之前，require('A')模块中的B调用将产生一个空对象。

循环依赖的常见修复方法是将导入放在文件的末尾， 之后导出其他模块所需的变量。

A：

module.exports = { foo: 'bar' };
require('B'); // at this point A.exports is not empty anymore

B：

var A = require('A');
A.foo === 'bar';