使用ECMAScript 6

Question

使用ECMAScript 6

google-chromegoogle-chrome-extensionuserscriptsecmascript-6

164

我想找一种方法在浏览器控制台中运行ECMAScript 6代码，但大多数浏览器都不支持我寻找的功能。例如，Firefox是唯一支持箭头函数的浏览器。

是否有一种方式（扩展程序、用户脚本等）可以在Chrome上运行这些特性？

- Spedwards

5个回答

47

Babel是一个很好的转译器，可以用来尝试ES6。你可以在他们网站的“试一下”部分在浏览器中运行ES6。它的功能类似于jsfiddle。

例如箭头函数：

let add = (x,y) => x + y;
let result = add(1,1);
console.log(result);

显示结果2。

Babel“transpiles”，即将ES6转换为ES5的JavaScript，可通过当前浏览器技术运行。您可以通过npm install -g babel安装Babel。安装后，可以将上面的箭头示例保存到文件中。假设我们将文件称为“ ES6.js”。假定已经安装了node，则在命令行中将输出管道传输到节点：

babel ES6.js | node

然后将看到输出2。您可以使用以下命令永久保存翻译文件：

babel ES6.js --out-file output.js

output.js“转译”：

"use strict";

var add = function (x, y) {
  return x + y;
};

var result = add(1, 2);

console.log(result);

当然，它可以在任何现代浏览器中运行。

使用类的示例

ES6是一个快速发展的目标。请参考兼容性表查找像Traceur和Babel这样的转译器和浏览器支持的功能。你甚至可以展开图表以查看用于验证兼容性的测试:

enter image description here

如果想在浏览器中尝试最新的ES6语法，可以尝试使用Firefox夜间版或Chrome发布渠道。

- P.Brian.Mackey

如果你还没听说过，那就去看看 jspm 吧。它可以让你使用 CommonJS、AMD 和 ES6 模块。它依赖于 Traceur 或 Babel，在执行前在浏览器中将 ES6 编译为 ES5。jspm 的一个好处是能够轻松消费 npm 模块或（稍加配置即可）来自 Github 的模块。未来可能会添加其他模块存储库。jspm 也支持浏览器得很好。虽然没有经过测试，但我相信它可以兼容 IE9+。（你的 ES6 编译器也会对此产生影响。） - Kevin Dice

在Ubuntu 17.04中，我需要执行sudo npm install -g --save-dev babel-cli babel-preset-es2015和$(npm bin)/babel ES6.js --presets es2015才能使其正常工作，参考链接：http://babeljs.io/docs/plugins/preset-es2015/。 - 林果皞

12

您可能正在寻找以下链接之一：

Babel (适用于Webpack, 适用于Gulp, 适用于Grunt, 适用于其他框架和语言)

在开发过程中使用Babel，可以自动将JavaScript转换为跨浏览器兼容的代码。或者，如果您正在使用TypeScript，则可以放心使用；您的代码已经被转译了。

你不想设置转译器（例如Babel / TypeScript），或者想使用尚未被转译器支持的功能吗？你可以通过访问chrome://flags/#enable-javascript-harmony并启用JavaScript Harmony标志在浏览器中启用实验性的ECMAScript功能。对于某些功能，您可能需要使用启用了JavaScript Harmony标志的Chrome Canary。

JS harmony screenshot

新的JavaScript API通常不被Babel覆盖，他们会有自己的Chrome标志。

使用箭头函数

这个问题特别提到了使用箭头函数。除了IE和Opera Mini，箭头函数现在已经在所有浏览器中原生支持。请参见caniuse。

如果您想使用箭头函数，以前可能有一些困难。下面的历史记录显示了在不同时间点玩弄此功能所需的内容。

1) 首先，在启用了chrome://flags/#enable-javascript-harmony标志的Chrome Canary中，箭头函数仅在其中起作用。看起来，至少在版本39中已经部分实现了此功能。

