javascript - 了解 ES6 模块

Question

有人可以确认我对 ES 模块的理解吗？

在 javascripts/bar.js 中:

var foo = 2;

export function Bar() {}

在index.html

 <script>
   import { Bar } from 'javascripts/bar';
   var b = new Bar(); // Instantiates an instance of Bar.
 </script>

在引擎盖下，ES6 引擎将在评估 import { Bar } from 'javascripts/bar'; 时加载 bar.js，并在该模块返回时阻塞通过 HTTP？还是在评估 index.html 中的脚本之前下载了 bar.js？

因为 bar.js 是使用 import 关键字加载的，所以 bar.js 中的全局变量仅限于该模块并且是不可见的全局？

现在如果我想连接模块，我将继续需要将我的模块包装在 IIFE 中，以便它们的范围保持不同(或者至少使用一个构建步骤在后台执行此操作)？

Answer 1

Under the hood the ES6 engine will load bar.js when it evaluates import { Bar } from 'javascripts/bar';, and block upon return of that module over HTTP? Or is bar.js downloaded prior to evaluation of the script in index.html?

目前还没有正确答案，因为没有关于如何加载模块的规范。 ES2015 仅指定了模块语法，但运行时如何解释尚未标准化。例如，最终实现的任何加载器规范都不太可能允许您省略 .js。像你一样做。而且<script>也不太可能标签将被允许使用 import .

但是，撇开您犯的任何语法错误不谈，我可以笼统地告诉您哪些内容可能要针对浏览器加载程序进行标准化。是后者:导入是在任何脚本执行之前提前确定和下载的。 (然而，对于 Node.js 加载器，它很可能会阻塞。)

Because bar.js is loaded using the import keyword, the globals in bar.js are scoped to that module and are not visible globally?

这取决于你所说的全局变量是什么意思。如果你用例如声明一个全局window.x = 5 ，这仍然会改变全局对象。模块不会获得单独的全局对象。

但是，如果您指的是像用 var 声明的那些“意外”全局变量或 function在顶层声明，答案是在模块顶层 var和 function声明不会导致定义全局属性。

(请注意，在模块和脚本中，顶级 let 和 const 声明不会在全局对象上创建属性。)

Now if I want to concatenate modules, I will continue to need to wrap my modules in IIFEs, so that their scopes remain distinct (or at least use a build step that does this under the hood)?

如果你想连接模块，你会遇到比你描述的问题大得多的问题。例如，import和 export只能在顶层使用，不能在 IIFE 中使用。模块并不意味着要连接，因为这样做是 actively harmful to performance给定现代浏览器和服务器。