介紹
rollup
採用es6原生的模組機制進行模組的打包構建,rollup
更著眼於未來,對commonjs模組機制不提供內建的支援,是一款更輕量的打包工具。本文從實踐的角度對rollup
做一個基礎的入門介紹, 有問題也歡迎大家一起來探討。
安裝
在本地開發環境安裝rollup
。
npm i rollup -D
複製程式碼
使用
使用方法與webpack非常相似,通常都是命令列來實現打包,當然在實際的應用中,我們經常使用npm script 進行包裝。
在src
目錄下有foo.js
:
// src/foo.js
export default 'hello world!';
複製程式碼
和作為入口檔案的main.js
:
// src/main.js
import foo from './foo.js';
export default function () {
console.log(foo);
}
複製程式碼
在專案根目錄下使用rollup
對main.js
進行打包:
rollup src/main.js --o dist/bundle.js --f cjs
複製程式碼
上面的命令表示rollup
對main.js
進行打包,--o
引數指定了打包後的檔名及存放目錄。--f
引數指定打包構建後的檔案是commonjs規範的檔案。
使用配置檔案
在命令列中通過引數形式去設定rollup
的行為,不是很方便。如webpack
一樣,我們通常使用一個rollup.config.js
的配置檔案來更靈活地定製rollup
的行為。
上述命令列實現的功能我們可以在配置檔案中這樣配置:
// rollup.config.js
export default {
input: 'src/main.js',
output: {
file: './dist/bundle.js',
format: 'cjs'
}
};
複製程式碼
此外,我們在package.json
中封裝一個npm script:
"scripts": {
"build": "rollup -c"
}
複製程式碼
-c
引數指定rollup
構建時使用的配置檔案,如果預設的話,預設會使用根目錄下的rollup.config.js
。
在終端中執行命令:
npm run build
複製程式碼
搭配babel
rollup
的模組機制是ES6 Modules,但並不會對es6其他的語法進行編譯。因此如果要使用es6的語法進行開發,還需要使用babel
來幫助我們將程式碼編譯成es5。
這種強需求,rollup
當然提供瞭解決方案。
首先是安裝rollup-plugin-babel
,該外掛將rollup
和babel
進行了完美結合。
npm i -D rollup-plugin-babel
複製程式碼
在rollup.config.js
中配置如下:
// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
export default {
input: 'src/main.js',
output: {
file: './dist/bundle.js',
format: 'cjs'
}
plugins: [
babel({
// babelrc: false,
exclude: 'node_modules/**' // only transpile our source code
})
]
};
複製程式碼
同時在babel
的配置檔案.babelrc
中配置如下:
{
"presets": [
["env", {
"modules": false
}]
],
"plugins": ["external-helpers"]
}
複製程式碼
我們用到了babel
的一個功能集env
,和external-helpers
外掛。babel會按照env
和external-helpers
指定的功能去完成編譯工作。
配置"modules": false
是因為rollup
會處理es6模組語法,其餘的es6語法才由babel
處理。
external-helpers
, 是為了避免在每個模組的頭部重複引用相同的"helpers"方法,只需要在構建完的bundle頭部引入一次就夠了。
當然使用之前我們得先安裝:
npm i -D babel-preset-env babel-plugin-external-helpers
複製程式碼
貌似還需要安裝
babel-core
相容commonjs
npm
生態已經繁榮了多年,commonjs規範作為npm
的包規範,大量的npm
包都是基於commonjs規範來開發的,因此在完美支援es6模組規範之前,我們仍舊需要相容commonjs模組規範。rollup
提供了外掛rollup-plugin-commonjs
,以便於在rollup
中引用commonjs規範的包。該外掛的作用是將commonjs模組轉成es6模組。rollup-plugin-commonjs
通常與rollup-plugin-node-resolve
一同使用,後者用來解析依賴的模組路徑。
安裝:
npm install --save-dev rollup-plugin-commonjs rollup-plugin-node-resolve
複製程式碼
在rollup.config.js
中進行配置:
// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
export default {
input: 'src/main.js',
output: {
file: './dist/bundle.js',
format: 'cjs'
}
plugins: [
resolve(),
commonjs(),
babel({
exclude: 'node_modules/**' // only transpile our source code
})
]
};
複製程式碼
tree shaking
tree shaking是rollup
除es6模組外的另一個核心賣點,當然這個特性在webpack
中也有實現。tree shaking的優點毋庸多言了,結合es6模組,對程式碼進行靜態分析,能更有效地剔除冗餘的程式碼,減小js檔案的大小。一句話,大家多多使用就對了。
總結
號稱下一代打包工具的rollup
基於es6模組系統,同時支援tree shaking,配置上相對輕量。針對js庫級別的應用非常適合使用rollup
。對應業務場景豐富的應用,如需要各種loader來處理圖片、css、字型等、需要按需載入,程式碼分割還是webpack更適合。大家可以視具體應用場景選擇。