10分鐘快速入門rollup.js

sam9831發表於2019-03-03

為什麼要學習rollup.js

rollup.js是Javascript的ES模組打包器，我們熟知的Vue、React等諸多知名框架或類庫都通過rollup.js進行打包。與Webpack偏向於應用打包的定位不同，rollup.js更專注於Javascript類庫打包（雖然rollup.js也可以提供資源打包，但顯然這不是它的強項）。在我們學習Vue和React等框架原始碼或者自己編寫Javascript類庫時，rollup.js是一條必經之路。

rollup.js的工作原理

rollup.js可以將我們自己編寫的Javascript程式碼（通過外掛可以支援更多語言，如Tyepscript）與第三方模組打包在一起，形成一個檔案，該檔案可以是一個庫（Library）或者一個應用（App），在打包過程中可以應用各類外掛實現特定功能。下圖揭示了rollup.js的執行機制：

rollup.js預設採用ES模組標準，我們可以通過rollup-plugin-commonjs外掛使之支援CommonJS標準。

安裝rollup.js

rollup.js的安裝依賴於nodejs，之前的手記中我曾詳細介紹如何通過nvm管理nodejs版本，需要了解的小夥伴可以點選這裡

全域性安裝rollup.js

首先全域性安裝rollup：

npm i rollup -g
複製程式碼

rollup.js打包例項

安裝成功後，我們嘗試使用rollup做一個簡單的案例，建立src目錄：

mkdir src
複製程式碼

在src目錄下建立a.js：

vim src/a.js
複製程式碼

寫入如下程式碼，這個模組非常簡單，僅僅對外暴露一個變數a：

const a = 1
export default a
複製程式碼

在src目錄下再建立main.js：

vim src/main.js
複製程式碼

寫入如下程式碼，這個模組會引入模組a，並對外暴露一個function：

import a from './a.js'
  
export default function() {
  console.log(a)
}
複製程式碼

通過rollup指令，我們可以快速地預覽打包後的原始碼，這點和babel非常類似：

$ rollup src/main.js -f es

src/main.js  stdout...
const a = 1;

function main() {
  console.log(a);
}

export default main;
created stdout in 26ms
複製程式碼

需要注意的是rollup必須帶有-f引數，否則會報錯：

$ rollup src/main.js

src/main.js  stdout...
[!] Error: You must specify output.format, which can be one of 'amd', 'cjs', 'system', 'esm', 'iife' or 'umd'
https://rollupjs.org/guide/en#output-format-f-format
複製程式碼

rollup的報錯提示非常棒，非常有利於我們定位錯誤和修復問題。通過上面的錯誤提示，我們瞭解到-f的值可以為'amd'、'cjs'、'system'、'esm'（'es'也可以）、'iife'或'umd'中的任何一個。-f引數是--format的縮寫，它表示生成程式碼的格式，amd表示採用AMD標準，cjs為CommonJS標準，esm（或es）為ES模組標準。接著我們把這段程式碼輸出到一個檔案中：

$ rollup src/main.js -f es -o dist/bundle.js

src/main.js  dist/bundle.js...
created dist/bundle.js in 29ms
複製程式碼

引數-o指定了輸出的路徑，這裡我們將打包後的檔案輸出到dist目錄下的bundle.js，這個檔案內容與我們之前預覽的內容是完全一致的。我們再輸出一份CommonJS格式的程式碼：

$ rollup src/main.js --format cjs --output.file dist/bundle-cjs.js

src/main.js  dist/bundle-cjs.js...
created dist/bundle-cjs.js in 27ms
複製程式碼

引數--output.file是-o的全稱，它們是等價的，輸出後我們在dist目錄下會多一個bundle-cjs.js檔案，檢視這個檔案的內容：

'use strict';
  
const a = 1;

function main() {
  console.log(a);
}

module.exports = main;
複製程式碼

可以看到程式碼採用CommonJS標準編寫，並且將a.js和main.js兩個檔案進行了融合。

驗證rollup.js打包結果

在打包成功後，我們嘗試執行dist/bundle-cjs.js程式碼：

$ node
> const m = require('./dist/bundle-cjs.js')
> m()
1 
複製程式碼

我們接著嘗試執行之前輸出的ES標準程式碼dist/bundle.js，由於nodejs並不支援ES標準，直接執行會報錯：

$ node
> require('./dist/bundle.js')()
/Users/sam/Desktop/rollup-test/dist/bundle.js:7
export default main;
^^^^^^

SyntaxError: Unexpected token export
複製程式碼

babel為我們提供了一個工具：babel-node，它可以在執行時將ES標準的程式碼轉換為CommonJS格式，從而使得執行ES標準的程式碼成為可能，首先全域性安裝babel-node及相關工具，@babel/node包含babel-node，@babel/cli包含babel，而這兩個工具都依賴@babel/core，所以建議都安裝：

npm i @babel/core @babel/node @babel/cli -g
複製程式碼

這裡要注意的是babel 7改變了npm包的名稱，之前的babel-core和babel-cli已經被棄用，所以安裝老版本babel的同學建議先解除安裝：

