rollup是什么？以及它和webpack 和vite的区别

概括​

Rollup 是一个用于 JavaScript 的模块打包工具，它将小的代码片段编译成更大、更复杂的代码，例如库或应用程序。它使用 JavaScript 的 ES6 版本中包含的新标准化代码模块格式，而不是以前的 CommonJS 和 AMD 等特殊解决方案。ES 模块允许你自由无缝地组合你最喜欢的库中最有用的个别函数。这在未来将在所有场景原生支持，但 Rollup 让你今天就可以开始这样做。

安装​

npm install --global rollup

这将使 Rollup 可以作为全局命令行工具使用。你也可以在本地安装它，请参阅 在本地安装 Rollup。

快速开始​

可以通过带有可选配置文件的 命令行界面 或 JavaScript API 来使用 Rollup。运行rollup --help以查看可用选项和参数。

参见 rollup-starter-lib 和 rollup-starter-app，以查看使用 Rollup 的示例库和应用程序项目。

这些命令假定你的应用程序入口点命名为 main.js，并且希望将所有导入编译到一个名为 bundle.js 的单个文件中。

::: code-group

# 编译为包含自执行函数（'iife'）的 <script>。
$ rollup main.js --file bundle.js --format iife

# 编译为一个 CommonJS 模块 ('cjs')
$ rollup main.js --file bundle.js --format cjs

# UMD 格式需要一个包名
$ rollup main.js --file bundle.js --format umd --name "myBundle"

背景​

将项目分解为较小的独立部分通常可以使软件开发更加容易，因为这通常可以消除意外的交互，并大大减少你需要解决的问题的复杂性，而仅仅是首先编写较小的项目 并不一定是最好的方式。不幸的是，JavaScript 在历史上并没有将这种能力作为语言的核心特性之一。这在 ES6 版本的 JavaScript 中得到了改变，该版本包括一种语法，用于导入和导出函数和数据，以便它们可以在单独的脚本之间共享。

该规范现在已经稳定，但仅在现代浏览器中实现，并未在 Node.js 中完全落地。Rollup 允许你使用新的模块系统编写代码，然后将其编译回现有的支持格式，例如 CommonJS 模块、AMD 模块和 IIFE 样式脚本。这意味着你可以编写 对未来兼容 的代码，并且还可以获得以下几点收益……

除屑优化（Tree-Shaking）​

除了可以使用 ES 模块之外，Rollup 还可以静态分析你导入的代码，并将排除任何实际上没有使用的内容。这使你可以在现有的工具和模块的基础上构建，而不需要添加额外的依赖项或使项目的大小变得臃肿。

例如，使用 CommonJS 必须导入整个工具或库。

// 使用 CommonJS 导入整个 utils 对象
const utils = require('./utils');
const query = 'Rollup';
// 使用 utils 对象的 ajax 方法。
utils.ajax(`https://api.example.com?search=${query}`).then(handleResponse);

使用 ES 模块，我们不需要导入整个 utils 对象，而只需导入我们需要的一个 ajax 函数：

// 使用 ES6 的 import 语句导入 ajax 函数。
import { ajax } from './utils';
const query = 'Rollup';
// 调用 ajax 函数
ajax(`https://api.example.com?search=${query}`).then(handleResponse);

因为 Rollup 只包含最少的内容，因此它生成的库和应用程序更轻、更快、更简单。由于这种方法可以利用显式的 import 和 export 语句，因此它比仅运行最小化混淆工具更能有效检测出已编译输出代码中的未使用变量。

兼容性​

导入 CommonJS​

Rollup 可以通过插件 导入现有的 CommonJS 模块。

发布 ES 模块​

为了确保你的 ES 模块可以立即被处理 CommonJS 的工具使用，例如 Node.js 和 webpack，你可以使用 Rollup 编译成 UMD 或 CommonJS 格式，然后在 package.json 文件中使用 main 属性指向编译后的版本。如果你的 package.json 文件还有一个 module 字段，那么像 Rollup 和 webpack 2+ 这样的可感知 ES 模块的工具将直接 导入 ES 模块版本。

与webpack和vite的区别

Rollup、Webpack 和 Vite 都是前端构建工具，但它们在设计目标、使用场景和工作原理上有显著区别。

1. Rollup

• 定位：专注于 JavaScript 库的打包工具，适合构建小型、高效的库或模块。

• 特点：

  • 默认使用 ES Module 规范，生成更小、更高效的代码。

  • 支持 Tree Shaking（移除未使用的代码），适合库的开发。

  • 配置简单，插件生态丰富。

• 适用场景：

  • 构建 JavaScript 库（如 React、Vue 等）。

  • 需要 Tree Shaking 优化的项目。

• 缺点：

  • 对复杂应用（如多页面应用）支持较弱。

  • 生态插件不如 Webpack 丰富。

2. Webpack

• 定位：全能型构建工具，适合构建复杂的前端应用。

• 特点：

  • 支持多种模块规范（CommonJS、AMD、ES Module 等）。

  • 强大的插件和加载器（Loader）生态，支持处理各种资源（如 CSS、图片、字体等）。

  • 支持代码分割（Code Splitting）、懒加载等高级功能。

  • 配置灵活，但学习曲线较高。

• 适用场景：

  • 复杂的前端应用（如单页面应用、多页面应用）。

  • 需要处理多种资源类型的项目。

• 缺点：

  • 配置复杂，初学者上手难度大。

  • 构建速度较慢，尤其是在大型项目中。

3. Vite

• 定位：新一代前端构建工具，注重开发体验和构建速度。

• 特点：

  • 基于 ES Module 的开发服务器，利用浏览器原生支持 ES Module 的特性，实现快速启动和热更新。

  • 生产环境使用 Rollup 进行打包，生成高效的代码。

  • 开发环境无需打包，直接按需加载模块，启动速度极快。

  • 内置对 TypeScript、CSS、静态资源等的支持。

• 适用场景：

  • 现代前端应用（尤其是基于 Vue、React 等框架的项目）。

  • 需要快速启动和高效开发体验的项目。

• 缺点：

  • 对旧版浏览器支持较弱（依赖 ES Module）。

  • 生态插件相对 Webpack 较少。

对比总结

选择建议

• Rollup：适合构建 JavaScript 库或需要 Tree Shaking 优化的项目。

• Webpack：适合复杂的前端应用，尤其是需要处理多种资源类型的项目。

• Vite：适合现代前端应用，尤其是追求开发效率和构建速度的项目。