摘要：首先把這個示例倉庫下載到本地準備就緒，正文開始簡介以下內(nèi)容基于和這兩個打包工具來展開。但是目前，中的大多數(shù)包都是以模塊的形式出現(xiàn)的。在它們更改之前，我們需要將模塊轉(zhuǎn)換為供處理?？梢栽谥邪炎⑨尩艨纯创虬蟮奈募瑫颜麄€打包進來。

本文一共七個例子，由淺入深帶你熟悉Rollup。首先把 rollup-demos 這個示例倉庫下載到本地

mkdir rollup
cd rollup
git clone [email protected]:qiqihaobenben/rollup-demos.git

準備就緒，正文開始

以下內(nèi)容基于Webpack和Rollup這兩個打包工具來展開。

工具的使用是分場景的，Rollup的使用場景是，你的代碼基于 ES6 模塊編寫，并且你做的東西是準備給他人使用的。

有一句經(jīng)驗之談：在開發(fā)應(yīng)用時使用 Webpack，開發(fā)庫時使用 Rollup。

例如：React、Vue、Ember、Preact、D3、Three.js、Moment 等眾多知名項目都使用了 Rollup

優(yōu)點

編譯運行出來的代碼內(nèi)容格式可讀性好。

幾乎沒什么多余代碼，除了必要的cjs, umd頭外，bundle代碼基本和源碼沒什么差異，沒有奇怪的__webpack_require__, Object.defineProperty

相比Webpack，Rollup擁有無可比擬的性能優(yōu)勢，這是由依賴處理方式?jīng)Q定的，編譯時依賴處理（Rollup）自然比運行時依賴處理（Webpack）性能更好,而且沒什么多余代碼，如上文提到的，webpack bundle不僅體積大，非業(yè)務(wù)代碼（__webpack_require__, Object.defineProperty）執(zhí)行耗時也不容小視。Rollup沒有生成這些額外的東西，執(zhí)行耗時主要在于Compile Script 和 Evaluate Script 上，其余部分可以忽略不計

支持ES6模塊和IIFE格式。

對于ES6模塊依賴庫，Rollup會靜態(tài)分析代碼中的 import，并將排除任何未實際使用的代碼。(Tree-shaking)

缺點

插件生態(tài)相對較弱，一些常見需求無法滿足

比如打包多個依賴庫，把公共依賴項提出來（Webpack的CommonsChunkPlugin）還有HMR(模塊熱替換)

文檔相對較少，遇到問題無法快速解決

npm install -g rollup

Usage: rollup [options] 

Basic options:

-v, --version               Show version number
-h, --help                  Show this help message
-c, --config                Use this config file (if argument is used but value
                              is unspecified, defaults to rollup.config.js)
-w, --watch                 Watch files in bundle and rebuild on changes
-i, --input                 Input (alternative to )
-o, --output.file 
  Output (if absent, prints to stdout)
-f, --output.format [es]    Type of output (amd, cjs, es, iife, umd)
-e, --external              Comma-separate list of module IDs to exclude
-g, --globals               Comma-separate list of `module ID:Global` pairs
                              Any module IDs defined here are added to external
-n, --name                  Name for UMD export
-m, --sourcemap             Generate sourcemap (`-m inline` for inline map)
-l, --legacy                Support IE8
--amd.id                    ID for AMD module (default is anonymous)
--amd.define                Function to use in place of `define`
--no-strict                 Don"t emit a `"use strict";` in the generated modules.
--no-indent                 Don"t indent result
--environment       Settings passed to config file (see example)
--no-conflict               Generate a noConflict method for UMD globals
--no-treeshake              Disable tree-shaking
--silent                    Don"t print warnings
--intro                     Content to insert at top of bundle (inside wrapper)
--outro                     Content to insert at end of bundle (inside wrapper)
--banner                    Content to insert at top of bundle (outside wrapper)
--footer                    Content to insert at end of bundle (outside wrapper)
--interop                   Include interop block (true by default)

export default {
  // 核心選項
  input,     // 必須
  external,
  plugins,

  // 額外選項
  onwarn,

  // danger zone
  acorn,
  context,
  moduleContext,
  legacy

  output: {  // 必須 (如果要輸出多個，可以是一個數(shù)組)
    // 核心選項
    file,    // 必須
    format,  // 必須
    name,
    globals,

    // 額外選項
    paths,
    banner,
    footer,
    intro,
    outro,
    sourcemap,
    sourcemapFile,
    interop,

    // 高危選項
    exports,
    amd,
    indent
    strict
  },
};

生成瀏覽器可用

//打包main.js到bundle.js 打包格式是立即執(zhí)行函數(shù)
rollup main.js -o bundle.js -f iife

生成Node.js可用

//打包main.js到bundle.js 打包格式是commonjs。
rollup main.js -o bundle.js -f cjs

Node.js和瀏覽器都可用

//打包main.js到bundle.js 打包格式是UMD,這個格式需要一個模塊名
rollup main.js -o bundle.js -f umd --name "myBundle"

運行配置文件

rollup -c

