Rollup

Rollup 是一个 JavaScript 模块打包工具，主要用于将多个模块和文件打包成一个或多个文件。它特别适合用来打包 JavaScript 库和工具，提供了高效的打包体积优化和强大的模块化支持。

核心特点

1. 支持 ES Modules（ESM）
   Rollup 原生支持 ES 模块（import 和 export），可以对模块依赖关系进行深度优化。相比于其他工具，它更适合用来打包库，生成结构清晰的代码。
2. Tree Shaking
   Rollup 的 Tree Shaking 功能会移除未使用的代码部分，从而极大减少输出文件的体积。这在打包现代模块时非常有用。

多种输出格式
Rollup 支持多种模块化标准的输出格式：

• ESM（用于现代浏览器或工具链）
• CommonJS (CJS)（用于 Node.js 环境）
• UMD（通用模块定义，支持浏览器和 Node.js）
• IIFE（立即调用的函数表达式，适用于浏览器）

插件体系
Rollup 通过插件扩展功能，例如支持 TypeScript、CommonJS、JSON、图片等资源文件的打包。常用插件包括：

• @rollup/plugin-node-resolve：解析 Node.js 模块
• @rollup/plugin-commonjs：将 CommonJS 模块转换为 ES 模块
• @rollup/plugin-typescript：支持 TypeScript 打包
• @rollup/plugin-terser：压缩代码

1. 简洁的输出代码
   Rollup 会生成整洁、易读的打包文件，非常适合用来发布库或工具。

适用场景

Rollup 的设计目标是打包 JavaScript 库，而不是大型的前端应用。以下是一些常见使用场景：

JavaScript/TypeScript 库

• 构建公共 SDK 或工具包
• 创建共享组件库

输出多模块格式

• 同时生成 esm.js、cjs.js 和 umd.js，适配不同使用环境。

1. 优化小型项目
   对于不依赖复杂工具链的项目，Rollup 是一个快速、轻量的替代方案。

Rollup vs Webpack/Vite

基本使用

1. 安装 Rollup

通过 NPM 安装：

npm install rollup --save-dev

2. 创建配置文件

在项目根目录创建 rollup.config.js：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';

export default {
input: 'src/index.js', // 入口文件
output: [
{
file: 'dist/bundle.cjs.js',
format: 'cjs', // CommonJS 格式
},
{
file: 'dist/bundle.esm.js',
format: 'esm', // ES Module 格式
},
{
file: 'dist/bundle.umd.js',
format: 'umd', // UMD 格式
name: 'MyLibrary', // UMD 全局变量名称
},
],
plugins: [
resolve(), // 解析模块
commonjs(), // 支持 CommonJS
terser(), // 压缩输出文件
],
};

3. 运行打包

在 package.json 中添加脚本：

"scripts": {  "build": "rollup -c"}

运行命令：

npm run build

输出结果

运行打包后，Rollup 会在 dist/ 文件夹中生成以下文件：

1. bundle.cjs.js：适用于 Node.js（CommonJS 格式）。
2. bundle.esm.js：适用于现代前端框架（ESM 格式）。
3. bundle.umd.js：适用于浏览器和 Node.js 通用场景（UMD 格式）。