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

本文一共七個(gè)例子，由淺入深帶你熟悉Rollup。首先把 rollup-demos 這個(gè)示例倉(cāng)庫(kù)下載到本地

mkdir rollup
cd rollup
git clone git@github.com:qiqihaobenben/rollup-demos.git

準(zhǔn)備就緒，正文開(kāi)始

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

工具的使用是分場(chǎng)景的，Rollup的使用場(chǎng)景是，你的代碼基于 ES6 模塊編寫(xiě)，并且你做的東西是準(zhǔn)備給他人使用的。

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

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

優(yōu)點(diǎn)

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

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

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

支持ES6模塊和IIFE格式。

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

缺點(diǎn)

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

比如打包多個(gè)依賴庫(kù)，把公共依賴項(xiàng)提出來(lái)（Webpack的CommonsChunkPlugin）還有HMR(模塊熱替換)

文檔相對(duì)較少，遇到問(wèn)題無(wú)法快速解決

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 {
  // 核心選項(xiàng)
  input,     // 必須
  external,
  plugins,

  // 額外選項(xiàng)
  onwarn,

  // danger zone
  acorn,
  context,
  moduleContext,
  legacy

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

    // 額外選項(xiàng)
    paths,
    banner,
    footer,
    intro,
    outro,
    sourcemap,
    sourcemapFile,
    interop,

    // 高危選項(xiàng)
    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,這個(gè)格式需要一個(gè)模塊名
rollup main.js -o bundle.js -f umd --name "myBundle"

運(yùn)行配置文件

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!"

在項(xiàng)目根目錄(之后Rollup運(yùn)行會(huì)默認(rèn)這個(gè)目錄)運(yùn)行
rollup src/example1/main.js -o dist/example1/bundle.js -f cjs

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

-o 是 --output.file 的縮寫(xiě)，如果不寫(xiě)會(huì)默認(rèn)輸出到命令行終端（標(biāo)準(zhǔn)輸出）。

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

在項(xiàng)目 src/example2 文件夾下，新建一個(gè) rollup.config.js 文件，寫(xiě)入以下代碼：

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

新建一個(gè)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!"

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

注意

同樣的命令行選項(xiàng)將會(huì)覆蓋配置文件中的選項(xiàng)，例如:

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

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

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

使用 rollup-plugin-json，令 Rollup 從 JSON 文件中讀取數(shù)據(jù)。
將 rollup-plugin-json 安裝為開(kāi)發(fā)依賴，因?yàn)榇a實(shí)際執(zhí)行時(shí)不依賴這個(gè)插件——只是在打包時(shí)使用，所以用的是--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()
    ]
}

運(yùn)行命令 rollup -c src/example3/rollup.config.js

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

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

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

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

看一下，按照普通流程引入 the-answer 模塊會(huì)是什么結(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: [
        // 沒(méi)有加入任何插件
    ]
}

運(yùn)行： rollup -c src/example4/rollup.config.js 會(huì)有一個(gè)警告 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并沒(méi)有打包進(jìn)來(lái)，還得用node的require去請(qǐng)求，然后經(jīng)過(guò)函數(shù)轉(zhuǎn)化才能拿到the-answer的輸出值
// 我們可以看一下 node_modules 下的 the-answer 模塊暴露出的內(nèi)容

var index = 42;
export default index;

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

現(xiàn)在我們需要一個(gè)插件 rollup-plugin-node-resolve 來(lái)告訴 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()
    ]
}

再次運(yùn)行rollup -c src/example4/rollup.config.js 沒(méi)有警告 ,我們看一下打包好的dist/example4/bundle.js

"use strict";

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

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

module.exports = main;

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

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

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

在 src/example5文件夾下新建 main.js 和 module5.js rollup.config.js， 用來(lái)驗(yàn)證插件。

// module5.js
exports.named = "cfangxu";
//module.exports = {named: "cfangxu"} 這個(gè)會(huì)報(bào)錯(cuò)，但是插件文檔里說(shuō)是好的，給他提一個(gè)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 選項(xiàng)顯示的指定命名輸出。當(dāng)然你也可以整體都引入
即： import all from "my-lib";

external 接受一個(gè)模塊名稱的數(shù)組或一個(gè)接受模塊名稱的函數(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 就不會(huì)把第三方的庫(kù)打包進(jìn)我們最后的文件了。可以在 src/example5/rollup.config.js 中把 external 注釋掉看看打包后的文件，會(huì)把整個(gè) lodsh 打包進(jìn)來(lái)。
擴(kuò)展： 如果用到 lodsh ，可以使用 babel-plugin-lodash 來(lái)最優(yōu)選擇lodash模塊。

我們?cè)陧?xiàng)目中有很大概率用到 babel ，使用 Babel 和 Rollup 的最簡(jiǎn)單方法是使用 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

運(yùn)行：rollup -c src/example7/rollup.config.js

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

var index = 42;

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

module.exports = main;

說(shuō)明

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

rollup.js 中文文檔

Rollup 插件列表