打包工具 rollup.js 入門教程

阮一峰發表於2022-05-05
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;

（完）

相關文章