javascript - WebPack 将模块解析为对象而不是函数

Question

我在同一目录中有 entry-point.js、First.js、Second.js。

入口点.js

var First = require('./First.js'); // If I take out this line the error will go away.
var Second = require('./Second.js');

Second();

First.js

var Second = require('./Second.js'); // And if I take out this line the error will go away.

module.exports = () => {
  console.log('FIRST')
};

Second.js

var First = require('./First.js');

module.exports = () => {
  First();
};

当我使用非常基本的 webpack 配置编译 entry-point.js 时(真的没什么，我什至不想用它来污染问题)我得到错误 First 不是函数。我想这是因为存在一些递归依赖关系，但我无法真正理解这一点。

附言我有点知道如何修复它，我只是想知道为什么它不起作用。

Answer 1

你的问题是循环依赖:First取决于 Second和 Second取决于 First .

这是由于有一个依赖循环，并且正在分配 module.exports到文件末尾的新对象。

由于循环，module.exports对象传递给 Second在 First 的第一行, 这是一个空对象。

在此之后，First重新分配 module.exports 的值给一个函数，但是对象已经被传递给了Second ，这就是您收到错误的原因。

要解决这个问题，请尽可能消除循环依赖。循环依赖性令人困惑，通常是代码紧密耦合的症状，最好以将公共(public)依赖性提取到它们自己的模块中的方式模块化您的函数。

如果不能消除循环依赖，则需要避免重新分配 module.exports .

首先.js:

var Second = require('./Second.js');

module.exports.first = () => {
  console.log('FIRST')
};

第二个.js

var First = require('./First.js');

module.exports = () => {
  First.first();
};