ES2015入门系列9-Babel和Rollup

通过前面章节的讲解,大家对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使用经验,如果还没有,赶紧去这里了解并安装吧。

我们可以使用

1
npm install --global babel-cli

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

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

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

创建项目目录并安装:

1
2
mkdir -p es2015-learning
cd es2015-learning

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

1
2
3
4
{
"name": "es2015-learning",
"version": "1.0.0"
}

安装Babel:

1
npm install --save-dev babel-cli

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

1
2
3
4
5
6
7
{
"name": "es2015-learning",
"version": "1.0.0",
"devDependencies": {
"babel-cli": "^6.9.0"
}
}

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

1
./node_modules/.bin/babel

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

1
2
3
4
5
6
7
8
9
10
{
"name": "es2015-learning",
"version": "1.0.0",
"scripts": {
"build": "babel src -d dist"
},
"devDependencies": {
"babel-cli": "^6.9.0"
}
}

这样,我们就可以使用

1
npm run build

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

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

很简单,对吧?那赶紧试试看:

创建文件夹

1
2
mkdir src
mkdir dist

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

1
2
const PI = 3.1415926;
alert(PI);

执行命令:

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

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

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

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

1
2
3
{
"presets": ["es2015"]
}

准备就绪,再次执行:

1
npm run build

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

1
2
3
4
"use strict";
var PI = 3.1415926;
alert(PI);

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
// src/Human.js
export default class Human{
}
// src/main.js
import Human from './Human.js';
class Man extends Human{
}
let man = new Man();

执行

1
npm run build

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

1
2
3
4
5
'use strict';
var _Human2 = require('./Human.js');
...
...

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

the next-generation JavaScript module bundler

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

安装:

1
npm install --save-dev rollup

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

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

尝试一下:

1
./node_modules/.bin/rollup -c

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

1
2
3
4
5
6
7
8
9
10
11
'use strict';
class Human {
}
class Man extends Human {
}
let man = new Man();

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

安装rollup的babel插件:

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

修改rollup.config.js为:

1
2
3
4
5
6
7
let babel = require('rollup-plugin-babel');
module.exports = {
entry: 'src/main.js',
plugins: [babel()],
dest: 'dist/main.js'
}

修改.babelrc为:

1
2
3
{
"presets": ["es2015-rollup"]
}

再次运行:

1
./node_modules/.bin/rollup -c

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

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

1
"build": "rollup -c"

后面只要运行:

1
npm run build

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

本文使用「CC BY 4.0」创作共享协议,只要在使用时署名,您可以对本文进行转载、节选、混编、二次创作,并允许商业性使用。
本文为作者原创,如果您认为本文对您有帮助,欢迎打赏作者