哪些浏览器支持 ECMAScript 6 的导入和导出语法？答案

【问题标题】：Which browsers support import and export syntax for ECMAScript 6?哪些浏览器支持 ECMAScript 6 的导入和导出语法？
【发布时间】：2015-11-04 08:22:10
【问题描述】：

我目前正在使用 MEAN Stack 编写一个 Web 应用程序，并且正在尝试使用 ECMAScript 6 JavaScript 编写代码；但是，在使用导入和导出语法时，我在 Chrome 和 Firefox 中都遇到了错误。目前有没有完全支持 ECMAScript 6 的浏览器？

请注意：我不是问浏览器何时支持 ECMAScript 6。我在问哪些浏览器支持 ECMAScript 6 导入和导出语法。见https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla#Features_not_yet_supported_by_Firefox

【问题讨论】：

stackoverflow.com/questions/13355486/…
但该问题的答案链接到fantastic up-to-date resource。
该页面似乎缺少导入和导出。但是，我已经链接到 MDN 兼容性图表，专门针对上述功能。简而言之：目前没有浏览器完全支持 ES6，而且显然没有浏览器支持导入/导出。
似乎还没有任何浏览器支持它。引自网站：“注意：此功能目前未在任何浏览器中原生实现。它在许多转译器中实现，例如 Traceur Compiler 和 ES6 Module Transpiler。” developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
实际的模块加载器不是 ES6 标准的一部分，目前还没有标准。如果浏览器无法加载模块（根据标准），那么支持模块的语法就没有多大意义。所以我想我们必须等到standard 完成。

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

【解决方案1】：

支持：

Safari 10.1
铬 61
Firefox 54 - 在 about:config 中的 dom.moduleScripts.enabled 设置后面。
边缘 16

【讨论】：

自 v60 起在 Firefox 中原生
任何参考资料？

【解决方案2】：

Chrome 和 Firefox 支持 import 和 export 语法（存在针对 proper parsing 的测试）。

不支持的是模块加载——你不能以任何方式加载模块，因为它的规范不完整。为此，您必须使用某种模块捆绑器。我不是前端开发人员，但我从同事那里听到了关于Rollup 的好意见。

【讨论】：

Webpack、SystemJS、AMD 等打包工具 :)
Rollup 是最好的（速度超快），最容易上手，并且需要零学习。只需运行命令即可。我已经使用它一年多了，在几个大小不等的项目中取得了巨大的成功。
@Ginden SystemJS 是模块加载器，而 webpack 是模块错误。我的理解正确吗？
@Ginden，Chrome 支持import 和export 语法是什么意思？我收到Unexpected token export
@Ginden 所以等等，它“支持”它但实际上不能在任何情况下使用它？这不是对“支持”一词的相当宽松的用法吗？

【解决方案3】：

正如其他人所说，对它的支持仍然非常有限。但即使有全力支持....使用它会很聪明吗？我们该怎么做？

考虑一下。使用 Node JS 模块编写的典型 JS 应用程序很容易包含数十个甚至数百个（非常小的）包。我们真的想要那么多请求吗？

Browserify、Webpack、Rollup 等非常受欢迎，因为它们允许我们将许多小包捆绑到一个快速下载中。使用code splitting，我们可以让模块捆绑器在编译时根据我们的页面实际使用的代码和一些配置设置来决定要创建多少包以及在每个包中放入什么。这样我们就可以编写许多 small 包并将它们作为（几个）大包提供。

我的观点是，我们应该将代码分成在概念层面上运行良好的包，然后将这些包打包成在技术（网络）层面上运行良好的包。如果我们根据最佳网络数据包大小编写代码，我们最终会牺牲过程中的模块化。

与此同时，使用它可能只会增加混乱。例如，查看 Edge 博客上的示例：

import { sum } from './math.js';

注意他们如何将扩展名.js 添加到from 字符串？在 Node JS 中我们通常这样写：

import { sum } from './math';

那么上面的代码也可以在 Edge 上运行吗？那么命名包呢？我担心在我们弄清楚如何使这些路径全面工作之前，我们会在这里看到很多不兼容的地方。

我敢猜测，对于大多数开发人员来说，System.import 在浏览器中大部分情况下仍然是不可见的，并且当它成为主流时，只有捆绑软件本身会开始使用它（出于效率目的）。

【讨论】：

请注意，HTTP v2 意味着与发出 1 个大请求相比，发出 1000 个小请求的开销很小。 Node js 还用于不受请求问题影响的服务器端应用程序和脚本、工具等（就语义而言，使用“import”与使用“require”基本相同）。
@TomW 如果你更详细地看它，你会发现其实 Node 太 has issues 当你使用太多的小包时。对于由数百个小包组成的大型系统，初始需求树可能会变得如此之大，以至于您会获得（许多）秒的启动延迟。事实上，有些人也推荐bundling for the server side（也适用于 HMR 等）。
@StijndeWitt，所有这数百个请求都可以缓存。甚至是 serviceworker-ed。
@Pacerier 无需侮辱。有一个原因是，在渐进式 Web 应用程序指南中，他们建议您将关键样式和 JS 代码内联在文档的头部。这些请求会损害您在现实世界中的互动时间。是的，这些请求可能会被缓存......然后他们可能不会。每个认真对待性能的人都在尽最大努力减少请求数量、往返次数和每个请求的有效负载大小。因为如果你不限制它，那就会扼杀性能。
需要第一层内联来停止加载时间为 200 毫秒的空白屏幕。 这仅适用于初始加载。由于存在多路复用，其他所有请求都不会在 HTTP 2.0 中内联。即使在 HTTP 1.0 中，如果它们是 service-workered，那么它们已经被认为是内联的。

【解决方案4】：

现在有一个 pollyfill 可以用来导入 ES6 模块。

我在 Chrome 上测试成功。

这里是链接：http://github.com/ModuleLoader/browser-es-module-loader

它也在 Edge 14 中原生实现：

https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond

【讨论】：

支持非常有限是有原因的......我会写一个答案

【解决方案5】：

据Google's Javascript Style Guide：

暂时不要使用 ES6 模块（即 export 和 import 关键字），因为它们的语义尚未最终确定。请注意，该政策将一旦语义完全标准，就会重新审视。

// Don't do this kind of thing yet:
//------ lib.js ------
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';

但是，import 和 export 在许多转译器中实现，例如 Traceur Compiler、Babel 或 Rollup。

【讨论】：