Babel 简介
ES2015（即ES6）添加了很多特性与语法，目前浏览器对其支持程度并不理想，只有部分功能。所以，如果想使用新的ES2015功能，我们需要转码或编译。转码工具有很多，Babel、Traceur（Google）、还有这些。我们今天学习一下 Babel。
安装
npm install babel-cli -g // 全局安装
npm install babel-cli --save-dev // 本地安装
使用
1、如果是全局安装 babel-cli
babel xxx/xxx.js -o yyy/yyy.js // 编译某文件
babel xxx/xxx.js -w -o yyy/yyy.js // 监听文件修改，自动编译
babel xxx -d yyy // 编译某目录（每个文件独自生成相应文件，如果目录相同，则会覆盖原始文件）
babel xxx -o yyy/bundle.js // 编译某目录，并合并输出为一个文件
2、如果是本地安装 babel-cli
./node_modules/babel-cli/bin/babel.js app/user.js -o app/testUser.js
或者
./node_modules/.bin/babel app/user.js -o app/testUser.js
此时的输出只是源码，还未转化。如果需要转化，则要使用babel插件(或插件集)
插件（插件集）
1、插件安装
babel 插件可以轻松的让我们使用 ES2015 的语法，并对语法作了很细致的划分（箭头函数、Class等）。
但是，如果你觉得一个一个插件等引用很麻烦，也可以使用插件集，它把部分插件组合在一起（ES2015、React），让我们使用起来更简单。
插件集：
npm install babel-preset-es2015 --save-dev // ES2015转码
npm install babel-preset-stage-0 --save-dev // ES7阶段语法提案的转码
npm install babel-preset-stage-1 --save-dev // ES7阶段语法提案的转码
npm install babel-preset-stage-2 --save-dev // ES7阶段语法提案的转码
npm install babel-preset-stage-3 --save-dev // ES7阶段语法提案的转码
npm install babel-preset-react --save-dev // react转码
插件：
npm install babel-plugin-transform-es2015-classes // ES2015 class 语法插件
...
npm install babel-plugin-transform-react-jsx // react-jsx 插件
...
更多插件请查阅这里
2、插件使用
babel xxx/xxx.js -o yyy/yyy.js --presets "es2015" // 插件集ES2015
配置
如果每次输入命令时都带上一堆的选项，会让人觉得繁琐。我们可以通过配置文件，让我们轻松的使用很多功能。
项目根目录新建文件 .babelrc，内容如下。
// 你的项目/.babelrc
{
"presets": ["es2015"] // 插件集ES2015
}
是的，就是这样简单。
当我们再次使用命令转化时，会自动使用 .babelrc 中的设置来按需转化。
.babelrc 文件的其他选项：（详情请查看Options）
{
"presets": ["es2015"],
"only": 'yyy.js', // 只转化这些文件
"ignore": 'xxx.js' // 排除某些文件
}
示例项目
我们现在以一个web项目来做示例。是的，在浏览器环境中使用ES2015还是比较爽的。
1、初始化项目
我们要创建一个空文件夹作为你的项目目录，并创建 package.json 文件
mkdir /你的工作目录/babeldemo
cd /你的工作目录/babeldemo
npm init
2、安装 Babel 和插件
npm install babel-cli --save-dev
npm install babel-preset-es2015 --save-dev
3、项目结构
我们开发项目之前，对项目做一个简单规划。我们要有开发目录和发布目录，开发目录存放我们的ES2015源码，发布目录是我们的访问目录，可发布成web项目。所以，
创建 src 目录（源码目录），
创建 src/index.js (源码入口文件)，
创建 public 目录（发布目录，web 项目，源码编译后的文件），
创建 public/index.html 文件 （首页）。
所以，我们的项目结构如下：
|--babeldemo
|--node_modules
|--public
|--index.html
|--src
|--index.js
|--package.json
package.json 文件如下：
{
"name": "babeldemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.18.0", // babel 依赖
"babel-preset-es2015": "^6.18.0" // babel es2015插件集
}
}
4、开发
我们开始写源文件，创建一个 User 类来测试编辑。
babeldemo/src/index.js 文件，修改如下：
class User{
constructor(id, name, age){
this.id = id;
this.name = name;
this.age = age;
}
say(){
return `I am ${this.name}, ${this.age} old`;
}
}
5、配置Babel，创建.babelrc文件，内容如下：
{
"presets": ["es2015"]
}
6、运行编译，终端中项目根目录下执行：
babel src -o public/bundle.js
此时可以查看生成的文件 babeldemo/public/bundle.js如下：
"use strict";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var User = function () {
function User(id, name, age) {
_classCallCheck(this, User);
this.id = id;
this.name = name;
this.age = age;
}
_createClass(User, [{
key: "say",
value: function say() {
return "I am " + this.name + ", " + this.age + " old";
}
}]);
return User;
}();
7、使用生产的文件
babeldemo/public/index.html 文件，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Babel 示例</title>
</head>
<body>
</body>
<script type="text/javascript" src="bundle.js"></script>
<script type="text/javascript">
var bob = new User(1, "Bob", 17); // 使用 class
var msg = bob.say();
console.log(msg); // I am Bob, 17 old
</script>
</html>
此时，我们会在控制台看到：
