了解 ES6 模块

Understanding ES6 modules

本文关键字：模块 ES6 了解      更新时间：2023-09-26

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

在引擎盖下，ES6引擎将加载bar.js当它从'javascripts/bar'评估导入{ Bar }时，并在通过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 内部使用。模块不应该连接，因为这样做对现代浏览器和服务器的性能非常有害。

相关文章：