概述

Rollup 是一個 JavaScript 模組打包器，可以將小塊程式碼編譯成大塊複雜的程式碼，例如 library 或應用程式。Rollup 對程式碼模組使用新的標準化格式，這些標準都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解決方案，如 CommonJS 和 AMD。ES6 模組可以使你自由、無縫地使用你最喜愛的 library 中那些最有用獨立函式，而你的專案不必攜帶其他未使用的程式碼。ES6 模組最終還是要由瀏覽器原生實現，但當前 Rollup 可以使你提前體驗。

建立第一個bundle(Creating your first bundle)

• 使用 Rollup 最簡單的方法是通過 Command Line Interface （或 CLI）。先全域性安裝 Rollup （之後會介紹如何在專案中進行安裝，更便於打包，但現在不用擔心這個問題）。在命令列中輸入以下內容：

npm install rollup --global # or `npm i rollup -g` for short

• 現在可以執行 rollup 命令了。試試吧~

rollup

我們來建立一個簡單的專案：

1. 首先，我們需要個 入口。將以下程式碼貼上到新建的檔案 src/main.js 中：

// src/main.js
import foo from './foo.js';
export default function () {
  console.log(foo);
}

2. 之後建立入口檔案引用的 foo.js 模組：

// src/foo.js
export default 'hello world!';
 

3. 現在可以建立 bundle 了：

rollup src/main.js -f cjs 

cjs為common.js
4. -f 選項（--output.format 的縮寫）指定了所建立 bundle 的型別——這裡是 CommonJS（在 Node.js 中執行）。由於沒有指定輸出檔案，所以會直接列印在 stdout 中：

'use strict';

var foo = 'hello world!';

var main = function () {
  console.log(foo);
};

module.exports = main;

5. 也可以像下面一樣將 bundle 儲存為檔案：

rollup src/main.js -o bundle.js -f cjs
（你也可以用 rollup src/main.js -f cjs > bundle.js，但是我們之後會提到，這種方法在生成 sourcemap 時靈活性不高。）

6. 試著執行下面的程式碼：

node
> var myBundle = require('./bundle.js');
> myBundle();
'hello world!'

命令列

1. 配置檔案(Configuration files)

// rollup.config.js
export default {
  // 核心選項
  input,     // 必須
  external,
  plugins,

  // 額外選項
  onwarn,

  // danger zone
  acorn,
  context,
  moduleContext,
  legacy

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

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

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

2. 你必須使用配置檔案才能執行以下操作：
   • 把一個專案打包，然後輸出多個檔案
   • 使用Rollup外掛, 例如 rollup-plugin-node-resolve 和 rollup-plugin-commonjs 。這兩個外掛可以讓你載入Node.js裡面的CommonJS模組
3. 命令列的引數(Command line flags)

-i, --input <filename>      要打包的檔案（必須）
-o, --file <output>         輸出的檔案 (如果沒有這個引數，則直接輸出到控制檯)
-f, --format <format>       輸出的檔案型別 (amd, cjs, esm, iife, umd)
-e, --external <ids>        將模組ID的逗號分隔列表排除
-g, --globals <pairs>       以`module ID:Global` 鍵值對的形式，用逗號分隔開 
                              任何定義在這裡模組ID定義新增到外部依賴
-n, --name <name>           生成UMD模組的名字
-h, --help                  輸出 help 資訊
-m, --sourcemap             生成 sourcemap (`-m inline` for inline map)
-v/--version                列印已安裝的Rollup版本號。
-w/--watch                  監聽原始檔是否有改動，如果有改動，重新打包
--amd.id                    AMD模組的ID，預設是個匿名函式
--amd.define                使用Function來代替`define`
--no-strict                 在生成的包中省略`"use strict";`
--no-conflict               對於UMD模組來說，給全域性變數生成一個無衝突的方法
--intro                     在打包好的檔案的塊的內部(wrapper內部)的最頂部插入一段內容
--outro                     在打包好的檔案的塊的內部(wrapper內部)的最底部插入一段內容
--banner                    在打包好的檔案的塊的外部(wrapper外部)的最頂部插入一段內容
--footer                    在打包好的檔案的塊的外部(wrapper外部)的最底部插入一段內容
--interop                   包含公共的模組（這個選項是預設新增的）
--silent                    不要將警告列印到控制檯。