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

IT技术 javascript ecmascript-6 es6-module-loader browser-support es6-modules
2021-01-16 15:40:42

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

5个回答

它支持:

  • Safari 10.1
  • 铬 61
  • Firefox 54 – 位于 about:config 中的 dom.moduleScripts.enabled 设置后面。
  • 边缘 16
任何参考?
2021-03-15 15:40:42
现在自 v60 起在 Firefox 中
2021-04-02 15:40:42

Chrome 和 Firefox 支持importexport语法(存在正确 解析的测试)。

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

@Ginden SystemJS 是module加载器,而 webpack 是module错误......我的理解是否正确?
2021-03-16 15:40:42
@Ginden,Chrome 支持importexport语法是什么意思我越来越Unexpected token export
2021-03-16 15:40:42
Rollup 是最好的(它超级快)并且最容易开始,并且需要零学习。只需运行命令,它就可以工作。我已经使用它一年多了,并在多个规模不等的项目中取得了巨大成功。
2021-03-23 15:40:42
Webpack、SystemJS、AMD,仅举几例捆绑器 :)
2021-03-26 15:40:42
@Ginden 所以等等,它“支持”它但实际上不能在任何上下文中使用它?这不是“支持”一词的相当松散的用法吗?
2021-04-12 15:40:42

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

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

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

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

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

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

请注意他们如何将扩展名添加.jsfrom字符串中?在 Node JS 中,我们通常这样写:

import { sum } from './math';

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

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

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

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

我在 Chrome 上测试成功。

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


它也在Edge 14 中本地实现

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

虽然支持非常有限是有原因的......我会写一个答案
2021-03-13 15:40:42

根据谷歌的 Javascript 风格指南

不要使用 ES6 module(即exportimport关键字),因为它们的语义尚未最终确定。请注意,一旦语义完全标准,将重新考虑此策略。

// 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';

然而,importexport在许多转译器中实现,例如 Traceur Compiler、Babel 或 Rollup。