循环导入,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';