ES6 才刚被标准化，人们就在开始谈论 ES7 将提供哪些闪亮的新特性了。作为 Web 开发人员，我们更想知道如何使用这些新特性。在之前的文章中，作者鼓励我们在一些工具的帮助下开始使用 ES6：

如果你想使用这些新语法，你可以使用 Babel 或 Google 的 Traceur 将 ES6 代码转换为友好的 ES5 代码。

本文的主题就是这些工具的使用，上面这些工具被统称为 transpiler，transpiler 也被称为源码到源码的编译器，用于在抽象级别进行编程语言之间的相互转换。使用 transpiler 可以让我们用 ES6 语法来编写代码，同时保证这些代码能在所有浏览器上运行。

Transpiler

使用 transpiler 非常简单，只需要下面两步：

1.用 ES6 语法编写代码：

2.将上面代码作为 transpiler 的输入，经 transpiler 处理后将得到下面的代码：

得到的代码是老式的 JavaScript 语法，可以在任何浏览器中运行。

transpiler 的内部工作原理相当复杂，超出了本文的讨论范围。这里我们仅仅将 transpiler 作为一个黑盒来处理我们的代码，正如你会开车，但并不需要知道发动机的工作原理一样。

Babel 实践

使用 Babel 有几种不同的方式。Babel 提供了一个命令行工具，你可以在终端中使用：

还有一个浏览器端库。首先，将 Babel 嵌入到页面中，然后将你的 ES6 代码放在 type 属性值为 text/babel 的 script 标签中：

上面两种方式实用性不强，当代码变得庞大，我们就会开始将代码分割到不同文件或文件夹中。这时，我们就需要一个构建工具，并将 Babel 集成到我们的构建流程中。

下面我们将把 Babel 集成到一个构建工具中 – Broccoli.js，并通过几个例子来演示 ES6 代码的编写和执行。示例的完整代码放在这里，一共包含三个示例：

• es6-fruits
• es6-website
• es6-modules

每个例子都是建立在前个例子的基础上，我们可以先从最简单的例子入手，然后进阶到一个通用的解决方案，最终可以作为一个庞大项目的起点。本文将详细讨论前面两个例子，之后你将能自行阅读和理解第三个例子中的代码。

如果你还在犹豫，那就等到浏览器兼容这些新特性吧，这样你也会被甩在时代的后面。浏览器完全兼容这些新特性需要很长的时间，而且每年都将发布一些新的 ECMAScript 标准，我们将看到新标准将比浏览器厂商的发布更加频繁。所以，别犹豫了，让我们开始使用这些新特性吧。

小试牛刀

Broccoli 是一个快速构建工具，不仅可以用来混淆和压缩文件，借助 Broccoli 插件还可以做很多构建相关的工作，为我们节省了在处理文件、目录和执行命令上的时间。

准备工作

首先，我们需要安装 Node 0.11 或更新的版本。

如果你使用的是 unix 系统，那么请避免使用 package manager (apt, yum) 来安装，这可以避免在安装过程中使用 root 权限。最好只为当前用户使用链接中提供的二进制文件安装。在 这篇文章中介绍了为什么不推荐使用 root 权限，同时文章中还提供了一些其他安装方式。

项目初始化

使用下面命令初始化我们的项目：

安装 broccoli 和 broccoli-cli：

编写 ES6 代码

创建一个 src 目录，在目录中创建一个 fruits.js 文件：

在我们创建的文件中，使用 ES6 语法编写一小段代码：

上面代码中使用了 ES6 的三个新特性：

1. 用 let 声明局部变量
2. for-of 循环
3. template strings

保存文件，然后尝试执行一下：

我们看到执行报错了，但我们的目标是使这段代码可以在 Node 和任何浏览器上都能被执行：

Transpilation

接下来我们将使用 Broccoli 来加载代码，并通过 Babel 处理，修改 Brocfile.js 文件如下：

broccoli-babel-transpiler 这个包是 Broccoli 的一个插件，使用前需要安装：

构建并执行：

执行结果如下：

有木有很简单啊！打开 dist/fruits.js 文件来看看编译后的代码，我们将发现通过 Babel 生成的代码可读性是非常强的。

在 Web 开发中的使用

接下来我们来看一个稍复杂的例子。首先，退出 es6-fruits 目录；然后，按照之前的步骤创建es6-website 目录。

在 src 目录下创建下面三个文件：

src/index.html