了解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引擎会bar.js在评估时加载import { Bar } from 'javascripts/bar';,并在通过HTTP返回该模块时阻塞？或者bar.js在评估脚本之前下载index.html？

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

现在,如果我想连接模块,我将继续需要将我的模块包装在IIFE中,以便它们的范围保持不同(或者至少使用构建步骤来实现这一点)？

Answer 1

在引擎盖下,ES6引擎在评估来自'javascripts/bar'的导入{Bar}时会加载bar.js,并在通过HTTP返回该模块时阻塞？或者在评估index.html中的脚本之前下载了bar.js？

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

但是,抛开你所做的任何语法错误,我可以概括地告诉你浏览器加载器可能标准化的内容.它是后者:在任何脚本执行发生之前,提前确定并下载导入.(但是,对于Node.js加载器,它可能会阻塞.)

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

这取决于你对全局变量的意思.如果您声明具有eg的全局window.x = 5,那么仍然会改变全局对象.模块不会让单独的全局对象搞乱.

但是,如果您的意思是"意外"全局变量,如在顶级声明var或function声明的那些,则答案是模块顶级var和function声明不会导致定义全局属性.

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

现在,如果我想连接模块,我将继续需要将我的模块包装在IIFE中,以便它们的范围保持不同(或者至少使用构建步骤来实现这一点)？

如果你想连接模块,你会遇到比你描述的更大的问题.例如,import并且export仅在顶部水平使用,而不是一个IIFE内部.模块并不意味着连接,因为这样做会对现有浏览器和服务器的性能产生积极影响.