了解ES6模块 [英] Understanding ES6 modules

问题描述

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

Please can someone confirm my understanding of ES modules?

在 javascripts / bar.js p>

In 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}从'javascripts / bar'; ，并阻止该模块通过HTTP返回？或者在 index.html 之前脚本评估之前下载 bar.js ？

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?

因为 bar.js 使用 import 关键字加载，全局变量在 bar.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?

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

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)?

推荐答案

在引擎盖下，ES6引擎将在评估javascripts / bar中的导入{Bar}时加载bar.js;并且在通过HTTP返回该模块时阻止？或者是在index.html脚本评估之前下载了bar.js？

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 。

There is no correct answer to this yet, because there is no specification for how modules are loaded. ES2015 only specifies the module syntax, but how runtimes interpret that is not yet standardized. For example, it's very unlikely any loader specification that is eventually implemented will allow you to omit the .js as you do. And it's also very unlikely that <script> tags will be allowed to use import.

但是，除了您所做的任何句法错误之外，我可以一般性地告诉您可以为浏览器加载程序进行标准化的 。它是后者：在任何脚本执行发生之前，提前确定和下载导入。 （对于Node.js加载程序，可能会阻塞）。

However, setting aside any syntactic missteps you made, I can tell you in general terms what is likely to be standardized for the browser loader. It is the latter: imports are determined and downloaded ahead of time, before any script execution happens. (For the Node.js loader, however, it is likely to be blocking.)

因为bar.js是使用import关键字加载的bar.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 ，这仍然会使全局对象变异。模块不会得到单独的全局对象混乱。

That depends on what you mean by globals. If you declare a global with e.g. window.x = 5, that will still mutate the global object. Modules do not get separate global objects to mess with.

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

However, if you mean "accidental" globals like those declared with var or function declarations at the top-level, the answer is that in modules top-level var and function declarations do not cause global properties to be defined.

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

(Note that in both modules and scripts, top-level let and const declarations do not create properties on the global object.)

现在，如果我想连接模块，我将继续需要将我的模块包装在IIFE中，以使它们的范围保持不同（或至少使用一个构建步骤，引擎盖）？

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中使用。模块不是要连接在一起，因为这样做是对于现代浏览器和服务器，对于性能有积极的作用。

If you want to concatenate modules, you're going to have a lot bigger problems than those you describe. For example, import and export are only usable at the top level, and not inside an IIFE. Modules are not meant to be concatenated, as doing so is actively harmful to performance given modern browsers and servers.

这篇关于了解ES6模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！