npm uninstall babel-cli babel-core -g
複製程式碼

然後到程式碼的根目錄下，初始化專案：

npm init
複製程式碼

一路回車後，在程式碼根目錄下建立babel的配置檔案.babelrc，寫入如下配置

{
  "presets": ["@babel/preset-env"]
}
複製程式碼

完成babel配置後安裝babel的依賴：

npm i -D @babel/core @babel/preset-env
複製程式碼

嘗試通過babel編譯程式碼：

$ babel dist/bundle.js 
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var a = 1;

function main() {
  console.log(a);
}

var _default = main;
exports.default = _default;
複製程式碼

可以看到ES模組程式碼被編譯成了CommonJS格式，下面通過babel-node執行程式碼：

$ babel-node 
> require('./dist/bundle.js')
{ default: [Function: main] }
> require('./dist/bundle.js').default()
1
複製程式碼

注意babel會認為export default function()是一個名稱為default的函式，如果想更改這個函式名稱，可以修改main.js：

import a from './a.js'
  
export function test() {
  console.log(a)
}
複製程式碼

重寫打包後通過babel-node執行：

$ rollup -f es --file dist/bundle.js src/main.js 

src/main.js  dist/bundle.js...
created dist/bundle.js in 26ms

$ babel-node 
> require('./dist/bundle.js').test()
1
複製程式碼

注意這裡的--file定價於-o和--output.file，通過上述案例，我們完成了rollup打包的基本操作，並驗證了打包結果。但很多時候我們不會這樣操作，因為直接使用命令列功能單一，而且無法使用外掛，所以我們需要藉助配置檔案來操作。

rollup.js配置檔案

首先在程式碼根目錄下建立rollup.config.js檔案：

touch rollup.config.js
複製程式碼

寫入如下配置：

export default {
  input: './src/main.js',
  output: [{
    file: './dist/index-cjs.js',
    format: 'cjs',
    banner: '// welcome to imooc.com',
    footer: '// powered by sam'
  }, {
    file: './dist/index-es.js',
    format: 'es',
    banner: '// welcome to imooc.com',
    footer: '// powered by sam'
  }]
}
複製程式碼

rollup的配置檔案非常容易理解，這裡有幾點需要說明：

rollup的配置檔案需要採用ES模組標準編寫
input表示入口檔案的路徑（老版本為entry，已經廢棄）
output表示輸出檔案的內容，它允許傳入一個物件或一個陣列，當為陣列時，依次輸出多個檔案，它包含以下內容：
- output.file：輸出檔案的路徑（老版本為dest，已經廢棄）
- output.format：輸出檔案的格式
- output.banner：檔案頭部新增的內容
- output.footer：檔案末尾新增的內容

通過rollup -c指令進行打包，rollup.js會自動尋找名稱為rollup.config.js的配置檔案：

$ rollup -c

./src/main.js  ./dist/index-cjs.js, ./dist/index-es.js...
created ./dist/index-cjs.js, ./dist/index-es.js in 13ms
複製程式碼

檢視dist/index-es.js檔案：

// welcome to imooc.com
const a = 1;

function test() {
  console.log(a);
}

export { test };
// powered by sam
複製程式碼

程式碼的內容與命令列生成的無異，但頭部和末尾新增了自定義的註釋資訊。接著我們修改配置檔案的名稱，並通過-c引數指定配置檔案進行打包：

$ mv rollup.config.js rollup.config.dev.js
$ rollup -c rollup.config.dev.js 

./src/main.js  ./dist/index-cjs.js, ./dist/index-es.js...
created ./dist/index-cjs.js, ./dist/index-es.js in 13ms
複製程式碼

rollup.js api打包

編寫rollup.js配置

很多時候命令列和配置檔案的打包方式無法滿足需求，我們需要更加個性化的打包方式，這時我們可以考慮通過rollup.js的api進行打包，建立rollup-input-options.js，這是輸入配置，我們單獨封裝一個模組，提高複用性和可擴充套件性：

touch rollup-input-options.js
複製程式碼

在輸入配置檔案中加入以下內容，需要注意的是這個檔案必須為CommonJS格式，因為需要使用nodejs來執行：

module.exports = {
  input: './src/main.js'
}
複製程式碼

再新增一個輸出配置檔案：

touch rollup-output-options.js
複製程式碼

在輸出配置檔案我們仍然使用一個陣列，實現多種檔案格式的輸出，需要注意的是umd格式必須指定模組的名稱，通過name屬性來實現：

module.exports = [{
  file: './dist/index-cjs.js',
  format: 'cjs',
  banner: '// welcome to imooc.com',
  footer: '// powered by sam'
}, {
  file: './dist/index-es.js',
  format: 'es',
  banner: '// welcome to imooc.com',
  footer: '// powered by sam',
}, {
  file: './dist/index-amd.js',
  format: 'amd',
  banner: '// welcome to imooc.com',
  footer: '// powered by sam',
}, {
  file: './dist/index-umd.js',
  format: 'umd',
  name: 'sam-umd', // 指定檔名稱
  banner: '// welcome to imooc.com',
  footer: '// powered by sam',
}]
複製程式碼

