打包工具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。

，四、用之当察

（一）若有诸入口之文，则次第书其名，以--dir，定输出之域。


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

，此令于dist，打包为众文：m1.js、m2.js，及其共依（若有）。

（二）--format iife，则置打包之果于一自执行之函数中。


$ rollup main.js --format iife

（三）欲使打包后之文极简，则用--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;

（终）

推薦訂閱源