Rollup 简介与快速上手
🎯 引言
学完这篇文章，你将明白 Rollup 是什么、它和 Webpack 有什么区别，以及为什么开发 JavaScript 库时大家更爱用它。我们还会一起安装 Rollup，并用一行命令完成第一次打包。
🧱 什么是 Rollup
Rollup 是一个 JavaScript 模块打包工具。它可以把分散在多个文件里的 ES 模块代码，合并成一个（或几个）可以直接运行的文件。
比如你写了两个文件：
export function add(a, b) {
return a + b;
}
import { add } from './math.js';
console.log(add(1, 2));
Rollup 会把它们合并成一个文件，浏览器或 Node.js 拿到就能直接用，不需要关心内部拆了几个模块。
你可以把 Rollup 理解成一台装订机：你写了一叠零散的稿纸（模块文件），它帮你按顺序装订成一本书（打包产物），还把没用的空白页（未使用的代码）撕掉。
⚡ Rollup 和 Webpack 有什么区别
我们已经学过 Webpack，那为什么还需要 Rollup？简单对比一下：
| 对比项 | Webpack | Rollup |
|---|---|---|
| 定位 | 打包应用（App） | 打包库（Library） |
| 产物体积 | 会注入运行时代码，略大 | 非常干净，几乎没有多余代码 |
| Tree Shaking | 支持 | 最早提出，效果更彻底 |
| 配置复杂度 | 功能多，配置相对复杂 | 配置简单，上手快 |
一句话总结：做网站应用用 Webpack 或 Vite，写工具库、组件库用 Rollup。
事实上，Vue、React 这些知名框架的源码，都是用 Rollup 打包的；Vite 的生产构建底层也是 Rollup。
🚀 安装 Rollup
本课程环境使用 Node.js v22.0.0，对应的 Rollup 版本为 4.62.2。
新建一个练习项目并安装：
mkdir rollup-demo
cd rollup-demo
npm init -y
npm install rollup@4.62.2 --save-dev
安装完成后，可以用 npx rollup 调用它：
npx rollup --version
能打印出版本号，说明安装成功了。
📦 第一个打包示例
下面用最简单的方式体验一次完整的打包过程。
1. 准备源码
在项目里新建两个文件：
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
import { add } from './math.js';
console.log(add(1, 2));
export { add };
2. 执行打包
直接通过命令行指定入口和输出文件：
npx rollup src/index.js --file dist/bundle.js
看到 created dist/bundle.js 的提示，说明打包成功。
3. 查看产物
打开 dist/bundle.js，内容大致如下：
function add(a, b) {
return a + b;
}
console.log(add(1, 2));
export { add };
仔细观察你会发现两个有意思的点：
add函数被完整地合并了进来，import语句消失了。subtract函数不见了，因为代码里没有用到它，Rollup 自动把它“摇”掉了。
第二点就是 Rollup 最著名的 Tree Shaking 能力，我们会在后面的章节专门讲解。
🧾 小节总结
- Rollup 是一个 JavaScript 模块打包工具，产物干净，特别适合打包工具库、组件库。
- 做应用优先选 Webpack / Vite，写库优先选 Rollup，两者场景不同。
- 本课程使用 Node.js v22.0.0 和 Rollup 4.62.2。
- 命令行打包：
npx rollup 入口文件 --file 输出文件。 - Rollup 默认会做 Tree Shaking，自动移除未使用的代码。
❓ 知识问答
Q1：Rollup 能打包 CSS、图片吗？
A：Rollup 核心只认识 JavaScript 模块，处理 CSS、图片需要借助插件。不过写库时一般很少涉及这些资源，这正是 Rollup 保持简单的原因。
Q2：npx rollup 里的 npx 是什么？
A：npx 是 npm 自带的命令，可以直接运行项目 node_modules 里安装的工具，不用写完整路径。
Q3：Rollup 打包后的文件能直接在浏览器里用吗？
A：默认输出的是 ES 模块格式，现代浏览器可以通过 <script type="module"> 使用。如果要在更老的环境使用，需要输出其他格式，下一章会详细介绍。
Q4：Vue 真的是用 Rollup 打包的吗？
A：是的。Vue、React、D3 等知名开源库都使用 Rollup 构建发布产物，Vite 的生产打包也基于 Rollup。
🧪 小练习
请完成以下步骤，体验 Rollup 的第一次打包：
- 新建
rollup-demo项目，安装rollup@4.62.2。 - 在
src/utils.js中编写并导出两个函数：capitalize（首字母大写）和truncate（截断字符串）。 - 在
src/index.js中只使用capitalize，然后执行打包命令。 - 打开产物文件，确认
truncate是否被移除。
# 请在这里执行命令
🎉 恭喜你已经完成了 Rollup 的入门！下一篇我们会学习用配置文件管理打包选项，告别冗长的命令行参数。