如何理解JavaScript中的ES模块

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

兼容性

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

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

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

注意：

动态导入

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

import('/modules/library.js') .then((module) => {    // Do something with the module. }); //or using await 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模块。你可以在这里查看上面例子的源代码。你也可以在这里查看实时演示。

关于如何理解JavaScript中的ES模块问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。