javascript - 使用webpack返回空对象的圆形导入

当前遇到此确切问题:

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中却没有。在这里 super 困惑。

最佳答案

这不是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';