我目前正在使用MEAN堆栈编写一个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
支持
- Safari 10.1-IOS 10.3
- 铬61
- Firefox 60
- 边缘16
Chrome和Firefox支持import
和export
语法(存在正确解析的测试)。
不支持的是模块加载——您无论如何都不能加载模块,因为它的规范还不完整。为此,您必须使用某种模块绑定器。我不是前端开发人员,但我从同事那里听到了关于Rollup的好意见。
正如其他人所说,对它的支持仍然非常有限。但即使得到了全力支持。。。。使用它明智吗?我们该怎么做?
想想看,用NodeJS模块编写的典型JS应用程序很容易包含几十个甚至数百个(非常小的)包。我们真的想要那么多请求吗?
Browserify、Webpack、Rollup等非常受欢迎,因为它们允许我们将许多小软件包捆绑到一个快速下载中。通过代码拆分,我们可以让模块捆绑器在转译时根据页面实际使用的代码和一些配置设置,决定创建多少捆绑包以及在每个捆绑包中放入什么。通过这种方式,我们可以编写许多小包,并将它们作为(几个)大捆绑包提供。
我的观点是,我们应该将代码划分为在概念级别上工作良好的包,然后将这些包捆绑为在技术(网络)级别上工作正常的包。如果我们根据最佳网络数据包大小编写代码,我们最终会在这个过程中牺牲模块性。
与此同时,使用它可能只会增加混乱。例如,看看Edge博客上的例子:
import { sum } from './math.js';
注意他们是如何将扩展名.js
添加到from
字符串中的?在Node JS中,我们通常将其写成:
import { sum } from './math';
那么,上面的代码是否也适用于Edge?那么命名包呢?我担心,在我们弄清楚如何让这些途径全面发挥作用之前,我们会看到很多不兼容的地方。
我大胆猜测,对于大多数开发人员来说,System.import
在浏览器中基本上是不可见的,当它成为主流时,只有捆绑软件本身才会开始使用它(出于效率目的)。
现在有一个pollyfill可以用来导入ES6模块。
我在Chrome上测试成功了。
以下是链接:http://github.com/ModuleLoader/browser-es-module-loader
它也在Edge14:中本地实现
https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond
根据谷歌的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
是在许多transfiler中实现的,例如Traceur编译器、Babel或Rollup。