WebPack преобразует модуль в объект вместо функции

Question

У меня есть entry-point.js, First.js, Second.js в том же каталоге.

Начальный point.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();
};

Когда я компилирую entry-point.js с очень простой конфигурацией веб-пакета (на самом деле ничего особенного, я даже не хочу загрязнять вопрос этим), я получаю ошибку First is not a function. Я предполагаю, что это потому, что есть некоторые рекурсивные зависимости, но я не могу действительно обдумать это.

P.S. Я немного знаю, как это исправить, я просто хочу понять, почему именно это не работает.

Answer 1

Когда вам требуется First в entry-point, загрузчик начинает загрузку First.js, для чего требуется Second.js. Поскольку First не полностью завершил загрузку, поэтому это пустой объект, поэтому вы получаете not a function ошибку.

Есть много способов исправить проблему циклической зависимости. Один из способов - добавить файл со всеми импортированными файлами, а затем потребовать от него.

//dependecy.js

var First = require("./First")
var Second = require("./Second")

exports.First = First
exports.Second =Second


//First.js

var {Second} =require("./dependency")

//Second.js
var {Frist} =require("./dependency")

Answer 2

Ваша проблема в круговых зависимостях: First зависит от Second и Second в зависимости от First.

Это связано с циклом зависимости, и мы присваиваем module.exports новому объекту в конце файла.

Из-за цикла объект module.exports передается в Second в первой строке First, это пустой объект.

После этого First переназначает значение module.exports функции, но объект уже передан Second, поэтому вы получаете ошибку.

Чтобы решить эту проблему, устраните круговую зависимость, если можете. Циркулярные зависимости сбивают с толку и, как правило, являются признаком тесно связанного кода, было бы лучше модулировать ваши функции таким образом, чтобы общие зависимости извлекались в их собственные модули.

Если вы не можете устранить циклические зависимости, вам нужно будет избегать переназначения module.exports.

First.js:

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

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

Second.js

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

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