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使用經驗，若是尚未，趕忙去這裏瞭解並安裝吧。

咱們能夠使用

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), 模塊加載器有不少，如:

• webpack

• Browserify

可是今天我要介紹是另一個: 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代碼啦!