Rollup概述html
插件前端
Code Splitting(代碼拆分)node
多入口打包webpack
這篇文章目前旨在簡單瞭解Rollup
是什麼而且如何上手操做,以後會再進行深刻分析。git
Rollup
僅僅是一款JavaScript
模塊打包器,也稱爲ESM
打包器,並無像webpack
那樣有不少其餘額外的功能,它能夠將項目中散落的細小模塊打包成整塊的代碼,可讓他們更好的運行在瀏覽器環境 or Node.js環境 ,目前Vue2.0
源碼使用的打包器就是Rollup
。github
Rollup
與Webpack
做用相似,可是Rollup
更爲小巧,webpack
能夠在前端開發中完成前端工程化的絕大多數功能,而Rollup
僅僅是一款ESM
打包器,並無其餘額外的功能。web
Rollup
中並不支持相似HMR
這種高級特性。可是Rollup
誕生的目的並非要與webpack
全面競爭,其初衷只是提供一個高效的ES Modules
的打包器,充分利用ESM
的各項特性構建出結構比較扁平,性能比較出衆的類庫。npm
npm i rollup -g
rollup ./src/index.js --format iife --file dist/bundle.js
能夠看到在輸出目錄中有了一個文件夾,裏面的文件輸出的文件很乾淨整潔,而且沒有引用的模塊並無打包進去(自帶Tree-shaking
)
--format
—— 指定輸出文件打包格式,例如:iife
是自調用函數--file
—— 輸出文件,後面跟打印路徑,不寫會打印到控制檯
建立名稱爲rollup.config.js
文件,一樣運行在node.js
環境中,由於Rollup
會單獨處理這個文件,因此咱們能夠直接使用ES Module
。json
// rollup.config.js // 這個文件中會導出一個配置對象 export default { // input 是打包入口文件路徑 input: 'src/index.js', // 輸出配置 output: {、 // 輸出路徑及文件名 file: 'dist/bundle.js', // 輸出格式 format: 'iife' } }
--config
說要使用配置文件rollup --config
,默認是不使用配置文件的。rollup --config <filename>
後面能夠指定配置文件的名稱,默認是rollup.config.js
,也能夠本身指定別的文件名。若是要加載其餘類型的資源文件,或者是導入CommonJS
模塊,或者編譯ES6
新特性,Rollup
一樣支持使用插件的方式擴展。前端工程化
插件是Rollup
惟一擴展途徑,這個與webpack
有所不一樣,webpack
有plugins
、module
、optimization
三種途徑。
rollup-plugin-json
是一個導入JSON
文件的插件。
npm i rollup-plugin-josn --save-dev
rollup-plugin.js
中配置插件// 默認導出是一個插件函數 import json from 'rollup-plugin-json' export default { input: 'src/index.js', output: { file: 'dist/bundle.js', format: 'iife' }, plugins: [ // 是調用結果放在數組中,而不是函數放進去 json() ] }
src/index.js
中調用,打包以後能夠看到json
裏面的變量已經打包進來了。// 導入模塊成員 import { log } from './logger' import { name, version} from '../package.json' log(name) // var name = "first"; log(version) // var version = "1.0.0";
rollup
默認只能按照路徑的方式加載本地模塊,對於第三方模塊並不能想webpack
同樣經過名稱導入,因此須要經過插件處理。
npm i rollup-plugin-node-resolve --save-dev
rollup-plugin.js
中配置插件// 默認導出是一個插件函數 import json from 'rollup-plugin-json' import resolve from 'rollup-plugin-node-resolve' export default { ... plugins: [ // 是調用結果放在數組中,而不是函數放進去 json(), resolve() ] }
npm i lodash-es
src/index.js
中調用,能夠看到lodash-es
的相關代碼也導入進去了// 導入模塊成員,這裏可使用node名稱來導入而不是路徑 import _ from 'lodash-es' import { log } from './logger' log(_.camelCase('hello world'))
PS:
這裏使用lodash
的ES Modules
版本而不是其餘版本的緣由是由於rollup
默認只能處理ES Modules
模塊,若是要引用其餘版本咱們須要作額外的處理。
加載CommonJS
模塊,目前仍是有大量的npm
模塊使用CommonJS
的方式導入成員,爲了兼容就有了這個官方插件。
npm i rollup-plugin-commonjs --save-dev
rollup-plugin.js
中配置插件import commonjs from 'rollup-plugin-commonjs' export default { ... plugins: [ commonjs() ] }
cjs.module.js
,編寫文件module.exports = { foo: bar }
src/index.js
中引入,能夠看到變量已經打包進去。// 導入模塊成員 import { log } from './logger' import cjs from './cjs.module' log(cjs) /* var cjs_module = { foo: bar }; */
動態導入,rollup
內部會自動處理代碼分包,
代碼拆分
src/index.js
中引入// import函數返回一個promise對象 // then方法參數是module,因爲模塊導出的成員都會放在module對象中,因此能夠經過解構的方式提取log import('./logger').then(({ log }) => { log('code splitting~') })
roll.config.js
中output
裏面的配置export default { // input 是打包入口文件路徑 input: 'src/index.js', // 輸出配置 output: { // 輸出目錄名稱 dir: 'dist', // 輸出格式 format: 'amd' } }
不修改配置文件直接運行rollup --config
會報錯
UMD
和iife
是不支持代碼拆分方式格式,由於自執行函數會把全部的模塊都放到一個函數中,並無像webpack
同樣有一些引導代碼,因此沒有辦法作到代碼拆分若是要使用代碼拆分,就須要使用
AMD
orCommonJS
等方式。在瀏覽器中只能使用AMD
的方式,因此這裏改用輸出格式爲AMD
何況咱們拆分代碼輸出不一樣的文件,
file
屬性只是針對一個文件,因此咱們須要改用dir
去指定文件夾名稱,否則仍是會報錯
rollup --config
能夠看到dist
文件夾裏面有兩個拆分打包的文件。rollup
支持多入口打包,對於不一樣文件的公共部分也會自動提取到單個文件中做爲獨立的bundle.js
album
和index
都引用了fetch.js
和logger.js
的代碼,咱們對rollup.config.js
進行修改export default { // 這裏input要改爲數組形式或者對象形式,對象形式能夠修改打包的文件名,鍵對應的就是打包的文件名 // input: ['src/index.js', 'src/album.js'], input: { indexjs: 'src/index.js', albumjs: 'src/album.js' }, // 輸出配置要改爲拆分包的配置,覺得多入口打包默認會執行打包拆分的特性。因此輸出格式要改爲amd output: { dir: 'dist', format: 'amd' } }
rollup --config
能夠看到dist
裏面生成了三個文件,其中兩個文件打包和一個公共模塊的打包,裏面包含了logger
和fetch
模塊
對於amd
輸出格式的打包文件是不能直接引用到頁面上,必須經過實現AMD
標準的庫去加載。
嘗試使用一下
dist
下面生成一個HTML
文件,嘗試引入requirejs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!--requirejs的cdn地址,data-main是入口文件的名稱--> <script src="https://unpkg.com/requirejs@2.3.6/bin/r.js" data-main="albumjs.js"></script> </body> </html>
--format
—— 指定輸出文件打包格式,例如:iife
是自調用函數--file
—— 輸出文件,後面跟打印路徑,不寫會打印到控制檯--config
—— 指定使用配置文件,後面能夠加指定配置文件的名稱,rollup --config <filename>
,默認是rollup.config.js
。