[[405734]]

本文轉(zhuǎn)載自微信公眾號(hào)「勾勾的前端世界」，作者西嶺。轉(zhuǎn)載本文請(qǐng)聯(lián)系勾勾的前端世界公眾號(hào)。

概述(Overview)

Rollup 是一個(gè) JavaScript 模塊打包器，可以將小塊代碼編譯成大塊復(fù)雜的代碼。Rollup 對(duì)代碼模塊使用新的 ES Module 標(biāo)準(zhǔn)，而不是以前的社區(qū)模塊化方案，如CommonJS 和 AMD。ES6 模塊已經(jīng)被現(xiàn)代化瀏覽器原生實(shí)現(xiàn)，2020 年 Vue 作者發(fā)布了 Vite ，定義為下一代前端開(kāi)發(fā)與構(gòu)建工具，目的是取代依賴 Webpack 打包的各種構(gòu)建工具，而 Vite 的模塊化工具使用的就是 Rollup。

快速入門

使用 npm install --global rollup 進(jìn)行安裝, 運(yùn)行 rollup --help 可以查看可用的選項(xiàng)和參數(shù)。

幫助信息中的提示: Usage: rollup [options] 就展示了 Rollup 的基本用法。我們準(zhǔn)備三個(gè)文件 index.js 為入口主文件, 然后使用 ES6 模塊化語(yǔ)法引入 user.js 和 message.js 文件,并在 mian.js 中使用兩個(gè)文件導(dǎo)出的數(shù)據(jù)內(nèi)容。

// ======= index.js ============ 
import msg from'./message' 
import {names} from'./user' 
 
console.log(names()) 
console.log(msg) 
console.log('Rollup Test Code') 
 
// ======== message.js =========== 
 
exportdefault { 
  hi:'Hey ' 
} 
 
// ======== user.js =========== 
 
exportconst names = () => { 
  console.log('xiling') 
} 
 
exportconst ages = () => { 
  console.log(666) 
} 

命令行終端執(zhí)行: rollup index.js

$ rollup index.js 
 
index.js → stdout... 
var msg = { 
  hi: 'Hey ' 
}; 
 
const names = () => { 
 console.log('xiling'); 
}; 
 
console.log(names()); 
console.log(msg); 
console.log('Rollup Test Code'); 

在命令終端中，我們能看到最終打包后的編譯代碼被打印出來(lái)了。我們需要的是將小塊的文件代碼打包到一個(gè)大的文件中。想要實(shí)現(xiàn)效果,只需要在命令中添加指定的命令參數(shù)即可: rollup index.js --file bundle.js，生成 bundle.js 文件，代碼如下:

var msg = { 
  hi:'Hey ' 
}; 
 
const names = () => { 
  console.log('xiling'); 
}; 
 
console.log(names()); 
console.log(msg); 
console.log('Rollup Test Code'); 

我們看到打包后的代碼非常簡(jiǎn)潔，就是將需要運(yùn)行的代碼按照順序拼裝到一起。注意，是只會(huì)保留用到的代碼。這就是Rollup 最早提出的 Tree-shaking 特性，后來(lái)幾乎被所有打包工具參考引入。

什么是 Tree-shaking 呢? 基本原理非常簡(jiǎn)單，Rollup 在打包的過(guò)程中, 靜態(tài)分析代碼中的 import，只引入最基本最精簡(jiǎn)代碼，并將排除任何未實(shí)際使用的代碼。所以可以生成輕量、快速，以及低復(fù)雜度的 library 和應(yīng)用程序。

配置文件

我們一般在命令行中使用 Rollup。你也可以提供一份配置文件(可要可不要)來(lái)簡(jiǎn)化命令行操作，同時(shí)還能啟用 Rollup 的高級(jí)特性。配置文件是一個(gè)ES6模塊，它對(duì)外暴露一個(gè)對(duì)象，這個(gè)對(duì)象包含了一些 Rollup 需要的選項(xiàng)。通常，我們把這個(gè)配置文件叫做rollup.config.js，它通常位于項(xiàng)目的根目錄。

注意：Rollup 本身會(huì)處理配置文件，所以可以使用 export default 語(yǔ)法——代碼不會(huì)經(jīng)過(guò) Babel 等類似工具編譯，所以只能使用所用Node.js 版本支持的 ES2015 語(yǔ)法。

配置選項(xiàng)列表：https://www.rollupjs.com/guide/big-list-of-options

// rollup.config.js 
exportdefault { 
  // 包的入口點(diǎn) (例如：你的 main.js 或者 index.js) 
  input:'index.js', 
  // 出口配置 
  output:{ 
    file:'budle.js',//打包到那個(gè)文件 
    format:'esm'// 生成包的格式 
  } 
} 

輸入：input[string]: 'index.js' 這個(gè)包的入口點(diǎn)(例如：你的 main.js 或者 app.js 或者 index.js)

輸出：output[object]:{}

output.file[string]: 'bundle.js' 要寫(xiě)入的文件。也可用于生成 sourcemaps，如果適用

output.format[string] :'iife' 生成包的格式。包格式選項(xiàng)可以是下面的任意一個(gè)：

amd – 異步模塊定義，用于像 RequireJS 這樣的模塊加載器

cjs – CommonJS，適用于 Node 和 Browserify/Webpack

esm – 將軟件包保存為 ES 模塊文件，在現(xiàn)代瀏覽器中可以通過(guò)