Saturday, Apr 11, 2026

使用 Rollup 構建你的 Library

2018/03/04 來源：知乎專欄

Rollup, 和 Webpack, Precel 都是模塊打包工具(module bundler tool), 但是側重點不同, 我們要聊的 Rollup 更加適合用於構建 Library, 而 Webpack, Precel 更加適合開發 Application.

希望通過本篇文章, 對大家構建 Library 有一定的工程上的啟發.

什麼是 Rollup

簡單而言, Rollup 是一個模塊打包工具, 可以將我們按照 ESM (ES2015 Module) 規範編寫的源碼構建輸出如下格式:

IIFE: 自執行函數, 可通過 <script> 標籤加載
AMD: 瀏覽器端的模塊規範, 可通過 RequireJS 可加載
CommonJS: Node 默認的模塊規範, 可通過 Webpack 加載
UMD: 兼容 IIFE, AMD, CJS 三種模塊規範
ESM: ES2015 Module 規範, 可用 Webpack, Rollup 加載

大多數的 Library 也是選擇使用 Rollup 構建, 比如: React, Vue, Angular, D3, Moment, Redux…

藉助於 Rollup 的插件體系, 我們也可以處理 css, images, font 等資源, 但是 Rollup 不支持代碼拆分(Code Splitting)和運行時態加載(Dynamic Import) 特性, 所以較少的應用於 Application 開發.

為什麼選擇 Rollup

Tree Shaking: 自動移除未使用的代碼, 輸出更小的文件
Scope Hoisting: 所有模塊構建在一個函數內, 執行效率更高
Config 文件支持通過 ESM 模塊格式書寫
可以一次輸出多種格式:

不用的模塊規範: IIFE, AMD, CJS, UMD, ESM
Development 與 production 版本: .js, .min.js

文檔精簡

使用教程

安裝教程就不列舉了, 為大家提供一個 starter 模板: rollup-starter-kit. 主要說下開發一個 Library 我們需要哪些基礎插件以及他們的配置.

rollup-plugin-alias: 提供 modules 名稱的 alias 和 reslove 功能.
rollup-plugin-babel: 提供 Babel 能力, 需要安裝和配置 Babel (這部分知識不在本文涉及)
rollup-plugin-eslint: 提供 ESLint 能力, 需要安裝和配置 ESLint (這部分知識不在本文涉及)
rollup-plugin-node-resolve: 解析 node_modules 中的模塊
rollup-plugin-commonjs: 轉換 CJS -> ESM, 通常配合上面一個插件使用
rollup-plugin-replace: 類比 Webpack 的 DefinePlugin , 可在源碼中通過 process.env.NODE_ENV 用於構建區分 Development 與 Production 環境.
rollup-plugin-filesize: 顯示 bundle 文件大小
rollup-plugin-uglify: 壓縮 bundle 文件
rollup-plugin-serve: 類比 webpack-dev-server, 提供靜態伺服器能力

Rollup 配置構建命令我們通常還會使用 cross-env 區分,中, 我們維護通用的配置:

importaliasfrom'rollup-plugin-alias';importeslintfrom'rollup-plugin-eslint';importresolvefrom'rollup-plugin-node-resolve';importcommonjsfrom'rollup-plugin-commonjs';importbabelfrom'rollup-plugin-babel';importreplacefrom'rollup-plugin-replace';exportdefault{input:'src/main.js',plugins:[alias({resolve:['.js']}),replace({'process.env.NODE_ENV':JSON.stringify(process.env.NODE_ENV||'development')}),resolve,commonjs({//
non-CommonJS modules will be ignored, but you can also// specifically include/exclude
filesinclude:'node_modules/**'}),eslint({include:['src/**/*.js']}),babel({runtimeHelpers:true,exclude:'node_modules/**'// only transpile our source code})]}

開發環境配置由於是開發 Library, 建議大家編寫單元測試, 示例工程我們使用 Jest 作為測試框架. 開發過程中還可通過rollup-plugin-serve

plugins:[...baseConfig.plugins,serve({port:8080,contentBase:['']})]

生產環境的配置

構建生產版本時候, 我們一般期待結果有如下特性:

去除開發環境調試信息
一個 entry 文件, 多個 output 版本
包含文件頭注釋, 可以是版本, 作者或開源協議聲明
文本混淆與壓縮

對應於我們的配置文件如下:

importfilesizefrom'rollup-plugin-filesize';importuglifyfrom'rollup-plugin-uglify';import{minify}from'uglify-es';importbaseConfigfrom'./rollup.config.base';import{name,version,author}from'../package.json';//
bannerconstbanner=`${'/*!\n'+' * '}${name}.js v${version}\n`+` * (c) 2018-${newDate.getFullYear}${author}\n`+` * Released under the MIT License.\n`+` */`;// 支持輸出 exportdefault[// .js, .cjs.js,
.esm.js{...baseConfig,output:[// umd development version with sourcemap{file:`dist/${name}.js`,format:'umd',name,banner,sourcemap:true},// cjs and esm
version{file:`dist/${name}.cjs.js`,format:'cjs',banner},{file:`dist/${name}.esm.js`,format:'es',banner}],plugins:[...baseConfig.plugins,filesize]},// .min.js{...baseConfig,output:[// umd with
compress version{file:`dist/${name}.min.js`,format:'umd',name,banner}],plugins:[...baseConfig.plugins,uglify({compress:{drop_console:true}},minify),filesize]}];

Npm 包發布的一些建議

通過 standard-version 工具管理髮布的 tag 和 CHANGELOG.md
包的名稱帶上命名空間: @xx/xx
提供接口聲明文件: xx.d.ts, 可通過 package.json 中 typings 指定
package.json 中 modules 指定 ESM 模塊, webpack, rollup 會優先獲取 ESM 模塊
package.json 中 main 指定 CJS 模塊

寫在最後

文章主要講解一些配置和實踐規範, 具體效果可參見示例代碼: rollup-starter-kit, 歡迎大家提 Issue 交流.

喜歡這篇文章嗎？快分享吧

您可能感興趣

免責聲明：本文內容來源于知乎專欄，文章觀點不代表壹讀立場，如若侵犯到您的權益，或涉不實謠言，敬請向我們提出檢舉。

台灣正體

URL: https://read01.com/oLoz88a.html

⇱ 使用 Rollup 構建你的 Library - 壹讀

使用 Rollup 構建你的 Library