ES6 环境配置

1. 前言

前面我们对 ES6 进行了介绍，本章来介绍一下配置 ES6 的执行环境，用于学习 ES6。

现在市面上的大部分浏览器基本上都已经支持 ES6 的绝大部分语法，但是有些语法需要进行转译，或者在特定的环境中才能运行。其中 Chrome 和 Firefox 浏览器对 ES6 新特性最友好，IE7~11 基本不支持 ES6。

2. 运行环境

2.1 浏览器环境

我们最终写的代码都是在浏览器环境运行的，所以本教材的 ES6 代码大部分都可以在高级浏览器的控制台中直接进行测试。本教程使用的浏览器是 Chrome 浏览器。首先我们需要到官网下载并安装 Chrome 浏览器，也可以直接使用百度下载。安装完后打开浏览器，进入浏览器的控制台，在控制台中就可以学习 ES6 语法了。具体可以看如下视频的操作步骤：

2.2 VS Code 中运行

VS Code 是微软推出的一款很强大的编辑器，它提供了丰富的插件系统，通过使用这些插件，我们就可以很轻松地运行我们的 ES6 代码。要在 VS Code 中运行 ES6 代码，需要添加以下几内容：

• 安装 NodeJS；
• 安装 VS Code 编辑器；
• 安装 Code Runner 插件。

首先我们可以在 官网 下载最新的 Node 安装包，安装 NodeJS 会附带 npm 包管理器。Mac 用户也可以使用 Homebrew 这个工具进行安装，执行命令：

brew install node

安装完 NodeJS 后需要下载 VS Code 编辑器，可以在 VS Code 官网 下载，下载完直接安装。安装完成后我们需要在 VS Code 的插件市场中搜索 Code Runner，这是一个可以运行选中代码的 VS Code 插件神器，更加方便地查看 ES6 代码运行出来的结果，这个插件可以让我们更加细致地关注代码片段的运行情况。具体操作步骤我们可以看如下视频的演示：

2.3 Babel

babel 是现在市面上使用得最多的一个 JavaScript 编译器，它可以把 ES6 语法编译成 ES5 语法，这样就可以让 ES6 代码在不支持 ES6 语法的低版本浏览器中运行了。

babel 的官网是一个国外网站，我们可以访问 国内的站点 基本内容是一致的，网站还进行了翻译，更适合国内同学使用。在试一试中我们可以看到 ES6 语法转化为 ES5 后是什么样的，更加明了地展示语法的编译过程。

3. 小结

本节学习了搭建 ES6 的两个运行环境，当然还可以使用 Webpack 进行搭建，后面在学习模块化和实战时会使用到，这里我们就使用最简单的两种方式来运行我们的 ES6 代码。本教程的所有代码实例都是基于浏览器和 VS Code 两个环境下实现的。而且这两个环境配置简单上手快，让我们更加关注 ES6 语法本身。