經驗教程：Rollup.js模塊打包器

做者：曾啓澔

前言：

爲何要模塊化

通常狀況下，單一的中小型項目沒有將本身模塊化打包的必要。然而在實際工做或者開源項目開發的場合下，每每會有須要將當前項目或者其中一部分功能性代碼在其餘項目中使用的場景。若僅僅簡單的對代碼的複製黏貼，會對代碼的管理以及後續開發改進產生極大的不便，代碼每有改動就須要在各個項目中保持同步更新，很是不便。此時對代碼進行模塊化打包是一個很是值得考慮的手段，模塊化後的代碼能很是便利的在其餘項目中進行使用，並解決了代碼內容變更產生的差別化問題。

模塊化的好處

· 項目組建分割化開發，下降複雜度

· 開發通用Library、可於多個不一樣項目中應用同一處理模塊

· 可以輕鬆植入到第三方代碼中

關於Rollup：

Rollup.js是什麼

Rollup是一個目前較爲流行的JavaScript模塊打包器。常見的JavaScript的開源程序及Library的模塊化打包都是用到了Rollup。

Rollup.js的特色

· 兼容性高：能夠自由打包成目前常規的模塊類型（如CommonJS和ES6），兼容各個瀏覽器標準

· 統一處理：可對全體代碼（包括引用模塊）的語法格式統一，糾錯，進行統一處理

· 壓縮：對代碼進行壓縮處理，產出更小容量的代碼文件插件：龐大的插件庫，並支持自定義插件開發

· 龐大的插件庫

· 打包速度快、配置簡單

開始Rollup

Rollup.js的安裝

安裝Rollup前，首先須要安裝Node.js。具體方法請參考官方文檔。

1. 全局安裝：

npm install rollup -g

安裝完後能夠經過如下命令確認是否安裝成功，若顯示版本號說明能夠正常使用Rollup了。

rollup -version

2. 項目中安裝（推薦）：

通常來講，爲了保證在任何環境下都能正常進行模塊化打包，採起在項目中安裝依賴的作法更爲經常使用。於項目根目錄執行如下代碼，將rollup於當前項目中。此舉保證了rollup的版本統1、確保正常的打包。

npm install rollup –save-dev

Rollup.js基本命令

rollup ./index.js -o dist/index_es.js -f es

在項目中安裝的場合爲

./node_modules/.bin/rollup ./index.js -o dist/index_es.js -f es

該命令的意思爲將文件index.js打包爲ES6模塊後保存到dist/index_es.js。

*更多命令行參數請參考官方文檔：命令行參數

Rollup.js配置文件

雖然經過命令行，咱們可使用rollup全部的功能。可是由於自定義打包須要對多種插件、環境進行配置，所有采用命令並非一種聰明的手段。這裏建議使用Rollup配置文件，方便設置的管理和統一。方法很簡單，在項目根目錄中創建一個名爲rollup.config.js的配置文件。

// rollup.config.js

export default [ {

input: 'src/***/[target.js] ', // 須要模塊化打包的目標文件

output: [ {

file: ***/[output].js', // 輸出路徑及輸出文件名

format: 'es' // 輸出類型（amd, cjs, es, iife, umd）

}],

external: […], // 外鏈列表（可選）

plugins: […] // 插件列表（可選）

}];

創建了文件後，經過命令行選擇配置文件進行打包

rollup -c -o bundle-2.js

*想了解更多配置文件內容，請參考官方文檔：配置文件

Rollup.js打包示例

1. 建立一個須要模塊化的入口文件index.js：

// index.js

import { Now } from './lib'

Now()

2. 建立引用的依賴文件lib.js：

// lib.js

export const Now = () => {

console.log('Now:', new Date())

}

3. 使用命令行進行打包

rollup ./index.js -o dist/index_es.js -f es

4. 輸出dist/index_es.js內容以下

const Now = () => {

console.log('Now:', new Date());

};

Now();

5. Rollup配置文件rollup.config.js

// rollup.config.js

export default [

{

input: './index.js',

output: [

{

file: 'dist/index_cjs.js',

format: 'cjs'

},

{

file: 'dist/index_es.js',

format: 'es'

}

]

}

]

6. 執行命令行 rollup -c

7. 分別生產cjs形式的模塊文件./dist/index_cjs.js和es形式文件./dist/index_es.js。

模塊化後可在其餘項目中的html head中導入

進階-Rollup的插件：

Rollup的一大優點就是擁有強大的插件庫可供選擇。用戶能夠根據自身須要，安裝對應插件實現代碼糾錯、規範化、壓縮、uglify以及對vue、react等主流框架代碼進行編譯和打包。

這裏介紹一些經常使用插件：

· rollup-plugin-clear：用於在打包前對輸出目錄進清掃，刪除不須要的文件或者清空目錄

· rollup-plugin-alias：modules名稱的 alias 和reslove 功能

· rollup-plugin-babel：babel語法編譯

· rollup-plugin-eslint：eslint代碼語法規範及糾錯

· rollup-plugin-terser：代碼壓縮用插件

· rollup-plugin-node-resolve：解析 node_modules 中的模塊

· rollup-plugin-commonjs：轉換 cjs

· rollup-plugin-replace：用於環境變量參數的替換

經過npm install以上模塊後，能夠經過從新配置rollup.config.js文件，實現插件功能。（其中babel插件還須要安裝babel依賴並在config中配置babel插件）

const path = require('path');

import replace from 'rollup-plugin-replace';

import alias from 'rollup-plugin-alias';

import nodeResolve from 'rollup-plugin-node-resolve';

import flow from 'rollup-plugin-flow-no-whitespace';

import babel from 'rollup-plugin-babel';

import commonjs from 'rollup-plugin-commonjs';

import globals from 'rollup-plugin-node-globals';

import builtins from 'rollup-plugin-node-builtins';

import clear from 'rollup-plugin-clear';

import { terser } from 'rollup-plugin-terser';

export default [

{

input: './index.js',

output: [

{

file: 'dist/index_cjs.js',

format: 'cjs'

},

{

file: 'dist/index_es.js',

format: 'es'

}

],

external: [ 'fs' ],

plugins: [

replace({

ENV: JSON.stringify(process.env.NODE_ENV || 'production')

}),

alias({

resolve: ['.js'],

'~': path.resolve(__dirname, 'src/scripts/')

}),

clear({

targets: ['dist']

}),

nodeResolve(),

babel({

babelrc: false,

comments: false,

sourceMap: false,

presets: [

['@babel/preset-env']

],

plugins: [

['@babel/plugin-syntax-dynamic-import'],

['@babel/plugin-proposal-class-properties'],

['@babel/plugin-proposal-export-namespace-from'],

['@babel/plugin-proposal-throw-expressions']

],

exclude: 'node_modules/**',

runtimeHelpers: true

}),

commonjs(),

globals(),

builtins(),

flow(),

terser({

toplevel: true,

compress: {

passes: 2

},

mangle: true,

output: {

ascii_only: true,

beautify: false,

preamble: '/* minified */'

}

})

]

},

];

以上配置文件配置了babel、alias、clear、nodeResolve、commonjs、globals、flow、terser等插件，運行結果以下：

/* minified */

console.log("Now:",new Date);

小結

Rollup可使你的程序打包後以模塊形式加載於其餘項目中

Rollup能夠打包輸出各類主流類型模塊格式，兼容性稿

Rollup能夠經過安裝插件，對vue、react等主流框架編寫的程序進行打包

Rollup能夠經過安裝插件實現代碼規範化、差錯、壓縮、uglify。可操做性強