編寫rollup.js build程式碼

接下來我們要在當前專案中安裝rollup庫：

npm i -D rollup
複製程式碼

建立一個rollup-build檔案，通過這個檔案來呼叫rollup的api：

touch rollup-build.js
複製程式碼

rollup-build的原始碼如下：

const rollup = require('rollup')
const inputOptions = require('./rollup-input-options')
const outputOptions = require('./rollup-output-options')

async function rollupBuild(input, output) {
  const bundle = await rollup.rollup(input) // 根據input配置進行打包
  console.log(`正在生成：${output.file}`)
  await bundle.write(output) // 根據output配置輸出檔案
  console.log(`${output.file}生成成功！`)
}

(async function () {
  for (let i = 0; i < outputOptions.length; i++) {
    await rollupBuild(inputOptions, outputOptions[i])
  }
})()
複製程式碼

程式碼的核心有兩點：

通過rollup.rollup(input)得到打包物件
通過bundle.write(output)輸出打包檔案

這裡我們還可以通過async和await實現同步操作，因為bundle.write(output)是非同步的，會返回Promise物件，我們可以藉助async機制實現按配置順序依次打包。執行rollup-build檔案：

$ node rollup-build.js 
正在生成：./dist/index-cjs.js
./dist/index-cjs.js生成成功！
正在生成：./dist/index-es.js
./dist/index-es.js生成成功！
正在生成：./dist/index-amd.js
./dist/index-amd.js生成成功！
正在生成：./dist/index-umd.js
./dist/index-umd.js生成成功！
複製程式碼

檢視dist/index-umd.js檔案：

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global['sam-umd'] = {})));
}(this, (function (exports) {
	// ...
}
複製程式碼

可以看到index-umd.js檔案中在global全域性變數中新增了sam-umd屬性，這就是我們之前需要在umd配置中新增name屬性的原因。

總結

本文向大家介紹了rollup.js的三種打包方式：命令列、配置檔案和API，在下一篇教程中我將繼續為大家介紹更多rollup.js的特性，如Tree-shaking、watch等，還會詳細演示各種外掛的用途及用法，敬請關注。

10分鐘快速進階rollup.js
2018-11-21
JS
10分鐘快速入門Redis
2017-07-18
Redis
10分鐘快速精通rollup.js——前置學習之rollup.js外掛篇
2018-11-23
JS
10 分鐘快速入門：HTTP快取
2018-12-22
HTTP快取
20分鐘gulp快速入門
2019-02-16
UML類圖10分鐘快速入門 - From 聖傑
2017-07-03
30 分鐘快速入門 Docker 教程
2019-04-09
Docker
Webpack 10分鐘入門
2018-10-21
Web
JavaScript 10分鐘入門
2016-03-28
JavaScript
10分鐘快速精通rollup.js——Vue.js原始碼打包原理深度分析
2018-11-23
Vue.js原始碼
10分鐘快速精通rollup.js——前置學習之基礎知識篇
2018-11-23
JS
十分鐘快速入門 Python
2019-01-22
Python
Vue.js 60 分鐘快速入門
2016-08-11
Vue.js
Docker三十分鐘快速入門（下）
2018-01-12
Docker
Lua 語言 15 分鐘快速入門
2014-06-06
5分鐘打通rollup.js副本
2019-07-02
JS
40分鐘快速入門Dart基礎（下）
2020-07-21
Dart
40分鐘快速入門Dart基礎（中）
2020-07-14
Dart
Dart語言——45分鐘快速入門（下）
2019-05-15
Dart
Dart語言——45分鐘快速入門（上）
2019-05-15
Dart
Vue.js——60分鐘元件快速入門（上篇）
2016-08-30
Vue.js元件
Vue.js——60分鐘元件快速入門（下篇）
2016-08-30
Vue.js元件
快速入門：十分鐘學會Python
2017-02-15
Python
HDFS+MapReduce+Hive+HBase十分鐘快速入門
2014-05-07
Hive
emacs最簡單入門，只要10分鐘
2015-07-26
Mac
30分鐘入門MyBatis
2019-03-03
MyBatis
5分鐘入門AWK
2019-01-04
三分鐘帶你快速入門極簡色彩學
2015-09-15
三分鐘幫你快速入門極簡色彩學
2015-11-12
10分鐘go crawler colly從入門到精通
2022-04-01
Go
10分鐘入門Shell指令碼程式設計
2018-01-22
指令碼程式設計
Go 語言基礎教程：10分鐘入門
2014-09-28
Go
10分鐘快速上手angular cdk
2018-04-07
Angular
一分鐘sed入門（一分鐘系列）
2018-05-10
5分鐘帶你快速入門和了解 OAM Kubernetes
2020-07-15
jQuery簡明參考手冊——30分鐘快速入門jQuery
2016-05-31
jQuery
【譯】30 分鐘入門 Typescript
2019-01-25
TypeScript
十分鐘入門 Less
2016-12-12