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;

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

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

谢谢。

Answer 1

整个js文件作为一个整体进行评估。 webpack生成的代码部分正在创建一个回调函数，稍后将调用它。具体来说，当用户使用require或import编码相关模块时。

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

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