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

Question

我目前正在使用 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

Answer 1

它支持：

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

Answer 2

Chrome 和 Firefox 支持import和export语法（存在正确解析的测试）。

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

Answer 3

正如其他人所说，对它的支持仍然非常有限。 但即使有充分的支持......使用它是否明智？ 我们怎么做？

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

Browserify、Webpack、Rollup 等如此受欢迎，因为它们允许我们将许多小包捆绑到一个快速下载中。 通过代码拆分，我们可以让模块打包器在转换时根据我们的页面实际使用的代码和一些配置设置来决定要创建多少包以及在每个包中放入什么。 这样，我们就可以写了许多小包裹，并将其作为一个（几个）大捆。

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

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

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

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

import { sum } from './math';

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

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

Answer 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

Answer 5

根据谷歌的 Javascript 风格指南：

不要使用 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。