Rollup #

什么是 Rollup？ #

Rollup 是一个 JavaScript 模块打包器，它将小块代码编译成大块复杂的代码，例如库或应用程序。Rollup 以其出色的 Tree-shaking 能力和对 ES Modules 的原生支持而闻名。

核心定位 #

text

┌─────────────────────────────────────────────────────────────┐
│                        Rollup                                │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  Tree-shaking│  │  ES Modules │  │  输出格式   │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  插件系统    │  │  代码分割    │  │  高性能     │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘

为什么选择 Rollup？ #

优势 #

text

✅ 出色的 Tree-shaking
   - 静态分析
   - 自动移除死代码
   - 最小化输出

✅ ES Modules 原生支持
   - 标准模块格式
   - 未来兼容
   - 更好的优化

✅ 多种输出格式
   - ES Modules
   - CommonJS
   - UMD
   - IIFE

✅ 插件生态
   - 丰富的插件
   - 易于扩展
   - 社区活跃

快速开始 #

安装 #

bash

npm install --save-dev rollup

配置文件 #

javascript

// rollup.config.js
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
    sourcemap: true,
  },
  plugins: [],
};

运行打包 #

bash

npx rollup -c

文档结构 #

text

Rollup 文档
├── 入门基础
│   ├── Rollup 简介
│   ├── 安装与配置
│   ├── 基本使用
│   ├── 命令行参数
│   └── 配置文件
│
├── 核心功能
│   ├── 插件系统
│   ├── 代码分割
│   ├── Tree-shaking
│   └── 多入口打包
│
└── 高级特性
    ├── 自定义插件
    ├── 高级配置
    ├── 性能优化
    └── 与其他工具集成

Rollup vs Webpack #

特性	Rollup	Webpack
Tree-shaking	✅ 优秀	✅ 良好
配置复杂度	低	高
输出格式	多种	主要 bundle
代码分割	支持	强大
开发服务器	需插件	内置
适用场景	库开发	应用开发

学习路径 #

text

入门阶段
├── Rollup 简介
├── 安装与配置
├── 基本使用
└── 配置文件

进阶阶段
├── 插件系统
├── 代码分割
├── Tree-shaking
└── 多入口打包

高级阶段
├── 自定义插件
├── 高级配置
├── 性能优化
└── 与其他工具集成

下一步 #

现在你已经了解了 Rollup 的基本概念，接下来学习 Rollup 简介，开始打包你的第一个项目！