使用ECMAScript 6


162

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

有没有办法(扩展名,用户脚本等)在Chrome上运行这些功能?

Answers:


158

在Chrome中,大多数ES6功能都隐藏在名为“实验JavaScript功能”的标记后面。访问并chrome://flags/#enable-javascript-harmony启用此标志,重新启动Chrome,您将获得许多新功能

V8 / Chrome中尚未实现箭头功能,因此此标志不会“解锁”箭头功能。

由于箭头功能是一种语法更改,因此在不更改JavaScript解析方式的情况下就不可能支持该语法。如果您喜欢在ES6中进行开发,则可以编写ES6代码,并使用ES6-to-ES5编译器来生成与所有现有(现代)浏览器兼容的JavaScript代码。

例如,请参阅https://github.com/google/traceur-compiler。在撰写本文时,它支持ES6的所有新语法功能。连同该答案顶部提到的标志,您将非常接近所需的结果。

如果要直接从控制台运行ES6语法,则可以尝试覆盖控制台的JavaScript评估程序(例如在执行代码之前运行Traceur预处理程序)。如果您愿意这样做,请查看此答案以了解如何修改开发人员工具的行为。


5
还有一个ScratchJS,Chrome浏览器的一个开发工具:chrome.google.com/webstore/detail/scratch-js/...
像素67

8
箭头功能现已在最新版本的chrome中完全实现。但是,该技巧对于其他ES6功能仍然有用。像class语法,例如。
亚当·布朗

7
现在,这个答案已经过时了。
米哈尔Perłakowski

@Gothdo具体细节确实已经过时了(如今,箭头功能得到了很好的支持),但是启用实验性JS功能的一般建议仍然是正确的。例如,默认情况下仍禁用正则表达式中的后向搜索。如果--enable-javascript-harmony设置了标志,则以下内容将返回false :(/(?<!a)b/.test('ab')如果未设置标志,则引发下一个错误:“未捕获的SyntaxError:无效的正则表达式:/(?<!a)b /:无效的组”)
Rob W

对于具有旧版本Windows的客户端,它并不落伍,在arrow_functions中也有同样的问题。旗帜起到了作用,谢谢!
Jaime Yule'2

47

Babel是试用ES6的出色编译器。您可以在其网站的“试用”部分的浏览器中运行ES6。它的功能类似于jsfiddle。

例如箭头:

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

显示结果 2

Babel“转换”,即将ES6转换为可以由当前浏览器技术运行的ES5 javascript。您可以通过安装Babel npm install -g babel。安装完成后,您可以将上面的箭头示例保存到文件中。假设我们将文件称为“ ES6.js”。假设您已安装节点,然后在命令行中将输出输出到节点:

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以及浏览器支持。您甚至可以展开图表以查看用于验证兼容性的测试:

在此处输入图片说明

要在浏览器中尝试一流的ES6,请尝试使用Firefox每晚构建版Chrome发布渠道


如果您尚未听说过,请签出jspm。它允许您使用CommonJS,AMD和ES6模块。它依靠Traceur或Babel在执行之前在浏览器中“编译” ES6至ES5。jspm的好处之一就是可以使用Github的npm模块或(通过一些配置)模块。将来可能会添加其他模块存储库。jspm还具有相当不错的浏览器支持。未经测试,但我相信它是IE9 +。(您的ES6编译器也会对此产生影响。)
Kevin Dice 2015年

在Ubuntu 17.04中,我需要做sudo npm install -g --save-dev babel-cli babel-preset-es2015$(npm bin)/babel ES6.js --presets es2015使它工作,射频:babeljs.io/docs/plugins/preset-es2015
Fruit Fruit

12

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

Babel用于WebpackGulpGrunt以及其他框架和语言

在开发管道中使用Babel将自动转换(转换)您的JavaScript以使其与跨浏览器兼容。或者,如果您使用的是TypeScript,则可以放轻松;您的代码已经被编译。




不想设置转译器(例如Babel / Typescript),还是要使用转译器尚不支持的功能?

通过转到chrome:// flags /#enable-javascript-harmony并启用JavaScript Harmony标志,可以在浏览器中启用实验性ECMAScript功能。对于某些功能,您可能必须使用启用了JavaScript Harmony标志的Chrome Canary

JS和声截图

Babel通常不涵盖新的JavaScript API,它们将具有自己的Chrome标志。


使用箭头功能

使用箭头功能专门提到了这个问题。现在,除IE和Opera Mini外,所有浏览器均原生支持箭头功能。见

如果您想使用箭头功能,过去会有些困难。以下历史记录显示了在不同时间使用此功能所花费的时间。

1)首先,箭头功能仅在启用了 标志的Chrome Canary中有效chrome://flags/#enable-javascript-harmony。看来此功能至少由版本39 实现的。

2)然后,箭头功能在 JavaScript Harmony标志后面的Google Chrome中可用。

3)最后,在Google Chrome 45中,默认情况下启用了箭头功能。

您可以期望其他ECMAScript新功能也会发生类似的情况。


TypeScript带有出色的编译器。Babel也是常见的JavaScript翻译器。如果将es6代码转换为es5,则无需等待浏览器支持即可开始使用es6的出色功能!
wp-overwatch.com's


3

截至2015年11月,FirefoxEdge一直引领着ES6竞赛,如果您想尝试Chrome缺乏的功能,请使用它们。Edge具有类/子类,而Firefox具有Proxy;它们之间实际上具有所有ES6功能

如果您必须在Chrome控制台中使用ES6,则有一种简单,可行且真实的方法:

耐心一点。

浏览器正在采用ES6-甚至是Safari,后者一直在采用大多数HTML5标准。给Google时间,他们将一一实现ES6功能。例如,现在在生产通道中且没有标志的情况下,箭头功能可用。

不要期望扩展;您不能将ES6逐行转换为ES5,因此我们不能仅通过Babel 扩展控制台。

确实有一个实验js标志,但是它存在的理由很充分。V8具有Proxy,但采用旧的(非标准)语法,并且存在安全性问题。它的解构也不完整:您会发现它在某些情况下有效,在某些情况下则无效。

如果您只想玩ES6,只需玩Edge / Firefox。它们都涵盖了几乎整个Babel,具有控制台和调试器,并且具有Babel无法提供的功能。


2
Safari实际上在所有桌面浏览器方面都领先,而ios10移动版在ES6支持方面领先于Android版Chrome。kangax.github.io/compat-table/es6
路易·杜兰

@Louis在iOS 10之前,Safari 忽略了新兴的网络技术。即使是现在,半年后,仍然有21%的iOS老用户受ES5困扰,因为旧的iOS无法仅升级浏览器,并且仍然是阻止移动开发人员放弃ES6的唯一力量(98%的Android可以运行最新的铬)。我将保持这个答案不变,因为Q和A都已过时,但是如果您看起来超过ES6,则Safari 10仍会由于缺少异步功能或获取api而落后。
羊皮的
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.