webpack 包中的导出顺序

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;

由于在 getter 内部 function() { return top; }、top 在执行脚本时尚未定义，这如何工作？

Webpack 在顶部而不是底部创建导出是否有特殊原因？

谢谢。

Answer 1

整个 js 文件作为一个整体进行评估。 webpack 生成的代码部分正在创建一个稍后将调用的回调函数。特别是当用户代码requires 或imports 有问题的模块时。

稍后在脚本中评估模块的内容并定义变量top，这保证在 webpack 执行之前发生function() { return top; }

在 javascript 中使用变量之前声明或定义变量只是惯例，不是必需的。函数作用域可以安全地使用对父作用域中尚未定义的变量的引用来创建，只要它们将在函数执行时定义。