rollup是一款小巧的javascript模組打包工具,更適合於庫應用的構建工具;可以將小塊程式碼編譯成大塊複雜的程式碼,基於ES6 modules,它可以讓你的 bundle 最小化,有效減少檔案請求大小,vue在開發的時候用的是webpack,但是最後將檔案打包在一起的時候用的是 rollup.js
首次發表在個人部落格
全域性安裝
npm install --global rollup
複製程式碼
開始使用rollup
建立第一個bundle
建立main.js
console.log(111);
複製程式碼
執行 rollup --input main.js --output bundle.js --format cjs
, 該命令編譯 main.js
生成 bundle.js
, --format cjs
意味著打包為 node.js 環境程式碼, 請觀察 bundle.js 檔案內容
'use strict'
console.log(111);
複製程式碼
命令列引數簡介:
輸入(input -i/--input)
String 這個包的入口點 (例如:你的 main.js 或者 app.js 或者 index.js)
檔案(file -o/--output.file) String 要寫入的檔案。也可用於生成 sourcemaps,如果適用
格式(format -f/--output.format) 關於format選項 rollup提供了五種選項:
- amd – 非同步模組定義,用於像RequireJS這樣的模組載入器
- cjs – CommonJS,適用於 Node 和 Browserify/Webpack
- es – 將軟體包儲存為ES模組檔案
- iife – 一個自動執行的功能,適合作為
<script>
標籤。(如果要為應用程式建立一個捆綁包,您可能想要使用它,因為它會使檔案大小變小。) - umd – 通用模組定義,以amd,cjs 和 iife 為一體
使用配置檔案
rollup.config.js
export default {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'cjs'
}
};
複製程式碼
執行 rollup -c rollup.config.js
啟動配置項;
rollup 提供了 --watch / -w 引數來監聽檔案改動並自動重新打包
使用rollup外掛
npm install --save-dev rollup-plugin-json
複製程式碼
我們用的是 --save-dev 而不是 --save,因為程式碼實際執行時不依賴這個外掛——只是在打包時使用。
在配置檔案中啟用外掛
import json from 'rollup-plugin-json';
export default {
input: './main.js',
output: {
file: 'bundle.js',
format: 'umd'
},
plugins: [
json(),
],
}
複製程式碼
新建檔案 data.json
{
"name": "xiaoming",
"age": 12
}
複製程式碼
在main.js
引入 data.json
import { name } from './data.json';
console.log(name);
複製程式碼
執行 rollup -c rollup.config.js
,並檢視 bundle.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
typeof define === 'function' && define.amd ? define(factory) :
(factory());
}(this, (function () { 'use strict';
var name = "xiaoming";
console.log(name);
})));
複製程式碼
看到bundle中僅引用了data.json中的name欄位,這是因為rollup會自動進行 Tree-shaking,main.js中僅引入了name,age並沒有沒引用,所以age並不會被打包
rollup基礎外掛
- rollup-plugin-alias: 提供modules名稱的 alias 和reslove 功能
- rollup-plugin-babel: 提供babel能力
- rollup-plugin-eslint: 提供eslint能力
- rollup-plugin-node-resolve: 解析 node_modules 中的模組
- rollup-plugin-commonjs: 轉換 CJS -> ESM, 通常配合上面一個外掛使用
- rollup-plugin-serve: 類比 webpack-dev-server, 提供靜態伺服器能力
- rollup-plugin-filesize: 顯示 bundle 檔案大小
- rollup-plugin-uglify: 壓縮 bundle 檔案
- rollup-plugin-replace: 類比 Webpack 的 DefinePlugin , 可在原始碼中通過 process.env.NODE_ENV 用於構建區分 Development 與 Production 環境.
rollup於其他工具整合
打包npm 模組
於webpack和Browserify不同, rollup 不會去尋找從npm安裝到你的node_modules資料夾中的軟體包;
rollup-plugin-node-resolve
外掛可以告訴 Rollup 如何查詢外部模組
npm install --save-dev rollup-plugin-node-resolve
複製程式碼
打包 commonjs模組
npm中的大多數包都是以CommonJS模組的形式出現的。 在它們更改之前,我們需要將CommonJS模組轉換為 ES2015 供 Rollup 處理。
rollup-plugin-commonjs
外掛就是用來將 CommonJS 轉換成 ES2015 模組的。
請注意,rollup-plugin-commonjs
應該用在其他外掛轉換你的模組之前 - 這是為了防止其他外掛的改變破壞CommonJS的檢測
npm install --save-dev rollup-plugin-commonjs
複製程式碼
使用babel
使用 Babel 和 Rollup 的最簡單方法是使用 rollup-plugin-babel
npm install --save-dev rollup-plugin-babel
複製程式碼
新建.babelrc
{
"presets": [
["latest", {
"es2015": {
"modules": false
}
}]
],
"plugins": ["external-helpers"]
}
複製程式碼
- 首先,我們設定
"modules": false
,否則 Babel 會在 Rollup 有機會做處理之前,將我們的模組轉成 CommonJS,導致 Rollup 的一些處理失敗 - 我們使用
external-helpers
外掛,它允許 Rollup 在包的頂部只引用一次 “helpers”,而不是每個使用它們的模組中都引用一遍(這是預設行為) 執行 rollup之前, 需要安裝latest preset
和external-helpers
外掛
npm i -D babel-preset-latest babel-plugin-external-helpers
複製程式碼
一個簡單的配置項
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import json from 'rollup-plugin-json';
export default {
input: './main.js',
output: {
file: 'bundle.js',
format: 'umd'
},
watch: {
exclude: 'node_modules/**'
},
plugins: [
resolve(),
commonjs(),
json(),
babel({
exclude: 'node_modules/**',
plugins: ['external-helpers'],
}),
],
}
複製程式碼
rollup優勢
- 自動 Tree-shaking(Tree-shaking, 也被稱為 "live code inclusion," 它是清除實際上並沒有在給定專案中使用的程式碼的過程,但是它可以更加高效。)
- 打包速度快
- 配置簡單
rollup VS webpack
rollup更適合構建javascript庫,也可用於構建絕大多數應用程式;但是rollup 還不支援一些特定的高階功能,尤其是用在構建一些應用程式的時候,特別是程式碼拆分和執行時態的動態匯入 dynamic imports at runtime.如果你的專案中需要這些功能,則使用webpack更為適合;