如何让 ES6/2015 导入/模块在浏览器中工作？ [复制]答案

【问题标题】：How to get ES6/2015 imports/modules working in browsers? [duplicate]如何让 ES6/2015 导入/模块在浏览器中工作？ [复制]
【发布时间】：2016-09-06 20:04:03
【问题描述】：

我似乎无法让ES6/2015 imports 工作。从this Understanding ECMAScript 6 book，我知道我需要用type 属性modules 编写<script> 标签：

<script type="module" src="module.js"></script>

然后我可以在module.js 中使用import。但是，它不适用于最新的 Firefox (v48.0.1) 和 Chrome (v53.0.2785.89)。当我在 module.js 中添加 console.log 语句时，控制台没有任何记录。

如何在浏览器中使用 ES2015 的导入机制（本机，不使用 babel/webpack 之类的东西）？

更新：看起来像Microsoft's Edge browser supports modules，至少在实验模式下。为什么其他浏览器还不支持它，至少在实验模式下？

【问题讨论】：

浏览器尚不支持 ES6 模块。
你……不能。等待运行时支持它并同时使用 webpack。
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 尚不支持
关键是，虽然模块的语法已经在 ECMAScript 6 规范中定义，但决定如何加载模块的逻辑还没有，这就是为什么浏览器还没有实现它们的原因。 Babel 只是使用 Node 的 CommonJS 模块加载行为。
“如何让 X 工作”与“哪些浏览器支持 X”不是相同的问题。请停止将有关 Javascript 的所有内容标记为彼此重复。

标签： javascript ecmascript-6 es6-module-loader es6-modules

【解决方案1】：

你不能。语法和协定已在 ECMAScript 规范中定义，但在任何主要运行时都没有实现。

在某些平台提供内置的 System 对象和相关的模块加载之前，您会被 Webpack 或类似于 polyfill 的东西卡住。

虽然这似乎是浏览器的一个重大遗漏，但该功能很容易填充。

【讨论】：

这方面有没有好的 polyfill 库？
我相信Webpack 2 和SystemJS 都支持System 对象及其上的大多数功能。不幸的是，它们都比 polyfill 重得多。
实际上 Webpack shims System.import 在编译时 i.s.o 在运行时。因此，在您的 bundle.js 模块内部使用System.import（或import）相互查找，但从外部来看，这对您没有帮助。在运行时，您仍然看不到可以与之交互的 System.import 对象。
截至 2017 年 9 月，Chrome 和 Safari 现在 support ES6 模块在稳定版本中，而 Firefox 支持它们。

【解决方案2】：

目前，任何浏览器都不原生支持 import 和 export ES6 功能（有关更多信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export）。

您需要使用一个编译器，它会使用这些关键字转换您的代码，其中最常用的关键字之一是babel。

【讨论】：

我知道 babel，正如我在问题中提到的那样。奇怪的是，现代浏览器似乎在 ES6/2015 上几乎 100%（至少根据 kangax.github.io/compat-table/es6）
ES2015 标准定义了导入和导出变量的语法和语义，但没有定义实际可以从哪里加载模块。我相信这是即将到来的 HTML/DOM 标准的一部分。