JavaScript 模塊打包器——Rollup
嗨，我是你穩(wěn)定更新（昨天除外）、持續(xù)輸出的勾勾。
（本來我是想繼續(xù)用我的沙雕貓貓頭，但是在后臺被人吐槽說沒有品味，于是我換了一張。）
最近無意間和同事聊到 Rollup 這個 JavaScript 模塊打包器。出于“開源”的宗旨，今天就簡單細(xì)膩地給大家講講 Rollup。
首先，可以看下中文官網(wǎng)。（英語讀寫無障礙的同學(xué)請移駕）
地址：https://www.rollupjs.com/?
官方介紹
Rollup 是一個 JavaScript 模塊打包器，可以將小塊代碼編譯成大塊復(fù)雜的代碼，例如 library 或應(yīng)用程序。
Rollup 對代碼模塊使用新的標(biāo)準(zhǔn)化格式，這些標(biāo)準(zhǔn)都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解決方案，如 CommonJS 和 AMD。
ES6 模塊可以使你自由、無縫地使用你最喜愛的 library 中那些最有用的獨立函數(shù)，而你的項目不必攜帶其他未使用的代碼。
ES6 模塊最終還是要由瀏覽器原生實現(xiàn)，但當(dāng)前 Rollup 可以使你提前體驗。
官方解說確實艱澀難懂，我們可以 get 以下幾點：
專屬 JavaScript 打包器
劃整為一
適合庫和框架
具有 Tree shaking 功能
實際操作
話不多說直接上手，我們先全局安裝這個 rollup 工具。
npm install -g rollup
安裝成功之后，有心的小伙伴可以 rollup -h || rollup --help 看下它的所有命令行，這里我就不細(xì)說了。
直接使用配置文件打包 rollup.config.js。當(dāng)然我們也可以自定義打包文件，它里面通過 Esmodule 的方式導(dǎo)出一個對象。
//rollup.config.jsexport?default?{????input????output????plugin}
配置完成之后在終端 rollup --config 或 -c 才可以使用 rollup 的配置文件。
?默認(rèn)使用rollup.config.js?rollup?--config?或者,?使用自定義的配置文件，這里使用my.config.js作為配置文件rollup --config my.config.js
配置項
Input ?入口文件配置，可以是字符串也可以是數(shù)組。
字符串——說明是單文件打包
數(shù)組——說明是多文件打包
Output 文件出口配置是一個對象。
{
file:"",//文件打包后出口文件名稱
format:"iife" ?// 打包后文件格式 iife 自執(zhí)行函數(shù) ?cjs 是 commonjs 規(guī)范 amd 是 amd 規(guī)范等
}
Plugin 插件配置 它是一個數(shù)組，常用插件如下：
rollup-plugin-json ?rollup 讀取 json 文件
rollup-plugin-node-resolve rollup可以查找第三方模塊
rollup-plugin-commonjs ?可以使用 commonjs 規(guī)范的模塊
代碼分包
如果我們在使用過程中需要使用分包這個功能，就需要設(shè)置 output 的配置項。
output:{????dir:"dist",????format:"amd"}
輸出到 dist 文件夾下，采用 amd 規(guī)范輸出。
多入口打包
多入口打包也很簡單，就是將 input 設(shè)置為一個數(shù)組，元素就是每個要打包文件路徑。
對比 webpack
Rollup 只能處理 js 模塊，而 webpack 可以處理任何資源，可以把所有的資源都當(dāng)成模塊來進行處理
Rollup 多用于類庫開發(fā)的打包
Rollup 一般不會產(chǎn)生額外的代碼（具有 Tree shaking 功能）
Rollup 會把所有資源放在一起加載，webpack 可以按需拆分
綜上就是 rollup 的基本使用，小伙伴們可以動手操作一番，體驗下 Rollup 這個小巧工具的打包～
推薦閱讀：
現(xiàn)代版戰(zhàn)國七雄爭霸，買菜大戰(zhàn)何時休？
前端人因為 Vue3 的 Ref-sugar 提案打起來了！
點點“贊”和“在看”，保護頭發(fā)，減少bug。