前言
最近學(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)鏈接上的概述（有能力看英文文檔的還是看英文文檔，中文文檔有些地方可能不全为居，這里也貼出中文文檔鏈接:傳送門）碌宴。
關(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é)果依舊可讀
快速開始一個(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> 輸出的文件類型 (amd, cjs, esm, iife, umd)
-e, --external <ids> 將模塊ID的逗號(hào)分隔列表排除
-g, --globals <pairs> 以`module ID:Global` 鍵值對(duì)的形式毫炉，用逗號(hào)分隔開
任何定義在這里模塊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)聽源文件是否改動(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)存中生成不同的包职辨。如果您想直接將它們寫入磁盤盗蟆，請(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è)到磁盤上單個(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í)