// src/example1/main.js
import one from "./module1.js";
export default function () {
    console.log(one);
}

// src/example1/module1.js
export default "hello world!"

在項目根目錄(之后Rollup運行會默認這個目錄)運行
rollup src/example1/main.js -o dist/example1/bundle.js -f cjs

解析：
-f 選項（ --output.format 的縮寫）指定了所創(chuàng)建 bundle 的類型，打包時必須要有的選項，否則會報錯。
輸出的格式有amd, cjs, es, iife, umd,可以把命令行中 -f 后面的 cjs 改為其他的，看一下生成的bundle.js的內(nèi)容有什么不一樣。對于模塊不熟悉的可以看一下 很全很全的JavaScript的模塊講解

-o 是 --output.file 的縮寫，如果不寫會默認輸出到命令行終端（標準輸出）。

如果添加更多的選項，上面這種命令行的方式就顯得麻煩了，就得需要 使用配置文件 了。

在項目 src/example2 文件夾下，新建一個 rollup.config.js 文件，寫入以下代碼：

export default {
    input: "src/example2/main.js",
    output: {
        file: "dist/example2/bundle.js",
        format: "cjs"
    }
}

新建一個main.js 和 module2.js如下：

// src/example2/main.js
import one from "./module2.js";
export default function () {
    console.log(one);
}

// src/example1/module2.js
export default "hello config!"

接下來就是運行命令，rollup.config.js本來是Rollup默認運行的配置文件，如果我們的rollup.config.js是放在根目錄下的，可以直接運行rollup -c，不用任何選項，但是我們是放在src/module2文件夾下的，所以要加上配置文件的路徑
rollup -c src/module2/rollup.config.js

注意

同樣的命令行選項將會覆蓋配置文件中的選項，例如:

rollup -c src/module2/rollup.config.js -o dist/example2/bundle2.js 那么打包好的文件名就是bundle2.js

Rollup 本身會處理配置文件，所以可以使用 export default 語法——代碼不會經(jīng)過 Babel 等類似工具編譯，所以只能使用支持 ES2015(ES6) 語法的 Node.js 版本。

隨著構(gòu)建更復(fù)雜的 bundle，我們需要加入插件(plugins)。

使用 rollup-plugin-json，令 Rollup 從 JSON 文件中讀取數(shù)據(jù)。
將 rollup-plugin-json 安裝為開發(fā)依賴，因為代碼實際執(zhí)行時不依賴這個插件——只是在打包時使用，所以用的是--save-dev 而不是 --save

npm i -D rollup-plugin-json 或者 npm install --save-dev rollup-plugin-json

src/example3文件夾下新建 main.js 和 rollup.config.js

// main.js
import { version} from "../../package.json";

export default function () {
    console.log(`version is ${version}`);
}

// rollup.config.js
import json from "rollup-plugin-json";

export default {
    input: "src/example3/main.js",
    output: {
        file: "dist/example3/bundle.js",
        format: "cjs"
    },
    plugins: [
        json()
    ]
}

運行命令 rollup -c src/example3/rollup.config.js

擴展： json函數(shù)可以傳入 include指定包含文件、exclude指定排除文件，preferConst如果為true,用const接受輸出，如果為false，用 var接收輸出。

注意： tree-shaking的作用，可以看到打包好bundle.js中只有version輸入，package.json 中的其它數(shù)據(jù)被忽略了。

Rollup 不知道怎么處理依賴于從 npm 安裝到你的 node_modules 文件夾中的軟件包。

例如，添加一個簡單的依賴 the-answer，它輸出對生活、宇宙及其它一切的答案，這個簡單的包是用來演示如何將npm包匯總到Rollup包中。特別是, 此包在package.json中添加了 "main" (UMD 格式) 和 "模塊" (ES2015 格式)這個兩個選項。

看一下，按照普通流程引入 the-answer 模塊會是什么結(jié)果。
npm install the-answer
在 src/example4 文件夾下新增 main.js 和 rollup.config.js

// main.js
import answer from "the-answer";

export default function () {
    console.log("the answer is " + answer);
}


// rollup.config.js
export default {
    input: "src/example4/main.js",
    output: {
        file: "dist/example4/bundle.js",
        format: "cjs"
    },
    plugins: [
        // 沒有加入任何插件
    ]
}

運行： rollup -c src/example4/rollup.config.js 會有一個警告 Unresolved dependencies ,我們看一下 打包好的dist/example4/bundle.js

// 截取dist/example4/bundle.js`
function _interopDefault (ex) { return (ex && (typeof ex === "object") && "default" in ex) ? ex["default"] : ex; }

var answer = _interopDefault(require("the-answer"));

// 可以看到the-answer并沒有打包進來，還得用node的require去請求，然后經(jīng)過函數(shù)轉(zhuǎn)化才能拿到the-answer的輸出值
// 我們可以看一下 node_modules 下的 the-answer 模塊暴露出的內(nèi)容

var index = 42;
export default index;

// 這樣也可以看出，如果the-answer如果打包進來，應(yīng)該是：
var answer = 42;

