现在我该如何编写和测试ECMAScript 6代码？

Question

我想开始使用即将到来的ECMAScript 6（ES6）编写代码，以便开始熟悉新语法。

是否有一些网站资源或浏览器插件，可以让我在目前的ES6环境下进行代码编写和测试？

我听说使用Google Chrome Canary可能有所帮助。于是我下载了Canary，在Canary中启用了几个功能：

启用实验性JavaScript（Mac、Windows、Linux、Chrome OS、Android）

启用网页使用实验性JavaScript特性。
#enable-javascript-harmony启用

在测试了for循环中的let块级作用域之后

for (let i = 0; i < 10; i++) {
   console.log(i);
}

我遇到了一个语法错误:

SyntaxError: 意外的标识符

- Aaron

---

有Traceur，但它的bug多得要命。 - nullpotent

我听说在Chrome Canary中使用ES6需要使用严格模式。 - Bergi

@iccthedral 真的吗？我现在正在使用Traceur，并且非常成功。我不会将它归类为那种工具。ES6标准尚未得到批准，因此可能有一些事情还没有最终确定，而Traceur并不支持所有的ES6功能，但就它所支持的功能而言，我迄今为止的体验非常好。你遇到了什么问题？ - Brian Genisio

我刚刚看到了我一年前提出的这个问题。我会向任何需要转译器的人推荐Babel。 - Aaron

Answer 1

以下内容适用于Chrome 37（当前版本）并启用了实验性JavaScript标志：

(function () {
   "use strict"; 
   for (let i = 0; i < 10; i++) {
      console.log(i);
   }
})()

在非严格模式下，如果您不在严格模式下，则应看到SyntaxError：Illegal let declaration outside extended mode或SyntaxError：Unexpected identifier，或者如果未启用实验性JavaScript标志，则可能会看到SyntaxError：Unexpected strict mode reserved word。

您还可以使用Babel或启用--block-binding标志的Traceur编译您的代码。

有关更多信息，请参见kangax的ES6兼容性表。

- lyschoening

---

使用版本40.0.2179.0 canary (64位)时，我遇到了“SyntaxError: Unexpected identifier”的问题。然而，在包含"use strict"之后，循环运行了。我原以为"use strict"是针对ES5的。谢谢。 - Aaron

我之前对于错误信息的判断是错误的——它很可能实际上是一个旧的被废弃的错误信息，而你看到的是新的。我已经更新了答案以反映这一点。 - lyschoening

Answer 2

这里是一些将ES6转换为ES5的转译器列表：

https://github.com/sindresorhus/grunt-es6-transpiler

https://github.com/sindresorhus/broccoli-es6-transpiler

https://github.com/sindresorhus/gulp-es6-transpiler

https://github.com/termi/es6-transpiler

https://github.com/google/traceur-compiler

- user3995789

Answer 3

Babel有一个测试、转译和执行代码的工具。只需使用它进行测试，在web应用程序中，很可能会使用它来转译为生产代码！

http://babeljs.io/repl

- molavec