建立你的前端開發環境(一) - Rollup

為了建構一個讓自己可以開心工作的js前端開發環境，嘗試了了Grunt，Gulp,一直到目前最多人的 Webpack

Webpack 真的很不錯，外掛資源也豐富，但是總覺得輸出封裝後的code有些多餘(甚至你不會想要看他)，其實有時候只是需要封裝一個小模組，可能一些小演算法，或許用了ES6語法，想輸出處理成乾乾淨淨的js。這時候可以考慮使用 Rollup.js , 比起 Webpack 它更小更快，還能刪除多餘的程式碼(沒有用到的模組，rollup不會把它封裝到你的js)，但是最大的重點就是，我實在不想為了寫個小東西就去建構一個肥大的webpack環境。

Rollup.js 官網

本教程將一步一步帶你利用rollup建構一個自己的 Web app 前端開發環境

js.jpg

安裝 yarn

如果你以熟悉npm的話，yarn你可以當成一樣的東西，只是我覺得大部分情況下yarn更快。

如果你想繼續使用熟悉的npm，並不會影響rollup的使用，請自行評估。

關於yarn安裝與使用，你可以參考這裡

建構你的第一個rollup專案

為了讓你可以很清楚下去，我們這裡先使用最單純的作法。

首先建構你的資料夾，命令列中並進入這個工作目錄

建構專案的 package.json (這裡跟 npn init 是一樣意思)

1
yarn init

安裝rollup

1
yarn add rollup --dev

這裡加上 –dev 參數，代表我只想在develop模式中安裝他。

讓他加在 package.json 的 devDependencies 標籤中。

專案中新增一個 rollup.config.js 檔案

1
2
3
4
5
export default {
    entry: 'app.js',
    dest: 'build.js',
    format: 'iife',
};

這是一個rollup設定檔，上述是指輸入編譯 app.js，輸出成 build.js，封裝方式採用 iife。

關於format有以下幾種選擇

  • amd - 輸出成AMD模塊規格(Asychronous Module Definition)，RequireJS可以用
  • cjs - CommonJS規格，適合Node，Browserify，Webpack 等
  • es - 這是預設值，不改變code
  • iife - 自動執行函示，最適合導入 html 中的 script 標籤，而且檔案最小
  • umd - 通用模式，amd cjs iife 都能用

在 package.json 中加上 rollup 執行命令

1
2
3
4
5
6
7
8
9
10
11
12
{
    "name": "demo",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "devDependencies": {
        "rollup": "^0.41.4"
    },
    "scripts": {
        "dev": "rollup -c"
    }
}

加上 scripts 標籤，這個標籤相當好用，可以巨集你的命令，往後只要命令列中下 yarn dev 就會執行 rollup -c 命令，rollup預設會去找 rollup.config.js 這個設定檔

封裝你的js

依照 rollup.config.js 中的設定，你可以建立一支app.js，執行以下

1
yarn dev

就會開始處理你的js，處理好了後會輸出成 build.js，你可以自己更改 format 設定看看輸出內容的差異。

以上是最基本的使用方法，當然為了讓自己有更愉快的開發環境，我們不會只作這樣的事，為了讓你清楚使用方式，後面們會再慢慢加上去。

壓縮你的js

例如你需要壓縮你的js,你可以加上以這個掛件

首先安裝

1
yarn add rollup-plugin-uglify --dev

在 rollup.config.js 中加上 uglify 掛件

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

之後再編譯一次，你會發覺輸出的 build.js 已經被壓縮處理過了。

為了開發上的方便，你可以在輸出的code上加上 sourceMap ，所以我加上了 sourceMap: ‘inline’ 設定，這樣子如果有資訊輸出或錯誤，可以明確告訴你位置在哪(行數那些..)，如果不需要可以拿掉他，終究對編譯速度還是有影響。

實際發布請把這個設定拿掉，inline 這個設定會把 sourceMap 加在js結尾，增加了js容量，這不是我們希望看到的結果。

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