Rollup.js
????JavaScript 模塊打包器驯鳖，可以將小塊代碼編譯成大塊復(fù)雜的代碼论咏，例如 library 或應(yīng)用程序
????比webpack要輕量許多，用于彌補gulp的無tree-shaking是很好的選擇，最大的用途是打包生產(chǎn)一個庫文件
????打出來的包干凈暴氏，沒有其他冗余代碼
安裝
npm install --global rollup
安裝成功后，運行 rollup绣张，若打印出使用說明則安裝成功
常用命令
rollup [待打包文件路徑] -f [指定格式]
例 rollup src/main.js -f cjs
-f?選項（--output.format?的縮寫）指定了所創(chuàng)建 bundle 的類型
bundle類型 --amd（異步模塊定義）偏序，cjs（commonjs），es（將軟件包保存為es模塊文件）胖替，iife（適合作為<script>標(biāo)簽），umd（以amd豫缨、cjs独令、iife為一體）
rollup [待打包文件路徑] -o [包文件路徑] -f [指定格式]
例 rollup src/main.js -o
? ? ? bundle.js -f cjs
配置文件
簡單命令
在項目中創(chuàng)建一個名為rollup.config.js的文件，增加如下代碼
????export default?
????????????{?
????????????????input: 'src/main.js',
?????????????????output: {?
????????????????????????????????file: 'bundle.js',?
????????????????????????????????format: 'cjs'?
????????????????????????????}
?????????????}
使用 rollup -c 或 rollup --config 好芭，自動尋找? ? ? rollup.config.js配置文件
同樣的命令行選項會覆蓋配置文件中的選項
可指定其他配置文件
rollup --config rollup.config.dev.js
具體配置項
input
入口文件路徑
output--{} or [{}]
file--string
輸出文件
format--string
輸出格式--amd/ es6 / iife / umd / cjs
name--string
當(dāng)format為iife和umd時必須提供燃箭，將作為全局變量掛在window(瀏覽器環(huán)境)下：若name："A"則window.A=...
sourcemap--boolean
生成bundle.map.js文件，方便調(diào)試
plugins--string[]
插件配置舍败，常用插件列表參考下文
external--string[]
告訴rollup不要將指定的包打包招狸，而作為外部依賴
global--{}
例 {'jquery':'$' } //告訴rollup全局變量$即是jquery
插件
通過相對路徑，將一個入口文件和一個模塊創(chuàng)建成了一個簡單的 bundle邻薯。隨著構(gòu)建更復(fù)雜的 bundle裙戏，通常需要更大的靈活性——引入 npm 安裝的模塊、通過? ? ? Babel 編譯代碼厕诡、和? ? ? JSON 文件打交道等累榜。
常用插件
rollup-plugin-json
????從json文件中讀取數(shù)據(jù)
rollup-plugin-node-resolve
????識別node_modules中的包
rollup-plugin-commonjs
? ? ?將commonjs模塊轉(zhuǎn)換為es6
? ? ?node_modules中的包大部分都是commonjs格式的，要在rollup中使用必須先轉(zhuǎn)為ES6語法
rollup-plugin-babel
rollup-plugin-typescript2
????打包typescript項目
? ??注意有坑--網(wǎng)上教程大多數(shù)寫的使用rollup-plugin-typescript灵嫌，但rollup-plugin-typescript使用后存在各種問題
rollup-plugin-replace
????替換待打包文件里的一些變量
rollup-plugin-uglify
????壓縮包
????只支持es5
????不支持es6 +
rollup-plugin-terser
????壓縮包
????支持es6+
package.json
????scripts
????????"build":?"rollup?-c"? //配置指定的rollup執(zhí)行命令
????????運行 npm run build壹罚，不用每次輸入一長串rollup命令
rollup.watch
????Rollup 提供了?rollup.watch?函數(shù)，當(dāng)它檢測到磁盤上單個模塊已經(jīng)改變寿羞，它會重新構(gòu)建你的文件束猖凛。 當(dāng)你通過命令行運行 Rollup，并帶上?--watch?標(biāo)記時绪穆，此函數(shù)會被內(nèi)部使用
????使用
????????命令行 rollup?-c --watch
????????package.json 中配置scripts
參考文檔
https://www.rollupjs.com/rollup.js中文網(wǎng)
