了解 ES6 模块答案

【问题标题】：Understanding ES6 modules了解 ES6 模块
【发布时间】：2014-12-14 16:39:38
【问题描述】：

请有人确认我对 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 中，以便它们的范围保持不同（或者至少使用在后台执行此操作的构建步骤）？

【问题讨论】：

【解决方案1】：

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

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

但是，撇开您所犯的任何语法错误不谈，我可以笼统地告诉您什么是可能为浏览器加载程序标准化的。后者是：在任何脚本执行发生之前，提前确定并下载导入。（但是，对于 Node.js 加载器，它可能会阻塞。）

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

这取决于你所说的全局变量是什么意思。如果您声明一个全局变量，例如window.x = 5，它仍然会改变全局对象。模块没有单独的全局对象来处理。

但是，如果您的意思是“意外”全局变量，例如在顶级声明 var 或 function 声明的全局变量，答案是在模块中顶级 var 和 function 声明不会导致要定义的全局属性。

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

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

如果您想连接模块，您将遇到比您描述的问题更大的问题。例如，import 和 export 只能在顶层使用，不能在 IIFE 内使用。模块并不意味着要连接，因为在现代浏览器和服务器的情况下，actively harmful to performance 是这样做的。

【讨论】：