打包工具 rollup.js 入門教程

rollup.js 是一個 JavaScript 打包工具。本文介紹它的基本用法。

一、簡介

打包工具的作用是，將多個 JavaScript 腳本合併成一個腳本，供瀏覽器使用。

瀏覽器需要腳本打包，主要原因有三個。

（1）早期的瀏覽器不支持模塊，大型網頁項目只能先合併成單一腳本再執行。

（2）Node.js 的模塊機制與瀏覽器不兼容，必須通過打包工具進行兼容處理。

（3）瀏覽器加載一個大腳本，要比加載多個小腳本，性能更好。

目前，最常用的打包工具是 Webpack。它的功能強大，但是難學難用，一直被人詬病。

rollup.js 的開發本意，是打造一款簡單易用的 ES 模塊打包工具，不必配置，直接使用。這一點，它確實做到了。

後來經過不斷發展，它也可以打包 CommonJS 模塊。但是，這時需要經過複雜配置，實際上並沒有比 Webpack 簡單多少。

因此建議，只把 rollup.js 用於打包 ES 模塊，這樣才能充分發揮它的優勢。下面你會看到，那是多麼簡單的一件事。

如果你的項目使用 CommonJS 模塊，不推薦使用 rollup.js，優勢不大。

如果你還不瞭解 ES 模塊與 CommonJS 模塊之間的差異，詳見 ES6 教程。

二、安裝

本文采用全局安裝 rollup.js。


$ npm install --global rollup

但是，你也可以不安裝直接使用，就是把下面所有命令中的rollup，替換成npx rollup（參見《npx 使用教程》）。

第一次使用，可以運行下面的命令，查看一下幫助。


$ rollup --help
# 或者
$ npx rollup --help

三、示例

下面，就用 rollup.js 打包兩個簡單的腳本：庫文件 add.js 和入口腳本 main.js。


// add.js
const PI = 3.14;
const E = 2.718;

export function addPi(x) {
  return x + PI;
}

export function addE(x) {
  return x + E; 
}

上面代碼中，模塊 add.js 輸出了兩個工具函數addPi()和addE()。


// main.js
import { addPi } from './add.js';

console.log(addPi(10));

上面代碼中，入口腳本 main.js 加載了 add.js 裡面的工具函數addPi()。

接著，就用 rollup.js 打包。


$ rollup main.js

打包時只需給出入口腳本 main.js，rollup 會自動把依賴項打包進去。

打包結果默認輸出到屏幕。


const PI = 3.14;

function addPi(x) {
  return x + PI;
}

console.log(addPi(10));

可以看到，import和export語句都沒了，被換成了原始代碼。

另外，函數addE()沒有打包進去，因為沒有用到它。這種特性叫做搖樹（tree-shaking），即打包時自動刪除沒有用到的代碼。

由於上面兩點，rollup 輸出的代碼非常整潔，而且體積小於其他打包工具。

使用參數--file [FILENAME]，將打包結果保存到指定文件。


$ rollup main.js --file bundle.js

上面命令將打包結果保存到 bundle.js。

四、使用注意點

（1）如果有多個入口腳本，就依次填寫它們的文件名，並使用參數--dir指定輸出目錄。


$ rollup m1.js m2.js --dir dist

上面命令會在目錄dist，打包生成多個文件：m1.js、m2.js、以及它們共同的依賴項（如果有的話）。

（2）參數--format iife，會把打包結果放在一個自動執行函數里面。


$ rollup main.js --format iife

（3）如果希望打包後代碼最小化，使用參數--compact。


$ rollup main.js --compact

另一種方法是使用專門工具。


$ rollup main.js | uglifyjs --output bundle.js

上面命令分成兩步，第一步是 rollup 打包，第二步是 uglifyjs 進行代碼最小化，最後寫入 bundle.js。

（4）rollup 支持使用配置文件（rollup.config.js），把參數都寫在裡面，下面是一個例子。


// rollup.config.js
export default {
  input: 'main.js',
  output: {
    file: 'bundle.js',
    format: 'es'
  }
};

參數-c啟用配置文件。


$ rollup -c

我不推薦使用配置文件，這樣會增加額外的複雜性。默認場景下，命令行參數已經夠用了，也更容易閱讀。

五、轉成 CommonJS 模塊

最後，rollup 還支持 ES 模塊轉成 CommonJS 模塊，使用參數--format cjs就可以了。


$ rollup add.js --format cjs

轉換後的 CommonJS 模塊，代碼如下。


'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const PI = 3.14;
const E = 2.718;

function addPi(x) {
  return x + PI;
}

function addE(x) {
  return x + E; 
}

exports.addE = addE;
exports.addPi = addPi;

（完）

推薦訂閱源