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>

此时，我们会在控制台看到：

Paste_Image.png