rollup是什么？

Rollup 是一个现代的 JavaScript 模块打包工具，主要用于将小模块化的代码打包成更大的、适合生产环境使用的文件。它专注于 ES6 模块（即 `import` 和 `export` 语法），并以其高效的 Tree Shaking 功能而闻名。Tree Shaking 是一种优化技术，用于移除未使用的代码，从而生成更小、更高效的打包文件。

以下是 Rollup 的主要特点和功能：

---

### **1. 主要特点**
- **专注于 ES6 模块**  
  Rollup 原生支持 ES6 模块语法，因此能够更好地处理现代 JavaScript 代码。相比于 CommonJS 或其他模块系统，ES6 模块提供了静态分析的能力，使得 Rollup 可以更高效地进行优化。

- **Tree Shaking**  
  Rollup 的 Tree Shaking 功能可以检测并移除未使用的代码，从而显著减小最终打包文件的体积。这对于库开发尤其重要，因为用户通常只需要使用库中的一部分功能。

- **输出多种格式**  
  Rollup 支持将代码打包为多种格式，包括：
  - **ESM (ES Modules)**：现代浏览器支持的模块格式。
  - **CommonJS**：Node.js 使用的传统模块格式。
  - **UMD (Universal Module Definition)**：兼容浏览器和 Node.js 的通用格式。
  - **IIFE (Immediately Invoked Function Expression)**：用于直接在浏览器中运行的自执行函数。
  - **AMD (Asynchronous Module Definition)**：旧式模块加载器（如 RequireJS）使用的格式。

- **插件生态系统**  
  Rollup 提供了一个强大的插件系统，允许开发者通过插件扩展其功能。例如，可以使用插件来支持 TypeScript、Babel 转译、CSS 处理等。

- **轻量级和高效**  
  Rollup 的设计目标是简单和高效，特别适合构建 JavaScript 库或框架。与 Webpack 等工具相比，Rollup 更加轻量，配置也更简洁。

---

### **2. 使用场景**
- **JavaScript 库开发**  
  Rollup 是许多流行的 JavaScript 库（如 React、Vue、Lodash 等）的首选打包工具，因为它可以生成高效且体积小的库文件。

- **小型项目**  
  对于不需要复杂功能的小型项目，Rollup 是一个很好的选择，因为它配置简单且性能优异。

- **需要多格式输出的项目**  
  如果你的项目需要同时生成 ESM、CommonJS 和 UMD 格式的文件，Rollup 是一个理想的选择。

---

### **3. 基本使用**
以下是一个简单的 Rollup 配置示例：

#### **安装 Rollup**
```bash
npm install rollup --save-dev
```

#### **创建 Rollup 配置文件**
在项目根目录下创建 `rollup.config.js` 文件：
```javascript
export default {
  input: 'src/main.js', // 入口文件
  output: {
    file: 'dist/bundle.js', // 输出文件
    format: 'esm' // 输出格式（ES Modules）
  }
};
```

#### **运行 Rollup**
在 `package.json` 中添加脚本：
```json
{
  "scripts": {
    "build": "rollup -c"
  }
}
```
然后运行以下命令：
```bash
npm run build
```

---

### **4. 插件示例**
Rollup 的插件系统非常强大，以下是一些常用插件及其用途：
- **@rollup/plugin-node-resolve**  
  解析第三方模块（如 npm 包）。
- **@rollup/plugin-commonjs**  
  将 CommonJS 模块转换为 ES6 模块。
- **@rollup/plugin-babel**  
  使用 Babel 转译代码以支持旧版浏览器。
- **rollup-plugin-terser**  
  压缩打包后的代码。
- **@rollup/plugin-typescript**  
  支持 TypeScript 编译。

示例配置：
```javascript
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import terser from 'rollup-plugin-terser';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.min.js',
    format: 'iife'
  },
  plugins: [
    resolve(), // 解析第三方模块
    commonjs(), // 转换 CommonJS 模块
    terser() // 压缩代码
  ]
};
```

---

### **5. Rollup vs Webpack**
| 特性                  | Rollup                          | Webpack                        |
|-----------------------|----------------------------------|--------------------------------|
| **应用场景**          | 构建库、小型项目                | 构建复杂应用                  |
| **模块支持**          | 原生支持 ES6 模块               | 支持多种模块格式              |
| **Tree Shaking**      | 更高效、更彻底                 | 较弱                          |
| **配置复杂度**        | 简单                           | 复杂                          |
| **生态和功能**        | 插件较少，专注核心功能          | 插件丰富，功能全面            |

---

### **6. 总结**
Rollup 是一个高效、轻量的 JavaScript 打包工具，特别适合用于构建库和小型项目。它的 Tree Shaking 功能和对 ES6 模块的支持使其成为许多知名项目的首选工具。如果你正在开发一个 JavaScript 库或需要生成多种格式的输出文件，Rollup 是一个值得尝试的工具。