Babel 用于将 ES6 的代码转化为 ES5，使得 ES6 可以在目前的浏览器环境下使用。学习使用 babel 是为了使用 ES2015 做准备。本文将介绍如何使用 babel，以及一些相关的配置。
学习 Babel 可以通过其手册 Babel handbook。
其中包含多语言版本，分为用户手册和插件手册。这是一个很好的学习 Babel 的资料。
babel-cli
在 node 和 npm 环境安装好的前提下，安装 babel，如下：
npm install --global babel-cli
安装完成后就可以编译文件了。
babel main.js
编译后的文件显示在终端上，可以添加其他命令让它输出到指定文件下：
babel example.js --out-file compiled.js
或
babel example.js -o compiled.js
或将整个目录编译成一个新的目录：
babel src --out-dir lib
或
babel src -d lib
但这很麻烦，并且并不是一个很好的解决方案，请看下一节项目内运行 babel-cli。
在项目内运行 babel-cli
初始化项目
npm init
再安装 babel-cli
npm install --save-dev babel-cli
项目中的package.json应该包含如下内容：
{
"name": "learn-es6",
"version": "1.0.0",
"devDependencies": {
"babel-cli": "^6.10.1"
}
}
添加 npm scripts 命令。
{
"name": "learn-es6",
"version": "1.0.0",
+ "scripts": {
+ "build": "babel src -d lib"
+ },
"devDependencies": {
"babel-cli": "^6.10.1"
}
}
此时在终端里运行
npm run build
还不能成功编译，因为没有配置.babelrc文件。
配置.babelrc
通过配置.babelrc来告诉 babel 来做什么。
在项目的根路径下创建.babelrc文件。然后输入以下内容作为开始：
{
"presets": [],
"plugins": []
}
为了让 babel 将 ES2015 转化为 ES5，我们要安装如下：
npm install --save-dev babel-preset-es2015
安装完成后在.babelrc中添加参数：
{
"presets": [
+ "es2015"
],
"plugins": []
}
现在在项目src/main.js中写一些 ES2015 的代码试试吧。
let a = 1
在终端中输入命令
npm run build
执行后终端中显示：
> [email protected] build c:\gitWorkSpace\learn-es6
> babel src -d lib
然后可以看到目录中出现了lib/main.js
"use strict";
var a = 1;
即编译成功。
配置.jshintrc
若编辑器中安装了 jshint 语法检查的插件。默认对于 ES2015 的代码可能会报错或者警告，看着可能会不爽。我们可以在配置文件中将它设置为允许 ES2015 的模式。
在项目根目录下创建文件.jshintrc。内容如下：
{
"asi": true,
"esversion": 2015
}
上述文件我分别设置了，使用无分号模式，es 版本使用 2015。
关于.jshintrc的更详细配置可以参见官方示例：https://github.com/jshint/jshint/blob/master/examples/.jshintrc
好，babel 就说到这里，下面开始进入真正的 ES2015 的学习！