2) 然后，箭头函数可以在Google Chrome中通过JavaScript Harmony标志使用。

3) 最后，在Google Chrome 45中，默认启用了箭头函数。

您可以期望其他新的ECMAScript功能也会出现类似的模式。

- hostingutilities.com

TypeScript自带一个很棒的转译器。Babel也是常见的JavaScript转译器。如果你将es6代码转译为es5，就不必等待浏览器支持就可以开始使用es6的强大功能了！ - hostingutilities.com

6

只需使用“use strict”模式，进入一个闭包（不是必需的，但这是一个很好的方法），Chrome就能够将您的代码作为ES6执行...

(function(){
  'use strict';
  //your ES6 code...
})();

以下是一个示例... http://jsbin.com/tawubotama/edit?html,js,console,output，尝试删除 use strict 模式行，并再次尝试，控制台将记录错误信息。

- Miguel Lattuada

3

截至2015年11月，Firefox和Edge一直在领导ES6竞赛，如果您想要尝试Chrome缺少的功能，请使用它们。 Edge拥有class/subclass，而Firefox拥有Proxy；两者之间几乎涵盖了所有ES6特性。

如果您必须在Chrome控制台中使用ES6，则有一种简单而实用的方法：

耐心等待。

浏览器正在采用ES6 - 即使是一直对大多数HTML5标准表现不积极的Safari也是如此。给Google时间，他们将逐一实现ES6功能。例如，箭头函数现在可用于生产通道，并且无需标志。

不要期望扩展；你不能逐行将ES6翻译成ES5，因此我们无法仅使用Babel来扩展控制台。

的确有一个实验性js标志，但它存在很好的理由。 V8具有代理，但是使用旧的（非标准）语法，并且存在安全问题。它的解构也不完整：您会发现在某些情况下它可以工作，在其他情况下则不行。

如果您只想尝试ES6，请简单地使用Edge / Firefox进行尝试。它们都覆盖了几乎所有的Babel，具有控制台和调试器，并具有Babel无法提供的功能。

- Sheepy

2

Safari实际上领先于所有桌面浏览器，而iOS10移动版在ES6支持方面也领先于Android的Chrome。https://kangax.github.io/compat-table/es6/ - Louis Duran

@Louis 在iOS 10之前，Safari忽视了新兴的Web技术。即使现在，半年过去了，21%的旧iOS用户仍然被困在ES5上，因为旧版本的iOS无法仅升级浏览器，这仍是阻碍移动开发中ES6采用的唯一力量（98%的Android可以运行最新的Chrome）。我将保持此答案不变，因为问题和答案都已过时，但如果您稍微超越ES6，Safari 10仍然落后于缺少异步函数或获取API。 - Sheepy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob W · Accepted Answer

在 Chrome 浏览器中，大多数 ES6 特性都被隐藏在一个名为“实验性 JavaScript 特性”的标志后面。请访问 chrome://flags/#enable-javascript-harmony，启用此标志，重新启动 Chrome，然后您将获得许多新特性。

箭头函数目前尚未在 V8/Chrome 中实现, 因此此标志不会“解锁”箭头函数。

由于箭头函数是一种语法变化，因此不可能在不改变 JavaScript 解析方式的情况下支持该语法。如果您喜欢使用 ES6 进行开发，则可以编写 ES6 代码并使用 ES6 到 ES5 编译器生成与所有现有（现代）浏览器兼容的 JavaScript 代码。

例如，访问 https://github.com/google/traceur-compiler。截至目前为止，它支持 ES6的所有新语法特性。如果您结合本答案顶部提到的标志使用，就会非常接近所需结果。

如果您想直接从控制台运行ES6语法，则可以尝试覆盖控制台的JavaScript评估器（这样Traceur预处理器在执行代码之前运行）。如果您喜欢这样做，请查看此答案以了解如何修改开发人员工具的行为。