搭建ES6运行环境

当ES5还没有完全普及时，ES6就接踵而来了，2015年6月17日，ECMAScript 6发布正式版本，即ECMAScript 2015，我们也简称它为ES6或ES2015。在发布之后的将近一年内，很多小伙伴都踊跃的学习这门新的语言，之所以说是一门新的语言，是因为跟ES5相比，语法方面变化确实有点大，可以说新的JavaScript语法看上去有种脱胎换骨的感觉。博主也曾跃跃欲试，看了很多语法方面的教程，可是无奈浏览器还未完全支持ES6的规范，只看不练，有种眼高手低的感觉，相信朋友们也会有同样的心情，那么怎样可以愉快的写ES6代码，进而将学到的东西转化成实践呢，别担心，今天我们就来学习ES6构建方面的知识，并搭建一个简单的学习环境。
首先需要介绍一个ES6开发利器：Babel。
Babel是一个编译器，负责将源代码转换成指定的语法的目标代码，可以使之很好的在运行环境中执行我们的代码。下面我们就来详细介绍这个神器，利用它来编译我们的ES6代码。
Babel给我们提供了一个很方便的命令行工具：babel-cli，利用它我们可以在命令行中执行编译命令，我们只需使用npm来安装它即可：

npm install -g babel-cli

除此之外，我们还需要安装转码规则包，Babel支持很多语法的转码，比如我们想要将ES6转换成ES5，那么需要安装babel-preset-es2015包，如果我们想要编译React源码，就需要安装babel-preset-react，这里我们需要安装babel-preset-es2015。为此我们创建一个babel-test目录，在这个目录里我们创建两个目录，es6和js，分别用于放置ES6源代码和编译后的ES5目标代码，然后我们使用“npm init –yes”命令生成一个默认的package.json文件，babel-test目录结构如下图所示：

然后在当前目录执行下面这行命令安装ES6转码规则包：

npm install babel-preset-es2015 --save-dev

在es6目录中我们创建了一个test.es6文件用于写入ES6源代码，Babel编译源文件时没有过多的限制，所以我们也可以选择使用js或es作为文件后缀名。现在我们将下面这段ES6代码写入到test.es6中：

let name = 'Scott';
let greeting = `hello ${name}`;
console.log(greeting);

接下来我们就可以来运行babel的命令编译我们的ES6源代码了：

babel es6/test.es6 --out-file js/test.js --presets es2015

这行命令的含义是：编译es6下面的test.es6文件，输出文件为js下面的test.js，同时指定编译规则包为es2015。命令执行完成后，我们会在js目录中找到一个test.js文件，如图所示：

看以看到，上面的ES6语法已经被编译成ES5的语法了，这个文件就可以被加载到现有的运行环境执行了。另外，如