# 一、简介

ECMAScript 6 (ES6)，也称为 ECMAScript 2015，为开发人员带来了长期以来一直想要的新功能和特性。等待结束了，现在您可以开发所有这些功能。真正的好消息是，您还可以使用 transpiler 来定位甚至不支持 ES6 的浏览器。编译器将一种语言翻译成另一种语言，例如 C# 到 MSIL，而 transpiler 将一种语言的一个版本转换成另一种语言，例如 ES6 到 ES5。

为了遵循本书中的代码示例，您需要在您的开发机器上安装以下内容:

*   升华文本–我们将设置一个定制的构建命令，这样您就可以简单地使用默认的构建命令来传输和执行您的脚本。您可以从以下链接获得崇高文本:[http://www.sublimetext.com](http://www.sublimetext.com)。
*   NodeJS–请确保您的机器上安装了 Node.js。可以从以下链接获取 node . js:[https://nodejs.org](https://nodejs.org/)。
*   巴别塔——我们将使用巴别塔作为我们的运输工具。Babel 允许我们使用 ES6 语法编写代码，并将其转换为 ES5 语法。如果你去他们的网站，你可以看到你的代码被实时传输。可以从以下链接获取 BabelJS:[https://BabelJS . io](https://babeljs.io)。在巴别塔网站上，你也可以点击“试用”链接，测试这里展示的大部分代码。

使用您最喜欢的 transpiler 在浏览器中运行大多数代码示例是可能的，但是为了保持一致，我们将使用前面提到的依赖项。我们的目标是为您提供一个快速简单的工具，帮助您充分了解 ES6 中的新功能。

| ![](img/00003.gif) | 注:除非另有说明，我们将使用崇高的文本连同巴别塔和节点 |

以下是让您的机器为使用本书中的代码示例做好准备的步骤:

1.  在您的机器上安装最新版本的崇高文本。您可以使用您喜欢的任何编辑器，因为我们将提供一个示例命令，让您可以轻松地测试脚本。
2.  请确保您的计算机上安装了最新版本的 Node.js。在撰写本文时，我们正在使用 v4.2.4。
3.  将以下 Git 存储库下载并解压到您选择的文件夹中:[https://github.com/mattduffield/es6-succinctly.git](https://github.com/mattduffield/es6-succinctly.git)。
4.  打开一个命令外壳，从 Git 库中导航到包含文件 package.json 的目录，输入命令`npm install`。
5.  在崇高中，转到`Tools|Build System|New Build System`。

1.  您将看到一个新标签。保存该选项卡，并将其命名为“babel-node.sublime-build”。
2.  如果您使用的是苹果电脑或 Linux，您应该能够使用以下代码:

代码清单 1

```js
  {
       "cmd": ["babel-node",
  "$file"],
       "path": "/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin"
  }

```

5.  如果您使用的是 Windows，您应该能够使用以下内容:

代码清单 2

```js
  {
       "shell_cmd": "babel-node $file",
       "path": "$PATH"
  }

```

8.  对于任何一种环境，都可以使用命令`which node`和`which babel`来获取路径。我正在使用 Git Bash 在 Windows 上执行这些命令。
9.  接下来，你需要让崇高文本知道使用哪个构建系统。在崇高文本中，确保从菜单`Tools|Build System`中选择`babel-node`。这将执行我们创建的新构建脚本，并允许您传输文件和执行示例。

7.  你应该准备好使用威震来玩脚本。请注意，威震将尝试基于任何激活的选项卡进行构建。如果您正在处理配置文件，这可能是也可能不是您想要的。
8.  如果您创建了一个名为“test.js”的文件，那么您可以对此进行测试。

代码清单 3

```js
  let greeting = "hello world";
  console.log(greeting);

```

| ![](img/00003.gif) | 注意:您可能需要在文件 test.js 中放置一个“use strict”语句作为第一行，以便运行脚本。 |

12.  保存文件并构建。你应该在《崇高》中看到类似以下的东西:

![](img/00004.jpeg)

图 1:升华文本输出

如果您发现它没有识别`babel-node`命令，我建议全局安装以下内容，以便正确更新路径环境:

代码清单 4

```js
  npm
  install –g babel
  npm
  install –g babel-cli

```

如果您不想使用崇高文本作为您的编辑器和构建系统，您可以简单地使用任何文本编辑器(如记事本)，用. js 扩展名保存源代码，导航到包含脚本的目录，然后通过键入以下命令从命令行执行:

`> babel-node myscript.js`

测试 ES6 能力的另一个很好的工具是 ScratchJS。它是 Chrome 的一个扩展，甚至允许你选择使用哪个 transpiler。同样，您可以使用自己选择的工具，但是当我们到达模块时，我们希望从文件系统加载模块，这使得使用浏览器测试工具变得困难。

## 蒸发器

以下是受欢迎的 transpilers 的简短列表:

*   巴别塔——这是迄今为止 ES6 最受欢迎的 transpiler。它附带了一个 2015 年预设，您可以使用它来支持 2015 年规范的大部分内容。你可以在这里找到更多关于 Babel.js 的信息: [https://babeljs.io](https://babeljs.io) 。有一点需要注意的是，巴贝尔 6 是最近发布的，然而 REPL 在线还没有更新。
*   traceur–这是 ES6 的另一款流行 transpiler。它不像巴贝尔那样完全符合 ES6 的规范，但它仍然是一个很好的选择。你可以在这里找到更多关于特蕾西的信息:https://github.com/google/traceur-compiler。
*   TypeScript–这可能是微软栈开发人员最受欢迎的 transpiler。TypeScript 严格来说并不是 ES6，因为它在混合中添加了类型和接口。就 ES6 合规性而言，它落后于 Babel 和 Traceur。然而，它是一个很棒的工具，如果你喜欢得到强类型的编译时异常，这就是适合你的工具。你可以在这里找到更多关于打字稿的信息:http://www.typescriptlang.org/。

桌面浏览器支持进展得相当不错。你会惊讶地发现，微软 Edge 在标准合规性方面走在了火狐的后面。Chrome 紧随其后，但仍有一些路要走。

在撰写本书时，建议使用巴别塔这样的“transpiler”。

本书中的所有代码列表都是使用崇高文本 3 生成的。大多数代码示例和截图都是使用 Chrome 中的 Scratch JS 创建的。Scratch JS 是 Chrome 的扩展；它允许你选择你想要使用的 transpiler。对于本书的其余部分，除了特别指出的地方，我们将使用巴别塔作为传输器。Scratch JS 还允许您通过单击切换输出将 ES6 代码的输出切换到 ES5 代码。如果您想知道经典的 ES5 代码中的代码语法是什么样的，这可能是有益的。由于 ES6 仍在开发中，您可能会遇到一些小问题，无法让一些示例正常工作，尤其是如果您从命令行调用 babel-node。如果发生这种情况，你可以去巴别塔网站，将 ES6 代码粘贴到他们的交互式 transpiler 页面中。这将生成 ES5 代码。您可以获取这个输出，将其保存为. js 文件，并使用 node 运行它。这种方法通常可以解决大多数问题。最后，您还可以通过单击运行从 Scratch JS 选项卡执行您的 ES6 代码。