Rollup.js
????JavaScript 模塊打包器，可以將小塊代碼編譯成大塊復雜的代碼，例如 library 或應用程序
????比webpack要輕量許多，用于彌補gulp的無tree-shaking是很好的選擇，最大的用途是打包生產一個庫文件
????打出來的包干凈，沒有其他冗余代碼
安裝
npm install --global rollup
安裝成功后，運行 rollup，若打印出使用說明則安裝成功
常用命令
rollup [待打包文件路徑] -f [指定格式]
例 rollup src/main.js -f cjs
-f?選項（--output.format?的縮寫）指定了所創建 bundle 的類型
bundle類型 --amd（異步模塊定義），cjs（commonjs），es（將軟件包保存為es模塊文件），iife（適合作為<script>標簽），umd（以amd、cjs、iife為一體）
rollup [待打包文件路徑] -o [包文件路徑] -f [指定格式]
例 rollup src/main.js -o
? ? ? bundle.js -f cjs
配置文件
簡單命令
在項目中創建一個名為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
當format為iife和umd時必須提供，將作為全局變量掛在window(瀏覽器環境)下：若name："A"則window.A=...
sourcemap--boolean
生成bundle.map.js文件，方便調試
plugins--string[]
插件配置，常用插件列表參考下文
external--string[]
告訴rollup不要將指定的包打包，而作為外部依賴
global--{}
例 {'jquery':'$' } //告訴rollup全局變量$即是jquery
插件
通過相對路徑，將一個入口文件和一個模塊創建成了一個簡單的 bundle。隨著構建更復雜的 bundle，通常需要更大的靈活性——引入 npm 安裝的模塊、通過? ? ? Babel 編譯代碼、和? ? ? JSON 文件打交道等。
常用插件
rollup-plugin-json
????從json文件中讀取數據
rollup-plugin-node-resolve
????識別node_modules中的包
rollup-plugin-commonjs
? ? ?將commonjs模塊轉換為es6
? ? ?node_modules中的包大部分都是commonjs格式的，要在rollup中使用必須先轉為ES6語法
rollup-plugin-babel
rollup-plugin-typescript2
????打包typescript項目
? ??注意有坑--網上教程大多數寫的使用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執行命令
????????運行 npm run build，不用每次輸入一長串rollup命令
rollup.watch
????Rollup 提供了?rollup.watch?函數，當它檢測到磁盤上單個模塊已經改變，它會重新構建你的文件束。 當你通過命令行運行 Rollup，并帶上?--watch?標記時，此函數會被內部使用
????使用
????????命令行 rollup?-c --watch
????????package.json 中配置scripts
參考文檔
https://www.rollupjs.com/rollup.js中文網
