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
Chrome 61
Firefox 54 - 位于about：config中的dom.moduleScripts.enabled设置后面。
Edge 16

Answer 2

Chrome和Firefox支持<paper-toggle-button checked="{{showChart}}"></paper-toggle-button> <div id="chart" hidden$="[[!showChart]]">...</div>和import语法（存在proper parsing的测试）。

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

Answer 3

现在可以使用 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 4

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

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

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

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

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

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

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

import { sum } from './math';

上面的代码也适用于Edge吗？那命名包呢？在我们弄清楚如何让这些路径全面运作之前，我担心我们会发现很多不兼容的事情。

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

Answer 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编译器，Babel或Rollup。

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

5 个答案: