前言

最近學(xué)習(xí)了rollup的相關(guān)知識(shí)。對(duì)自己來(lái)說(shuō)也算是一種知識(shí)儲(chǔ)備。這篇主要記錄我對(duì)rollup學(xué)習(xí)的一些理解與筆記。

rollup簡(jiǎn)單概述

我對(duì)于rollup的理解，rollup是一款小巧的javaScript模塊打包器。并且rollup是一款ESM打包器。它基于ES模塊化規(guī)范。具體可以參考官網(wǎng)鏈接上的概述（有能力看英文文檔的還是看英文文檔，中文文檔有些地方可能不全，這里也貼出中文文檔鏈接:傳送門(mén)）。

關(guān)于rollup的特性其實(shí)上面的總結(jié)已經(jīng)說(shuō)的差不多了，這里簡(jiǎn)單羅列一下

• 小巧，簡(jiǎn)單 （從文檔體積就可以看出來(lái)）

• 基于ES模塊化規(guī)范 （意味為其他模塊化規(guī)范如CommonJS就需要用插件來(lái)支持）

• rollup中不支持HMR（熱替換），因?yàn)槟K最終被打包到一個(gè)函數(shù)中

• 自帶tree sharking

• 輸出結(jié)果更加扁平，執(zhí)行效率更高，并且打包結(jié)果依舊可讀

快速開(kāi)始一個(gè)demo

安裝rollup

yarn add rollup --save--dev
// 或者
npm install rollup --save--dev
// 再或者
cnpm install rollup --save-dev

安裝完成后，在node_modules/.bin中就會(huì)有rollup文件，執(zhí)行yarn rollup就會(huì)執(zhí)行打包命令啦。

文件目錄

demo的文件目錄結(jié)構(gòu)如下所示

rollup_study_project
├─ .vscode
│  └─ settings.json
├─ dist 
│  └─ bundle.js # 打包生成文件
├─ package.json
├─ README.md
├─ rollup.config.js # rollup配置文件
├─ src
│  ├─ components # 組件文件夾
│  │  ├─ a.js
│  │  └─ b.js
│  ├─ index.html
│  └─ index.js # 入口文件
└─ yarn.lock

rollup.config.js是Rollup的配置文件，一個(gè)簡(jiǎn)單的配置主要包含

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs',
    name:'A', 
    sourcemap:true
  },
  external : ["XXX"],
  plugins : [],
  global : {
        'jquery' : '$'  
  }
};

• input : 入口文件路徑

• output ： 出口文件配置

• file ： 出口文件路徑

• format ： 生成文件的格式， 主要有amd， cjs ， es，life，umd

• amd ： 異步模塊定義，用于像RequestJS這樣的模塊加載器。

• cjs -- CommonJS, 適用于Node或Browserify/webpack

• es -- 將軟件包保存為ES模塊文件。

• iife -- 一個(gè)自動(dòng)執(zhí)行的功能，適合作為 <script>標(biāo)簽這樣的。

• umd -- 通用模塊定義，以amd, cjs, 和 iife 為一體

• name :當(dāng)format為iife和umd時(shí)必須提供，將作為全局變量掛在window(瀏覽器環(huán)境)下：window.A=...

• sourcemap : 生成bundle.map.js文件，方便調(diào)試

• external : 不要對(duì)"XXX"文件進(jìn)行打包，而是作為外部依賴

• plugins : 一些插件

• global : 告訴rollup 全局變量$即是jquery

多路徑打包：

只需要將配置變?yōu)橐粋€(gè)數(shù)組形式

export default [
  {
    input: 'main-a.js',
    output: {
      file: 'dist/bundle-a.js',
      format: 'cjs'
    }
  },
  {
    input: 'main-b.js',
    output: [
      {
        file: 'dist/bundle-b1.js',
        format: 'cjs'
      },
      {
        file: 'dist/bundle-b2.js',
        format: 'es'
      }
    ]
  }
];

常用命令行參數(shù)

-i, --input <filename>      要打包的文件（必須）
-o, --file <output>         輸出的文件 (如果沒(méi)有這個(gè)參數(shù)，則直接輸出到控制臺(tái))
-f, --format <format>       輸出的文件類(lèi)型 (amd, cjs, esm, iife, umd)
-e, --external <ids>        將模塊ID的逗號(hào)分隔列表排除
-g, --globals <pairs>       以`module ID:Global` 鍵值對(duì)的形式，用逗號(hào)分隔開(kāi) 
                              任何定義在這里模塊ID定義添加到外部依賴
-n, --name <name>           生成UMD模塊的名字
-h, --help                  輸出 help 信息
-m, --sourcemap             生成 sourcemap (`-m inline` for inline map)
-v, --version               打印版本號(hào)，如果改動(dòng)重新打包
-w, --watch                 監(jiān)聽(tīng)源文件是否改動(dòng)
--amd.id                    AMD模塊的ID，默認(rèn)是個(gè)匿名函數(shù)
--amd.define                使用Function來(lái)代替`define`
--no-strict                 在生成的包中省略`"use strict";`
--no-conflict               對(duì)于UMD模塊來(lái)說(shuō)，給全局變量生成一個(gè)無(wú)沖突的方法
--intro                     在打包好的文件的塊的內(nèi)部(wrapper內(nèi)部)的最頂部插入一段內(nèi)容
--outro                     在打包好的文件的塊的內(nèi)部(wrapper內(nèi)部)的最底部插入一段內(nèi)容
--banner                    在打包好的文件的塊的外部(wrapper外部)的最頂部插入一段內(nèi)容
--footer                    在打包好的文件的塊的外部(wrapper外部)的最底部插入一段內(nèi)容
--interop                   包含公共的模塊（這個(gè)選項(xiàng)是默認(rèn)添加的）
--silent                    不將警告打印到控制臺(tái)

javaScript API

rollup 提供了可從 Node.js 使用的 JavaScript API。

• rollup.rollup

該rollup.rollup函數(shù)接收一個(gè)輸入選項(xiàng)對(duì)象作為參數(shù)，并返回一個(gè)解析為bundle具有各種屬性和方法的對(duì)象的 Promise，在此步驟中，Rollup 將構(gòu)建模塊圖并執(zhí)行 tree-shaking，但不會(huì)生成任何輸出。

在一個(gè)bundle對(duì)象上，您可以bundle.generate使用不同的輸出選項(xiàng)對(duì)象多次調(diào)用以在內(nèi)存中生成不同的包。如果您想直接將它們寫(xiě)入磁盤(pán)，請(qǐng)bundle.write改用。

一旦你完成了bundle對(duì)象，你應(yīng)該調(diào)用bundle.close()，它會(huì)讓插件通過(guò)closeBundle鉤子清理它們的外部進(jìn)程或服務(wù)。

• rollup.watch

Rollup 也提供了 rollup.watch 函數(shù)，當(dāng)它檢測(cè)到磁盤(pán)上單個(gè)模塊已經(jīng)改變，它會(huì)重新構(gòu)建你的文件束。 當(dāng)你通過(guò)命令行運(yùn)行 Rollup，并帶上 --watch 標(biāo)記時(shí)，此函數(shù)會(huì)被內(nèi)部使用。

后記

下一篇是我學(xué)習(xí)rollup的插件的筆記，希望會(huì)對(duì)大家有所幫助。
下一篇：rollup學(xué)習(xí)--02.常用插件學(xué)習(xí)