编程语言中的ES模块

作者:方章和 翻译更新于： 2020-08-22 23:28:49

了解Javascript中的ES模块。高级语言的出现使得计算机程序设计语言不再过度地依赖某种特定的机器或环境。这是因为高级语言在不同的平台上会被编译成不同的机器语言，而不是直接被机器执行。最早出现的编程语言之一FORTRAN的一个主要目标，就是实现平台独立。

模块在每个编程语言中都能找到。它是一种能在一个代码块中引入另一个代码的模块功能的方法。这些模块是开发人员开发的具有特定功能的代码，可以在项目其他地方重复使用。模块化为你提供了一些好处，比如代码的可复用性和模块化。

如上图所示，在HTML文件中，你需要在脚本标签中指定type="模块"，浏览器才会将其视为ECMAScript模块。

兼容性

为了向后兼容，你可以在脚本标签中包含nomodule（其中加载的JS文件是单个打包文件）。支持ES模块的浏览器会知道忽略这一点。这个解决方案即使在最老的浏览器中也能使用。Willem的回答已经很好的解释了这个问题。

在上面的方案中，我们会在HTML中加入这样的内容。

1. "module" src="./main.js" > 
2.  
3. "./fallback.js" > 
4.  

如果你是在本地测试，你将需要在服务器上运行这个，因为你会遇到CORS问题。请在这里阅读更多信息。模块以绝对或相对引用导入，必须以"/"、"./"或"./"开头。

注意：

动态导入

最新的ES2020版本确实带有动态导入功能。要动态导入模块，导入关键字可以作为函数调用。当以这种方式使用时，它会返回一个promise。

1. import('/modules/library.js') 
2. .then((module) => { 
3.    // Do something with the module. 
4. }); 
5. //or using await 
6. let module = await import('/modules/library.js'); 

关于es模块的详细兼容性可以参考这里 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#import以及https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#export

您是否应该选择使用ES模块？

对于浏览器来说，ES模块是新的标准。可以开箱即用的异步模块加载功能，你可以获得更快的启动时间以更好的性能。虽然您可以在浏览器中使用CommonJS与一些额外的插件，但强烈建议您切换到ES模块，因为它们是浏览器中的原生模块。

ES原生模块允许您获得单个模块的加载，而不是单个打包文件。这是相当有用的，它减少了加载数据的大小。浏览器对原生模块的兼容性也很重要，因为它决定了原生的ES模块是否会被实现，或者我们是否会回退到我们的模式，它将加载一个单一的文件。当你得到一个单一的bundle文件时，其中一个问题是，当你的应用程序变得更大时，bundle js文件的大小也会增加，从而影响启动时间和性能。你可以通过使用代码拆分来避免这个问题，这是现代打包器（如webpack）中的一个功能。但在某些情况下，我们可能会选择模块打包器，如webpack而不是ES模块。如果你有CSS、图像、字体等资产，甚至是XML、CSV等数据文件，你可能会选择webpack解决方案，因为webpack提供了文件打包功能。

你还应该考虑到浏览器对HTTP2的支持。当你使用本地模块时，你的浏览器会单独加载这些模块。但在HTTP2的帮助下，我们可以用一个连接同时服务多个请求，而不是发送多个HTTP请求。根据CanIUse的数据，96.49%的浏览器使用HTTP2。

但是当你开发一个应用程序时，即使是剩下的3.51%也应该满足，那么你可能会想改用webpack。这是因为如果你坚持使用原生的ES模块，你的应用程序将需要发送几个HTTP请求来加载每个单独的模块。

在Node中，情况就完全不同了。由于该功能仍被标记为实验性的，所以你最好坚持使用CommonJS。不过你还是可以尝试一下ES模块。你可以在这里查看上面例子的源代码。你也可以在这里查看实时演示。我希望你明白什么是ES模块，以及为什么需要它们。

虽然大多数的语言可以既可被编译又可被解译，但大多数仅在一种情况下能够良好运行。在一些编程系统中，程序要经过几个阶段的编译，一般而言，后阶段的编译往往更接近机器语言。这种常用的使用技巧最早在1960年代末用于BCPL，编译程序先编译一个叫做“0代码”的转换程序（representation），然后再使用虚拟器转换到可以运行于机器上的真实代码。这种成功的技巧之后又用于Pascal和P-code，以及Smalltalk和二进制码，在很多时候，中间过渡的代码往往是解译，而不是编译的。