Rollup 是轻量级 JavaScript 模块打包工具，适合构建库项目，支持 ES 模块和 Tree-shaking。配置文件 rollup.config.js 定义 input 和 output，支持 cjs、es、umd、iife 等格式，可输出多格式文件。通过 plugins 引入 node-resolve、commonjs、terser 等插件处理模块解析、CommonJS 转换和代码压缩。自定义插件需提供 name 属性及钩子如 buildStart、transform，用于控制构建流程和代码处理。生产环境建议 external 排除第三方依赖，配合 peerDependencies 声明运行时依赖，使用 babel 提升兼容性并生成 sourcemap 便于调试。
Rollup 是一个高效的 JavaScript 模块打包工具，特别适合用于构建库（library）项目。相比 Webpack 更轻量，专注于 ES 模块的静态分析和 Tree-shaking，产出更干净、更小的代码。本文将介绍 Rollup 的基本配置方式以及如何开发自定义插件。
Rollup 基本配置
Rollup 的配置文件通常是 rollup.config.js，导出一个或多个配置对象。
以下是一个基础配置示例：
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'cjs' // 可选：cjs, es, umd, iife 等
}
};
常用输出格式说明：
立即学习“Java免费学习笔记（深入）”；
- cjs：CommonJS，适用于 Node.js
- es：ES 模块，保留 import/export，推荐用于现代浏览器或打包工具消费
- umd：通用模块定义，支持 AMD、CommonJS 和全局变量，适合发布到 npm 的兼容性库
- iife：立即执行函数，适用于直接在浏览器 script 标签中使用
若需生成多种格式，可配置多个输出：
output: [
{ file: 'dist/mylib.cjs.js', format: 'cjs' },
{ file: 'dist/mylib.es.js', format: 'es' },
{ file: 'dist/mylib.umd.js', format: 'umd', name: 'MyLib' }
]
常用插件配置
Rollup 核心功能精简，依赖插件扩展能力。通过 plugins 数组引入。
安装插件：
npm install --save-dev @rollup/plugin-node-resolve @rollup/plugin-commonjs常见插件用途：
- @rollup/plugin-node-resolve：允许 Rollup 从 node_modules 中导入模块
- @rollup/plugin-commonjs：将 CommonJS 模块转换为 ES 模块
- @rollup/plugin-replace：替换源码中的字符串，常用于环境变量注入
- rollup-plugin-terser：压缩代码
配置示例：
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife'
},
plugins: [
resolve(),
commonjs(),
terser()
]
};
开发自定义插件
Rollup 插件本质上是一个对象，包含特定钩子（hooks），如 buildStart、transform、renderChunk 等。
插件结构示例：
function myPlugin() {
return {
name: 'my-plugin',
buildStart() {
this.info('开始构建...');
},
transform(code, id) {
// 对每个模块的代码进行处理
if (id.includes('.js')) {
code = code.replace(/console\.log/g, '// console.log');
}
return { code, map: null };
}
};
}
关键点：
- 插件必须有 name 属性
- 使用 this.warn() 或 this.info() 输出信息
- transform 钩子接收模块代码和路径，返回处理后的代码
在配置中使用：
plugins: [ myPlugin() ]生产环境优化建议
构建库时注意以下几点：
- 启用 external 排除第三方依赖（如 react、lodash），避免被打包进去
- 配置 peerDependencies 在 package.json 中声明运行时依赖
- 使用 babel 插件处理语法兼容性（配合 @rollup/plugin-babel）
- 生成 sourcemap 提高调试体验：sourcemap: true
排除外部依赖示例：
external: ['react', 'react-dom'],
output: {
globals: {
react: 'React',
'react-dom': 'ReactDOM'
}
}
基本上就这些。Rollup 配置简洁，插件机制灵活，适合打造高质量的 JS 库。掌握核心配置和插件开发，能更好控制构建流程。不复杂但容易忽略细节。
