Answers:
在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预处理程序)。如果您愿意这样做,请查看此答案以了解如何修改开发人员工具的行为。
class
语法,例如。
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发布渠道
sudo npm install -g --save-dev babel-cli babel-preset-es2015
并$(npm bin)/babel ES6.js --presets es2015
使它工作,射频:babeljs.io/docs/plugins/preset-es2015
您可能正在寻找以下链接之一:
在开发管道中使用Babel将自动转换(转换)您的JavaScript以使其与跨浏览器兼容。或者,如果您使用的是TypeScript,则可以放轻松;您的代码已经被编译。
不想设置转译器(例如Babel / Typescript),还是要使用转译器尚不支持的功能?
通过转到chrome:// flags /#enable-javascript-harmony并启用JavaScript Harmony标志,可以在浏览器中启用实验性ECMAScript功能。对于某些功能,您可能必须使用启用了JavaScript Harmony标志的Chrome Canary。
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新功能也会发生类似的情况。
只需使用use strict模式,将其放到一个闭包中即可(不需要,但这是一个很好的方法),Chrome可以将您的代码作为ES6执行...
(function(){
'use strict';
//your ES6 code...
})();
下面是一个示例... http://jsbin.com/tawubotama/edit?html,js,console,output尝试删除use stric模式行,然后重试,将在控制台上记录错误。
截至2015年11月,Firefox和Edge一直引领着ES6竞赛,如果您想尝试Chrome缺乏的功能,请使用它们。Edge具有类/子类,而Firefox具有Proxy;它们之间实际上具有所有ES6功能。
如果您必须在Chrome控制台中使用ES6,则有一种简单,可行且真实的方法:
耐心一点。
浏览器正在采用ES6-甚至是Safari,后者一直在采用大多数HTML5标准。给Google时间,他们将一一实现ES6功能。例如,现在在生产通道中且没有标志的情况下,箭头功能可用。
不要期望扩展;您不能将ES6逐行转换为ES5,因此我们不能仅通过Babel 扩展控制台。
确实有一个实验js标志,但是它存在的理由很充分。V8具有Proxy,但采用旧的(非标准)语法,并且存在安全性问题。它的解构也不完整:您会发现它在某些情况下有效,在某些情况下则无效。
如果您只想玩ES6,只需玩Edge / Firefox。它们都涵盖了几乎整个Babel,具有控制台和调试器,并且具有Babel无法提供的功能。