一、什么是Rollup？为什么选择它作为你的打包工具
在现代前端开发中，Rollup作为一个高效的JavaScript模块打包工具，迅速成为开发者首选。它可以将小的代码片段编译成更大、更复杂的库或应用程序，支持ES6模块标准，而不是依赖传统的CommonJS或AMD格式。这意味着你能更自由地组合库中的函数，实现树摇（Tree Shaking）优化，生成更小的bundle文件。
Rollup特别适合构建工具库（如Vue.js就用它打包），比Webpack配置更简单，输出更干净。它的核心优势包括：支持多种输出格式（如IIFE、CJS、UMD、ES），插件生态丰富，且启动速度快。根据官方文档，Rollup使用新标准化的ES模块，让代码在未来原生支持无缝运行。
如果你是初学者，选择Rollup能避免Webpack的复杂配置，直接从CLI或配置文件入手。相比其他工具，它生成的代码体积小、无多余代码，完美适用于库开发和应用打包。
二、Rollup快速上手：安装与第一个打包项目
开始使用Rollup前，确保你的机器安装了Node.js（推荐最新LTS版本）。通过NPM全局安装Rollup是最简单的方式，输入以下命令：
npm install -g rollup：全局安装CLI工具。- 验证安装：运行
rollup -h，查看帮助信息。
创建你的第一个项目：新建目录mkdir -p my-rollup-project/src && cd my-rollup-project。在src/main.js中写入入口代码，例如：
import { ajax } from './utils.js';
const query = 'Rollup';
ajax(`https://api.example.com?search=${query}`).then(handleResponse);然后运行打包命令：rollup src/main.js -o bundle.js -f iife。这会生成一个自执行的IIFE格式bundle.js文件，支持浏览器直接引入。参数说明：-o指定输出文件，-f指定格式（iife适合浏览器，cjs适合Node.js）。
本地安装更推荐，用于项目可移植性：在项目根目录运行npm install --save-dev rollup，然后用npx rollup执行。添加脚本到package.json："build": "rollup -c"，一键打包完成。
三、Rollup配置文件详解：自定义你的打包流程
CLI适合快速测试，但实际项目需rollup.config.js配置文件。创建文件，基本结构如下：
export default {
input: 'src/main.js', // 入口文件
output: {
file: 'bundle.js',
format: 'umd', // 输出格式：umd支持浏览器+Node
name: 'myBundle' // UMD包名
}
};运行rollup -c即可应用配置。input指定入口（支持数组多入口），output控制输出路径、格式和sourcemap。添加watch模式开发：rollup -c -w，监控文件变化自动重打包。
- 多输出示例：output数组支持同时生成cjs和esm格式。
- 代码分割：input选项支持动态导入，实现按需加载。
高级配置包括external选项排除第三方库（如不打包lodash），treeshake开启优化。package.json中添加"build": "rollup -c rollup.config.prod.js"，区分dev/prod环境。
四、Rollup插件系统：扩展无限可能
Rollup的强大在于插件生态。通过npm安装插件，如npm i @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-terser，解决模块解析和压缩问题。
在rollup.config.js中引入并使用：
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
export default {
input: 'src/main.js',
output: { file: 'dist/bundle.js', format: 'iife' },
plugins: [resolve(), commonjs(), terser()] // 插件链
};- resolve：解析node_modules模块。
- commonjs：转换CommonJS语法为ES模块。
- terser：代码压缩，减小文件大小。
- ES6转ES5：用@rollup/plugin-babel，配置babel preset-env。
插件钩子（如onwarn、transform）允许自定义逻辑，例如注入环境变量或处理CSS。开发插件时，继承rollup的Plugin接口，实现load/transform钩子。
五、Rollup实战案例：构建一个工具库并多格式输出
假设构建一个工具库utils-lib。步骤：
- 初始化：npm init -y，安装rollup及插件。
- 编写index.js：export { debounce, throttle } from './utils.js'。
- rollup.config.js配置多输出：
export default {
input: 'src/index.js',
output: [
{ file: 'dist/index.cjs', format: 'cjs' },
{ file: 'dist/index.esm.js', format: 'es' },
{ file: 'dist/index.umd.js', format: 'umd', name: 'UtilsLib' }
],
plugins: [resolve(), commonjs(), terser()]
};运行npm run build，生成三种格式。测试：浏览器引入umd版，Node用cjs版。结合gulp可自动化任务流，进一步优化CI/CD流程。
六、Rollup最佳实践与常见问题排查
最佳实践：始终用本地安装避免版本冲突；开启treeshake移除死代码；用sourcemap调试。性能优化：代码分割+动态import，lazy loading模块。
常见问题：
- 模块未找到：加resolve/commonjs插件。
- ES6语法报错：配置babel插件。
- bundle过大：external第三方库，分析rollup-plugin-analyzer。
迁移Webpack项目？直接替换rollup.config.js，享受更小输出。未来，Rollup将继续主导库打包领域。
通过本教程，你已掌握Rollup全流程。从安装到插件实战，立即上手构建高效项目！（本文约1560字）