Rollup：给你的 JavaScript 库瘦身美颜，走上人生巅峰
各位前端的小伙伴们，大家好啊！不知道大家有没有遇到过这样的情况：辛辛苦苦写了一个 JavaScript 库，功能强大，代码精妙，简直是自己的心血结晶。结果呢？一打包出来，好家伙，体积比我的健身计划还大！用户下载半天，加载慢如蜗牛，直接劝退。
这可咋整？难道我们的心血就要被体积打败了吗？别慌！今天就给大家介绍一位“瘦身美颜大师”—— Rollup，它能帮你把 JavaScript 库打理得井井有条，体积小巧，性能卓越，让你心爱的代码走上人生巅峰！
啥是 Rollup？别跟我说一堆术语，我头疼！
简单来说，Rollup 就是一个 JavaScript 的模块打包器。跟 Webpack 类似，但它更擅长打包 JavaScript 库。你可以把它想象成一个“代码整理师”，专门负责把你的代码模块按照一定的规则打包成一个或多个文件。
那它凭啥能瘦身美颜呢？秘密就在于它的“Tree Shaking”技术，中文名叫“摇树优化”。
摇树优化？听起来好玄乎！
其实一点都不玄乎。想象一下，你家后院有一棵苹果树，上面结满了苹果。但是，你只需要其中几个苹果，其他的都用不着。如果你直接把整棵树都砍下来，那不是太浪费了吗？
摇树优化就是这个道理。Rollup 会分析你的代码，找出哪些代码模块没有被用到，然后像摇树一样把这些没用的“苹果”（代码）摇下来，打包的时候直接忽略掉。这样，打包出来的文件体积自然就小了很多。
举个栗子！
假设你写了一个工具库 my-utils.js，里面包含了一些常用的工具函数：
// my-utils.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
export function multiply(a, b) {
return a * b;
}
export function divide(a, b) {
return a / b;
}
export function formatNumber(number) {
// 一些复杂的数字格式化逻辑
return number.toLocaleString();
}然后，你在你的项目 app.js 中只用到了 add 函数：
// app.js
import { add } from './my-utils.js';
console.log(add(1, 2)); // 输出 3如果使用传统的打包工具，可能会把整个 my-utils.js 都打包进去，即使你只用到了 add 函数。但是，Rollup 会通过摇树优化，只保留 add 函数，而把 subtract、multiply、divide 和 formatNumber 这些没用到的函数都排除掉。
是不是感觉瞬间清爽了很多？
Rollup 怎么用？别吓我，我怕配置！
别怕，Rollup 的配置其实很简单。首先，你需要安装 Rollup：
npm install rollup --save-dev然后，创建一个 rollup.config.js 文件，这是 Rollup 的配置文件。一个简单的配置可能像这样：
// rollup.config.js
export default {
input: 'src/index.js', // 入口文件
output: {
file: 'dist/my-library.js', // 输出文件
format: 'umd', // 输出格式，例如 umd、cjs、esm 等
name: 'MyLibrary' // 库的名字，用于 umd 格式
}
};这个配置告诉 Rollup：
- 入口文件是
src/index.js - 输出文件是
dist/my-library.js - 输出格式是
umd（通用模块定义），这样你的库可以在浏览器和 Node.js 环境中使用 - 库的名字是
MyLibrary
接下来，在 package.json 文件中添加一个构建脚本：
{
"scripts": {
"build": "rollup -c" // -c 表示使用 rollup.config.js 配置文件
}
}最后，运行 npm run build 命令，就可以把你的代码打包成 dist/my-library.js 文件了。
Rollup 还有哪些骚操作？
除了摇树优化，Rollup 还有很多其他的“骚操作”，可以帮助你进一步优化你的 JavaScript 库：
- 插件系统： Rollup 支持各种各样的插件，可以扩展其功能，例如：
@rollup/plugin-babel: 使用 Babel 转换 ESNext 代码，兼容旧浏览器@rollup/plugin-commonjs: 将 CommonJS 模块转换为 ES 模块rollup-plugin-terser: 压缩代码，进一步减小体积
- 代码分割： 如果你的库比较大，可以将其分割成多个小的 chunk，按需加载，提高性能。
- 多种输出格式： Rollup 支持多种输出格式，例如
umd、cjs、esm等，可以满足不同的使用场景。
Rollup vs Webpack，我该选哪个？
这是一个老生常谈的问题。简单来说：
- Webpack: 更适合打包应用程序，功能强大，配置复杂，生态丰富。
- Rollup: 更适合打包 JavaScript 库，体积更小，性能更好，配置简单。
当然，这并不是绝对的。有些项目可能需要同时使用 Webpack 和 Rollup，例如使用 Webpack 打包应用程序，使用 Rollup 打包应用程序中使用的库。
Rollup 的一些坑，我先告诉你！
- CommonJS 模块： Rollup 对 CommonJS 模块的支持不如 Webpack 好，需要使用
@rollup/plugin-commonjs插件进行转换。 - 动态导入： Rollup 对动态导入的支持也比较有限，需要手动配置。
总结：Rollup，你值得拥有！
总而言之，Rollup 是一款非常优秀的 JavaScript 模块打包器，尤其适合打包 JavaScript 库。它具有体积小、性能好、配置简单等优点，可以帮助你打造高性能、高质量的 JavaScript 库。如果你正在开发一个 JavaScript 库，不妨试试 Rollup，相信它会给你带来惊喜！
希望这篇文章能够帮助大家更好地了解 Rollup，并将其应用到实际项目中。祝大家写出更加优秀的代码，早日走上人生巅峰！