建立你的前端開發環境(二) - ES6開發環境

上一篇 建立你的前端開發環境(一)，你已經可以把一個基本的js壓縮打包起來，這個單元我們準備開始建構開發ES6環境。

就上一篇的例子，如果你用ES6語法寫一個簡單的Class宣告。

app.js

1
2
3
4
5
6
7
8
9
10
11
12
class MyCalss {
    constructor(myName) {
        this.myName = myName;
    }
    logMyName() {
        console.info(this.myName);
    }
}
let myClass = new MyCalss('Cain');
myClass.logMyName();

我們透過 yarn dev 編譯成 build.js 結果如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(function () {
'use strict';
class MyCalss {
    constructor(myName) {
        this.myName = myName;
    }
    logMyName() {
        console.info(this.myName);
    }
}
let myClass = new MyCalss('Cain');
myClass.logMyName();
}());

你會發覺，code 幾乎沒有被處理，僅被一個立即執行的函示打包起來，這不是我們期望的結果，接下來，我們繼續建構，目標是可以把ES6輸出成ES5的code，讓大部分的瀏覽器可以正常執行。

建立ES6開發環境

把ES6輸出成ES5需要兩個掛件，首先安裝以下

1
2
yarn add rollup-plugin-babel --dev
yarn add babel-preset-es2015-rollup --dev

我們利用 rollup 讓他透過 babel 把 es6 的 code 編譯成為 es5

接下來我們建立個 babel 的設定檔
.babel

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

把 babel 掛件增加到你的 rollup.config.js

1
2
3
4
5
6
7
8
9
10
11
12
import uglify from 'rollup-plugin-uglify';
import babel from 'rollup-plugin-babel';
export default {
    entry: 'app.js',
    dest: 'build.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
        babel(), //增加 babel 掛件
        uglify(),
    ]
};

之後再次編譯，yarn dev，編譯結果如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
(function () {
'use strict';
var classCallCheck = function (instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
};
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;
  };
}();
var MyCalss = function () {
    function MyCalss(myName) {
        classCallCheck(this, MyCalss);
        this.myName = myName;
    }
    createClass(MyCalss, [{
        key: 'logMyName',
        value: function logMyName() {
            console.info(this.myName);
        }
    }]);
    return MyCalss;
}();
var myClass = new MyCalss('Cain');
myClass.logMyName();
}());

太棒了! 透過 babel 後，原本的 es6 編譯成為 es5，且format iife模式讓你直接js把掛在script標籤上，瀏覽器可以正常的執行它。

如果如果你仔細看過 webpack 與 rollup 編譯的結果後，你會發覺 rollup 真的乾淨非常多，產出的js檔案也相對小，重點是佈建整個開發環境速度也相當快速，這也是我目前選用 rollup 的主因

建立你的前端開發環境(三) - 使用 npm 的第三方模塊