Hi！这里是JustHappy🎸🎸，今天我们来聊聊 Rollup 和webpack不同，这是一款专注于优化打包效率和代码体积的工具。你可能熟悉 Webpack 或 Vite，但 Rollup 也一直在前端打包工具中占据重要位置。虽然它的学习曲线比起 Webpack 稍微平滑一点，但它却很屌，尤其是在打包现代 JavaScript 模块时，Rollup 可以提供更加精简的输出。
在这篇文章中，我们将一起探索 Rollup 的基本概念、使用方法，以及一些核心特性，帮助你更好地理解这个工具，提升你的开发体验。
这里是Rollup文档链接
什么是 Rollup？🤔🤔
Rollup 是一个 JavaScript 模块打包工具，旨在通过优化打包过程，提高代码的执行效率。与 Webpack 等工具相比，Rollup 特别适合用于打包库、组件库以及单一用途的模块，特别是在支持 ES6 模块时，Rollup 可以做到更高效的 Tree Shaking 和更小的最终包体积。
Rollup 和 Webpack 有什么不同？🔍🔍
虽然 Webpack 在前端开发中占有主导地位，但 Rollup 也有它的独特优势：
- 模块打包：Rollup 使用 ES6 模块系统来进行打包，而 Webpack 则更偏向 CommonJS。
- Tree Shaking：Rollup 能更好地进行 Tree Shaking（去除无用代码），Rollup在JS生态中也是
最早支持Tree Shaking的打包工具，因为它原生支持 ES 模块，能够智能分析并移除未使用的代码，从而减小最终输出的文件体积。 - 更快的构建速度：对于打包库和小型项目，Rollup 比 Webpack 更快，因为它的设计简洁，处理模块的方式也更高效。
Rollup 的核心特性 💡💡
1. 小而精简的包体积
Rollup 的 Tree Shaking 非常优秀，能够移除死代码，使得最终打包出的文件体积更小。例如，如果你只使用了某个库中的部分功能，Rollup 会自动将未使用的部分剔除，从而减小最终的输出文件大小。
2. 支持多种插件
Rollup 拥有丰富的插件生态系统，可以支持各种类型的文件转换和优化。例如，rollup-plugin-babel 可以将你的 ES6+ 代码转换为 ES5，rollup-plugin-node-resolve 允许你解析第三方库中的模块等。
3. 高效的模块解析
Rollup 支持 ES6 模块，并且能在构建时高效地解析模块依赖关系。它会根据模块间的引用关系，自动优化和合并文件。
4. 持久化缓存
Rollup 在构建过程中会使用缓存机制来加速构建。如果你没有修改某个模块，Rollup 会跳过重新打包这个模块，从而提高构建效率。
rollup 提供了一个演示打包结果的在线演练场，大家可以去试试
使用 Rollup 构建项目 🚀
现在，我们来试一下如何用 Rollup 来构建一个最简单的 JavaScript 项目。
初始化一个 Rollup 项目
首先，我们需要创建一个新的项目，并安装 Rollup 和相关插件：
npm init -y
npm install --save-dev rollup
配置 Rollup
在项目根目录下，创建一个名为 rollup.config.js 的文件，配置 Rollup 打包选项：
// rollup.config.js
export default {
input: 'src/index.js', // 入口文件
output: {
file: 'dist/bundle.js', // 输出文件
format: 'iife', // 输出格式，iife 为立即执行函数
name: 'MyBundle', // 打包后的全局变量名
},
};
编写代码
在项目目录下创建 src/index.js，然后写入一些简单的 JavaScript 代码：
// src/index.js
import { greet } from './greet';
console.log(greet('World'));
再创建一个 src/greet.js 文件：
// src/greet.js
export function greet(name) {
return `Hello, ${name}!`;
}
构建项目
接下来，我们可以运行 Rollup 来进行构建：
npx rollup -c
这会使用 rollup.config.js 配置文件，打包并输出到 dist/bundle.js 文件中。
打包后的结果
打包后的 dist/bundle.js 文件内容如下：
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.MyBundle = factory());
}(this, (function () { 'use strict';
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet('World'));
return greet;
})));
你可以看到，Rollup 将 src/index.js 和 src/greet.js 进行了打包，并生成了一个立即执行函数 (IIFE) 格式的输出，适合直接在浏览器中使用。
Rollup 插件介绍 🔧🔧
Rollup 支持丰富的插件生态，下面介绍几个常用插件：
1. Babel 插件
如果你需要支持较老版本的浏览器，你可以使用 rollup-plugin-babel 插件将你的代码转换为 ES5：
npm install --save-dev @rollup/plugin-babel @babel/core @babel/preset-env
然后在 rollup.config.js 中使用该插件：
import babel from '@rollup/plugin-babel';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
name: 'MyBundle',
},
plugins: [
babel({
babelHelpers: 'bundled',
presets: ['@babel/preset-env'],
}),
],
};
2. Node 模块解析插件
如果你需要解析 node_modules 中的第三方库，可以使用 @rollup/plugin-node-resolve 插件：
npm install --save-dev @rollup/plugin-node-resolve
在 rollup.config.js 中添加：
import resolve from '@rollup/plugin-node-resolve';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
name: 'MyBundle',
},
plugins: [resolve()],
};
3. 外部依赖插件
如果你的代码依赖于外部库（比如 React 或 Vue），并且你希望打包时不要将这些库包含在内，可以使用 external 配置来排除这些依赖。
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
name: 'MyBundle',
globals: {
react: 'React',
},
},
external: ['react'],
};
总结 🎉🎉
Rollup 是一款轻量级、高效的 JavaScript 打包工具，非常适合用于打包库和组件。通过优化模块依赖关系、支持 Tree Shaking 和丰富的插件生态，Rollup 能帮助我们生成更小、更高效的代码。
如果你想进一步了解 Rollup，可以查看官方文档：Rollup 文档
