Rollup 打包工具教程
Rollup 是一个高效的 JavaScript 模块打包工具，专注于 ES6 模块的优化编译，特别适合构建库或工具。它的主要特点是支持 Tree-shaking，可以移除未使用的代码，生成体积更小、加载更快的代码。
一、环境准备与安装
1. 环境要求
- Node.js 环境（建议使用 LTS 版本）
- npm 或 yarn 包管理工具
- 基本的命令行操作知识
2. 安装方式
全局安装
npm install rollup --global
本地安装（推荐）
# 创建项目目录
mkdir rollup-demo && cd rollup-demo
# 初始化项目
npm init -y
# 安装为开发依赖
npm install rollup --save-dev
二、创建第一个 Rollup 项目
1. 项目结构
rollup-demo/
├── src/
│ ├── main.js # 入口文件
│ └── utils/
│ └── math.js # 工具模块
├── rollup.config.js # 配置文件
└── package.json # 项目配置
2. 创建源文件
src/utils/math.js
// 加法函数
export const add = (a, b) => a + b;
// 乘法函数
export const multiply = (a, b) => a * b;
src/main.js
import { add } from './utils/math.js';
export default function() {
console.log('2 + 3 =', add(2, 3));
}
三、配置 Rollup
1. 基础配置文件
rollup.config.js
export default {
// 入口文件
input: 'src/main.js',
// 输出配置
output: {
// 输出文件路径
file: 'dist/bundle.js',
// 输出格式 (cjs: CommonJS, esm: ES模块, iife: 立即执行函数)
format: 'cjs'
}
};
2. 配置 package.json 脚本
在 package.json 中添加构建脚本：
{
"scripts": {
"build": "rollup --config"
}
}
四、基本使用命令
1. 使用命令行参数
# 直接打包，指定入口和输出格式
rollup src/main.js -o bundle.js -f cjs
# -i 或 --input: 指定入口文件
# -o 或 --output.file: 指定输出文件
# -f 或 --output.format: 指定输出格式 (amd, cjs, esm, iife, umd)
2. 使用配置文件
# 使用默认配置文件 (rollup.config.js)
rollup -c
# 使用指定配置文件
rollup --config rollup.prod.js
# 通过 npm 脚本运行
npm run build
五、多格式输出
可以配置 Rollup 同时输出多种格式：
export default {
input: 'src/main.js',
output: [
{
file: 'dist/bundle.cjs.js',
format: 'cjs'
},
{
file: 'dist/bundle.esm.js',
format: 'esm'
},
{
file: 'dist/bundle.umd.js',
format: 'umd',
name: 'MyLibrary' // UMD 格式需要指定全局变量名
}
]
};
六、使用插件扩展功能
Rollup 的核心功能可以通过插件来扩展。以下是几个常用插件的使用方法：
1. 导入 JSON 文件
安装插件：
npm install --save-dev @rollup/plugin-json
配置插件：
import json from '@rollup/plugin-json';
export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
plugins: [json()]
};
2. 使用 Babel 转译
安装插件：
npm install --save-dev @rollup/plugin-babel @babel/core @babel/preset-env
配置插件：
import babel from '@rollup/plugin-babel';
export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
plugins: [
babel({
babelHelpers: 'bundled',
presets: ['@babel/preset-env']
})
]
};
3. 代码压缩
安装插件：
npm install --save-dev rollup-plugin-terser
配置插件：
import { terser } from 'rollup-plugin-terser';
export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.min.js',
format: 'cjs'
},
plugins: [terser()]
};
七、Tree-shaking 特性
Rollup 的一大优势是原生支持 Tree-shaking，可以自动移除未使用的代码。
例如，在之前的 math.js 中我们导出了 add 和 multiply 两个函数，但在 main.js 中只使用了 add 函数，那么 Rollup 打包时只会包含 add 函数的代码。
八、代码分割
Rollup 支持代码分割，将代码分割成多个文件，实现按需加载：
export default {
input: {
main: 'src/main.js',
another: 'src/another.js'
},
output: {
dir: 'dist',
format: 'amd' // 或 'esm'，支持动态导入
}
};
九、开发环境配置
使用开发服务器
安装插件：
npm install --save-dev rollup-plugin-serve rollup-plugin-livereload
配置插件：
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';
export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'iife'
},
plugins: [
serve('dist'),
livereload('dist')
]
};
十、常见问题与最佳实践
1. 最佳实践
- 使用 ES 模块语法编写代码
- 为不同环境输出多种格式 (ESM、CommonJS、UMD)
- 使用插件处理特殊需求
- 利用 Tree-shaking 减小包体积
2. 适用场景
- 构建 JavaScript 库或工具
- 需要小体积输出文件的项目
- 强调性能优化的项目
十一、完整配置示例
import json from '@rollup/plugin-json';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/main.js',
output: [
{
file: 'dist/bundle.cjs.js',
format: 'cjs'
},
{
file: 'dist/bundle.esm.js',
format: 'esm'
},
{
file: 'dist/bundle.umd.js',
format: 'umd',
name: 'MyLibrary',
sourcemap: !production
}
],
plugins: [
resolve(), // 解析 Node.js 模块
commonjs(), // 转换 CommonJS 为 ES6
json(),
babel({
babelHelpers: 'bundled',
exclude: 'node_modules/**'
}),
production && terser() // 生产环境下压缩代码
].filter(Boolean)
};
通过这个教程，你应该能够快速上手 Rollup 并应用于实际项目中。Rollup 的简洁配置和优化能力使其成为构建 JavaScript 库的理想选择。
