ES2015入门系列9-Babel和Rollup

May 23, 2016

通过前面章节的讲解，大家对ES2015的一些新语法有了初步的理解，之前我们的测试代码都可以直接放入 Chrome Console 中直接运行，为了更好的学习后面的面向对象和模块开发，我先用一章介绍一下 Babel 和 Rollup。

ES2015虽然够好用，奈何没有浏览器对其可以完全支持，本文书写时间，Chrome开发版号称已经支持99%的ES2015特性。

所以，我们需要借助一个可以帮助我们将ES6代码翻译为浏览器都100%支持的ES5代码的工具，这就是本文的主角之一：Babel。

打开Babel官网, 可以看到大大的介绍：

Babel is a JavaScript complier. Use next generation JavaScript today.

Babel是Javascript编译器，可以让我们现在就可以使用新的语法写JavaScript，而不用担心浏览器兼容的问题。

开始安装:

本系列假定读者都有NodeJS使用经验，如果还没有，赶紧去这里了解并安装吧。

我们可以使用

npm install --global babel-cli

这样全局安装Babel, 但是这并不是很好的做法，因为:

不同的项目可能需要依赖不同版本的Babel
不能绝对依赖某个版本的Babel，不够灵活

所以，最好的做法是为每一个项目安装Babel

创建项目目录并安装:

mkdir -p es2015-learning
cd es2015-learning

创建文件package.json, 里面放入以下内容：

{
  "name": "es2015-learning",
  "version": "1.0.0"
}

安装Babel:

npm install --save-dev babel-cli

安装完成后，我们的package.json文件会变成类似下面的：

{
  "name": "es2015-learning",
  "version": "1.0.0",
  "devDependencies": {
    "babel-cli": "^6.9.0"
  }
}

由于我们的babel安装在项目中，所以我们无法直接在命令行中执行 babel 命令，虽然可以用

./node_modules/.bin/babel

调用，但是为了方便，我们需要在 package.json 中定义命令使用，修改 package.json 如下：

{
  "name": "es2015-learning",
  "version": "1.0.0",
  "scripts": {
      "build": "babel src -d dist"
  },
  "devDependencies": {
    "babel-cli": "^6.9.0"
  }
}

这样，我们就可以使用

npm run build

直接调用Babel为我们在src中的js代码进行编译到dist文件夹中，而不用每次都

./node_modules/.bin/babel src -d dist

很简单，对吧？那赶紧试试看:

创建文件夹

mkdir src
mkdir dist

在 src 中创建文件 main.js, 编辑代码:

const PI = 3.1415926;
alert(PI);

执行命令:

$ npm run build
//输出
src/main.js -> dist/main.js

查看dist文件夹中的main.js文件，不出意外，babel 并没有为我们做任何的转变，因为：Babel 在 6.0以后不在默认启用代码转换，实际上Babel默认没有自带任何转换插件，这需要我们手动安装一下，这里需要安装ES2015 Preset插件

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

安装完成后，还需要告诉Babel启用该插件，创建**.babelrc**文件，并在其中加入如下内容，

{
  "presets": ["es2015"]
}

准备就绪，再次执行:

npm run build

完成后，可以看到现在的dist/main.js已经被转换为：

"use strict";

var PI = 3.1415926;
alert(PI);

这时候引用dist/main.js 到浏览器中，会一切运行正常。

到此，我们的Babel已经准备就绪^_^。

但是，让我们再看看下面的代码:

// src/Human.js
export default class Human{

}
// src/main.js
import  Human from './Human.js';

class Man extends Human{

}

let man = new Man();

执行

npm run build

查看 dist/main.js代码(部分):

'use strict';

var _Human2 = require('./Human.js');
...
...

这个时候如果我们在浏览器中引用main.js, 很遗憾是无法运行的，因此，我们还需要一个模块加载器 (module bundler), 模块加载器有很多，如:

但是今天我要介绍是另外一个: Rollup

the next-generation JavaScript module bundler

下一代JavaScript模块加载器，赶紧来认识认识吧!

安装:

npm install --save-dev rollup

创建 rollup.config.js 文件，内容加入:

module.exports = {
  entry: 'src/main.js',
  dest: 'dist/main.js'
}

尝试一下：

./node_modules/.bin/rollup -c

编译出来的dist/main.js代码如下：

'use strict';

class Human {

}

class Man extends Human {

}

let man = new Man();

很完美对不对? 但是，不支持ES2015的浏览器怎么办？不用怕，我们将 Babel 和 Rollup 结合起来。

安装rollup的babel插件:

npm install --save rollup-plugin-babel
npm install --save babel-preset-es2015-rollup

修改rollup.config.js为:

let babel = require('rollup-plugin-babel');

module.exports = {
  entry: 'src/main.js',
  plugins: [babel()],
  dest: 'dist/main.js'
}

修改.babelrc为:

{
  "presets": ["es2015-rollup"]
}

再次运行:

./node_modules/.bin/rollup -c

此时的dist/main.js代码就可以被支持ES5的浏览器使用了!

最后我们修改我们的packages.json的build命令为:

"build": "rollup -c"

后面只要运行:

npm run build

就可以享受Babel和Rollup带来的便利, 轻松使用ES2015语法编写JS代码啦!