Rollup是什么？零基础分步上手教程

一、先搞懂Rollup适合做什么

如果你正在寻找一个更适合打包 JavaScript 库的工具，Rollup 会是很好的选择。它的核心优势在于输出代码更干净、体积更小、树摇（Tree Shaking）效果更好，尤其适合组件库、工具库、基础函数库等场景。

和一些偏向应用型打包器相比，Rollup 更强调“把你写的模块精准地合并成一个或多个文件”，尽量保留静态结构，减少无用代码。也就是说，如果你的目标是发布一个供别人安装使用的库，Rollup 往往比传统方案更合适。

在开始配置之前，你只需要记住一件事：Rollup 的强项不是复杂项目的一站式开发体验，而是高质量产物输出。理解这一点，后面的配置会更有方向感。

二、第一步：安装并初始化项目

先创建一个简单的项目目录，然后安装 Rollup。你可以用 npm 或 pnpm，命令非常直接。

• 新建项目文件夹并进入目录
• 执行 npm init -y 生成 package.json
• 安装 Rollup：npm install rollup -D

接着准备一个最基础的目录结构，例如：src/index.js 作为入口文件，dist 作为输出目录。入口文件里可以先写一个简单函数，比如导出一个加法工具，便于验证打包结果。

建议你先用最小项目跑通一次，这样能快速理解 Rollup 的工作流程：入口文件 → 解析依赖 → 生成输出文件。只要这个链路通了，后续扩展插件就容易很多。

三、第二步：编写最基础的打包配置

Rollup 的配置文件通常命名为 rollup.config.js。最基础的写法是指定输入文件和输出文件。对于新手来说，先把“打包成一个文件”这件事做出来最重要。

你可以先配置一个简单的输入输出关系：

• input：指定入口，如 src/index.js
• output.file：指定输出文件，如 dist/bundle.js
• output.format：指定输出格式，如 esm、cjs、umd

这里要特别注意格式选择。如果你的库主要给现代前端项目使用，esm 很常见；如果要兼容 Node.js 环境，cjs 也很常见；如果你希望通过浏览器直接引入，umd 会更灵活。

配置写完后，在命令行执行 Rollup 打包命令，就能看到 dist 目录下生成文件。首次成功输出后，建议检查一下结果：代码是否被正确合并、导出是否正常、是否保留了你需要的模块结构。

四、第三步：加入常用插件提升能力

单独使用 Rollup 时，它对某些场景的支持并不完整，比如解析第三方依赖、处理 CommonJS 模块、编译 TypeScript 或 Babel 语法等。这时候就需要插件来扩展能力。

常见插件可以按用途理解：

• @rollup/plugin-node-resolve：让 Rollup 能找到 node_modules 里的模块
• @rollup/plugin-commonjs：把 CommonJS 转成 Rollup 能识别的形式
• @rollup/plugin-typescript：支持 TypeScript 项目
• @rollup/plugin-babel：处理更广泛的语法转换需求

如果你做的是组件库，通常至少会用到 node-resolve 和 commonjs。这样可以保证第三方依赖、历史包、工具模块都能顺利打进最终产物。对于现代库开发来说，Rollup 的插件生态非常关键，很多实际问题都要靠插件解决。

配置插件时，建议遵循一个原则：先解决最小可用需求，再逐步增加复杂度。不要一开始就堆太多插件，否则排错成本会变高。

五、第四步：处理源码导出与构建优化

当基础打包跑通后，下一步应该关注导出方式和体积优化。对于库型项目，常见做法是同时输出多个格式，例如 ESM 和 CJS，方便不同环境引用。这样可以提高兼容性，也更利于包管理器识别。

此外，Rollup 很重要的价值之一就是Tree Shaking。它能够在静态分析基础上移除未使用代码，减少最终包体积。为了让它更有效，你的源码最好尽量使用 ES Module 语法，也就是 import/export，而不是混用过多动态写法。

如果你想进一步优化，还可以考虑：

• 把公共依赖尽量外置，避免重复打包
• 拆分开发和生产配置，分别处理不同需求
• 为输出文件添加压缩步骤，提高发布质量

实际开发中，很多人喜欢直接把所有东西打进去，但对于库发布而言，控制输出边界往往比“全打包”更重要。这也是 Rollup 在工程化场景里长期受欢迎的原因。

六、第五步：调试、发布与常见注意事项

完成配置后，不要急着发布，先做几轮验证。你可以从以下几个方面检查：

• 入口文件是否能正常生成
• 导出的 API 是否符合预期
• 第三方依赖是否正确处理
• 不同格式输出是否都可用

如果报错，优先检查插件顺序、路径配置和模块格式。很多 Rollup 问题并不是代码逻辑错了，而是构建链路中的某一步没对上。例如 CommonJS 没转、TypeScript 没编译、相对路径写错等，都很常见。

当你完成一次稳定构建后，就可以把打包脚本加入 package.json 的 scripts 中，方便后续一键执行。到这一步，你已经掌握了 Rollup 从安装、配置到输出的完整流程。后续只要根据项目需求继续补充插件，就能把它稳定用在真实项目里。

总结一下：Rollup 适合做库类项目的高质量打包，核心思路是先跑通最小配置，再逐步加入插件和优化策略。只要你按步骤来，就能很快建立起自己的构建体系。