共计 3406 个字符，预计需要花费 9 分钟才能阅读完成。
古语有云：“君子生非异也，善假于物；工欲善其事，必先利其器。”
由于有些低版本的浏览器还是不支持 ES6 语法，学习 ES6，首先要学会搭建一个基本的 ES6 开发环境，利用工具，把 ES6 的语法转变成 ES5 的语法。
1、使用 Babel 把 ES6 编译成 ES5
1.1 建立工程目录
先建立一个项目的工程目录，并在目录下边建立两个文件夹：dist 和 src
1.2 初始化项目
在安装 Babel 之前，需使用 npm init 先初始化我们的项目。通过 cmd 打开命令行工具，进入项目目录，输入下边的命令：
npm init -y
命令执行完成后，会在项目根目录下生产 package.json 文件。
1.3 全局安装 Babel-cli
npm install -g babel-cli
1.4 本地安装转码规则
npm install –save-dev babel-preset-es2015 babel-cli
安装完成后，我们可以看一下我们的 package.json 文件，已经多了 devDependencies 选项。
1.5 新建.babelrc
在根目录下新建.babelrc 文件，.babelrc 是 Babel 的配置文件。
该文件是用来设置转码规则和插件的，基本格式如下：
{
“presets”:[“es2015”],
“plugins”:[]
}
1.6 babel 基本用法
# 转码结果输出到标准输出
$ babel example.js
# 转码结果写入一个文件 (–out-file 或 -o 参数指定输出文件)
$ babel example.js –out-file compiled.js
或者
$ babel example.js -o compiled.js
# 整个目录转码 (–out-dir 或 -d 参数指定输出目录)
$ babel src –out-dir lib
或者
$ babel src -d lib
# -s 参数生成 source map 文件
$ babel src -d lib -s
在 src 目录下，新建 index.js 文件，使用 ES6 中的 let 声明和字符串模板
let name = ‘Bread and Dream’;
let greeting = `hello ${name}`;
在命令行输入
babel src/index.js -o dist/index.js
这时 dist 目录会生成 index.js 文件，输出结果为：
‘use strict’;
var name = ‘Bread and Dream’;
var greeting = ‘hello ‘ + name;
项目文件最终结构
1.7 简化转化命令：
使用 babel 命令行，一大长串，很容易忘记，所以，我们可以进行改造，打开 package.json 文件，添加以下代码
{
“scripts”: {
“build”: “babel src/index.js -o dist/index.js”
},
}
修改好后，以后我们就可以在命令行输入 npm run build 进行转换了。
（注：build 是自定义的，为了语义化命名为 build，当然也可以命名成其他的，例如 compile）
2、webpack + Babel 构建 ES6 开发平台
2.1 搭建 webpack 基本文件目录
首先全局安装 webpack（这里使用 webpack@3.12.0 版本）npm install -g webpack@3
新建一个文件夹，命名为 webpack_demo；
命令行切换到 webpack_demo 的文件目录下，执行下面的命令，生成默认 package.json 配置文件 npm init -y
利用 npm 安装 webpacknpm i –save-dev webpack@3
新建 webpack.config.js（用于配置 webpack 的运行方式），最简单的配置如下：
module.exports= {
/* webpack 入口起点 */
entry:’./index.js’,
/* webpack 输出 */
output:{
// 输出 文件名
filename:’./test.js’
},
}
2.2 安装 babel 相关
安装 babel-core 包 npm i –save-dev babel-core
安装 babel-preset-env 和 babel-preset-stage-0 包 npm i –save-dev babel-preset-env babel-preset-stage-0 babel-preset-env 是一个主流的 Babel 插件数组；Stage-X 是实验阶段的 Presets
2.3 将 webpack 和 Babel 结合在一起
需要在两者之间建立一条纽带，而通过 webpack 的 loaders 就可以生成这条纽带，因此要修改 webpack.config.js 配置文件：
/ webpack loaders 配置 / module:{
rules:[
{
test:/\.js$/,
use:{
loader:’babel-loader’,
},
}
],
},
就是针对以 .js 结尾的文件使用 babel-loader。由于项目中还不存在 babel-loader，所以要先安装该模块：
npm i –save-dev babel-loader
通过使用 loader 语法配置 Babel 的 presets
使用 webpack 提供的方法，具体在 webpack.config.js 的 module.rules.use.options 中配置
/* webpack loaders 配置 */
module:{
rules:[
{
test:/\.js$/,
use:{
loader:’babel-loader’,
options:{
presets:[
‘babel-preset-env’,
‘babel-preset-stage-0’
]
}
},
}
],
},
最终的项目结构为：
在当前目录下执行 webpack 命令
webpack
输入文件 index.js 中的 ES6 代码已经被转换成输出文件 test.js 中的 ES5 代码了：
3、Traceur 转码器
Google 公司的 Traceur 转码器，也可以将 ES6 代码转为 ES5 代码。
3.1 直接在页面中使用：
<!– 加载 Traceur 编译器 –>
<script src=”http://google.github.io/traceur-compiler/bin/traceur.js” type=”text/javascript”></script>
<!– 打开实验选项，否则有些特性可能编译不成功 –>
<script>
traceur.options.experimental = true;
</script>
写 ES6 代码，用：
<script type=”module”>
// ES6 代码
</script>
注意：script 标签的 type 属性的值是 module，而不是 text/javascript。这是 Traceur 编译器识别 ES6 代码的标识。
3.2 Traceur 的命令行转换方法：
首先需要用 npm 安装。
$ npm install -g traceur
直接运行 ES6 代码，以 index.js 为例
$ traceur index.js
将 ES6 输出为 ES5 脚本
$ traceur –script index.js –out es5.js
为了防止有些特性编译不成功，最好加上–experimental 选项。
$ traceur –script index.js –out es5.js –experimental
4、直接在线编译
Babel 提供一个 REPL 在线编译器，可以在线将 ES6 代码转为 ES5 代码。
转换后的代码，可以直接作为 ES5 代码插入网页运行。
5、总结
使用 babel 搭建环境的顺序：
创建项目创建两个文件夹 src 和 dist
使用 npm init 初始化项目生成 package.json（项目信息文件）
使用 npm install -g babel-cli 全局安装
使用 npm install –save-dev babel-preset-es2015 babel-cli 本地安装
创建.babelrc 文件（babel 转换的配置文件）
在 src 下创建 js，编写 ES6 语法
babel src/index.js -o dist/index.js 转码生成 ES5 语法
babel 本质就是一个 JavaScript 编译器，通过：
将 JavaScript 源代码解析成抽象语法树（AST）；
将源代码的 AST 结果一系列转换生成目标代码的 AST；
将目标代码的 AST 转换成 JavaScript 代码。
当然，感兴趣的小伙伴可以深入研究下 babel 及其插件的源码，了解其运行机制，以便更全面的掌握 ES6 转 ES5 的相关原理、机制。