Порядок экспорта в пачке веб-пакетов

Question

Для такого кода:

const top = document.createElement("div");
top.innerText = "This is the top";
top.style = red;

export { top };

Webpack создает следующее:

...

"use strict";
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, "top", function() { return top; });
...

const top = document.createElement("div");
top.innerText = "This is the top";
top.style = red;

Как это может работать, так как внутри геттера function() { return top; }, top еще не определено, когда скрипт выполняется?

Есть ли конкретная причина, почему Webpack создает экспорт сверху, а не снизу?

Благодарю.

Answer 1

Весь файл JS оценивается в целом. Раздел кода, который генерирует webpack, создает функцию обратного вызова, которая будет вызываться позднее. В частности, когда пользовательский код requireс или imports рассматриваемый модуль.

Далее в скрипте оценивается содержимое вашего модуля и переменная top определяется, и это гарантированно произойдет до того, как Webpack выполнит function() { return top; }

Это только соглашение, чтобы объявить или определить переменные, прежде чем они будут использованы в JavaScript, а не требование. Области функций могут быть безопасно созданы со ссылками на переменные в родительской области, которые еще не были определены, если они будут определены при выполнении функции.