現(xiàn)在我們需要一個插件 rollup-plugin-node-resolve 來告訴 Rollup 如何查找外部模塊

npm i -D rollup-plugin-node-resolve

將插件加入配置文件中

import resolve from "rollup-plugin-node-resolve";

export default {
    input: "src/example4/main.js",
    output: {
        file: "dist/example4/bundle.js",
        format: "cjs"
    },
    plugins: [
        resolve()
    ]
}

再次運行rollup -c src/example4/rollup.config.js 沒有警告 ,我們看一下打包好的dist/example4/bundle.js

"use strict";

// the-answer的輸出已經(jīng)打包進來了
var index = 42;

function main () {
    console.log("the answer is " + index);
}

module.exports = main;

類似 the-answer 一些庫因為 package.json里的module選項可以讓我們正常導(dǎo)入的ES6模塊。 但是目前，npm中的大多數(shù)包都是以CommonJS模塊的形式出現(xiàn)的。 在它們更改之前，我們需要將CommonJS模塊轉(zhuǎn)換為 ES2015 供 Rollup 處理。

rollup-plugin-commonjs 插件就是用來將 CommonJS 轉(zhuǎn)換成 ES2015 模塊的。通常，這個插件會跟 rollup-plugin-node-resolve配合使用，這樣就能打包 node_modules依賴中的CommonJS。
rollup-plugin-commonjs 應(yīng)該用在其他插件轉(zhuǎn)換你的模塊之前 - 這是為了防止其他插件的改變破壞CommonJS的檢測。

安裝：npm i -D rollup-plugin-commonjs

在 src/example5文件夾下新建 main.js 和 module5.js rollup.config.js， 用來驗證插件。

// module5.js
exports.named = "cfangxu";
//module.exports = {named: "cfangxu"} 這個會報錯，但是插件文檔里說是好的，給他提一個issues

// main.js
import { named } from "./module5.js";
export default function () {
   console.log(named);
}

// rollup.config.js
import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";

export default {
   input: "src/example5/main.js",
   output: {
       file: "dist/example5/bundle.js",
       format: "cjs"
   },
   plugins: [
       resolve({
           jsnext: true,
           main: true
       }),
       commonjs()
   ]
}

注意： 如果引入的是 node_modules里的模塊
例如：import { named } from "my-lib";
要啟用 namedExports 選項顯示的指定命名輸出。當然你也可以整體都引入
即： import all from "my-lib";

external 接受一個模塊名稱的數(shù)組或一個接受模塊名稱的函數(shù)(如果它被視為外部引用（externals）則返回true)

安裝 lodash： npm i -S lodash

在 src/example6 文件夾中新建 main.js 和 rollup.config.js

// main.js
import answer from "the-answer";
import _ from "lodash";

// rollup.config.js
import resolve from "rollup-plugin-node-resolve";

export default {
    input: "src/example6/main.js",
    output: {
        file: "dist/example6/bundle.js",
        format: "umd",
        name: "example6"
    },
    plugins: [
        resolve()
    ],
    external: ["lodash"]
}

配置文件中加入 external 就不會把第三方的庫打包進我們最后的文件了?？梢栽?src/example5/rollup.config.js 中把 external 注釋掉看看打包后的文件，會把整個 lodsh 打包進來。
擴展： 如果用到 lodsh ，可以使用 babel-plugin-lodash 來最優(yōu)選擇lodash模塊。

我們在項目中有很大概率用到 babel ，使用 Babel 和 Rollup 的最簡單方法是使用 rollup-plugin-babel

安裝： npm i -D rollup-plugin-babel

在 src/example7文件夾下新建 main.js .babelrc rollup.config.js

//main.js
import answer from "the-answer";

export default function () {
    console.log(`the answer is ${answer}`);
}

//.babelrc
{
    "presets": [
        ["env",{
            "modules": false
        }]
    ],
    "plugins": [
        "external-helpers"
    ]
}

//rollup.config.js
import resolve from "rollup-plugin-node-resolve";
import babel from "rollup-plugin-babel";

export default {
    input: "src/example7/main.js",
    output: {
        file: "dist/example7/bundle.js",
        format: "cjs"
    },
    plugins: [
        resolve(),
        babel({
            exclude: "node_modules/**",
            externalHelpers: true
        })
    ]
}

安裝： npm i -D babel-core babel-preset-env babel-plugin-external-helpers

運行：rollup -c src/example7/rollup.config.js

// dist/example7/bundle.js
"use strict";

var index = 42;

function main () {
    // 轉(zhuǎn)成了ES5的語法了
    console.log("the answer is " + index);
}

module.exports = main;

說明

babel-plugin-external-helpers 這個模塊是在 .babelrc 文件中體現(xiàn)，目的是讓babel轉(zhuǎn)義出來的幫助性代碼只在該文件的頭部出現(xiàn)一次，而不會再每個引入的模塊中加入，如果不想把這些幫助性的代碼打包進你的文件，需要在rollup的配置文件中加入 externalHelpers: true，這樣就會引用一個全局的babelHelpers 對象

rollup.js 中文文檔

Rollup 插件列表