使用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

因此，当Arequire B和Brequire
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';