Rollup 是一个 JavaScript 模块打包工具，可以将多个小的代码片段编译为完整的库和应用。与传统的 CommonJS 和 AMD 这一类非标准化的解决方案不同，Rollup 使用的是 ES6 版本 Javascript 中的模块标准。新的 ES 模块可以让你自由、无缝地按需使用你最喜爱的库中那些有用的单个函数。这一特性在未来将随处可用，但 Rollup 让你现在就可以，想用就用。

特性

面向 Web 和 Node：Rollup 支持许多输出格式：ES 模块、CommonJS、UMD、SystemJS 等等。不仅可以为 Web 打包，还可以为许多其他平台打包。
除屑优化（Tree-shaking）：基于深度执行路径分析的冗余代码消除，将除屑优化引入 JavaScript。
面向 Web 和 Node：Rollup 支持许多输出格式：ES 模块、CommonJS、UMD、SystemJS 等等。不仅可以为 Web 打包，还可以为许多其他平台打包。
无额外开销的代码分割：根据不同的入口点和动态导入将代码拆分，只需使用输出格式的导入机制，无需使用自定义加载器代码。
强大的插件机制：易于学习的插件 API，只需少量代码即可实现强大的代码注入和转换。被 Vite 和 WMR 采用。
应需而变，量身定制：Rollup 并不持有偏见，丰富的插件接口和多样的配置选项使其成为定制构建流程和高级工具链的理想打包工具。
Vite 依赖的打包器：正在开发 Web？Vite 为你预配置 Rollup，提供合理的默认设置和强大的插件，同时为你提供极速的开发服务器。

安装

npm install --global rollup

快速开始

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

参见 rollup-starter-lib（https://github.com/rollup/rollup-starter-lib）和 rollup-starter-app（https://github.com/rollup/rollup-starter-app），以查看使用 Rollup 的示例库和应用程序项目。

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

对于浏览器：

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

对于 Node.js:

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

对于浏览器和 Node.js：

# 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 模块。

@rollup/plugin-commonjs

该插件需要 LTS Node 版本 (v14.0.0+) 和 Rollup v2.68.0+。如果使用的是@rollup/plugin-node-resolve，对应版本是 v13.0.6+。

安装：

npm install @rollup/plugin-commonjs --save-dev

创建rollup.config.js 配置文件并导入插件：

import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [commonjs()]
};

然后 rollup 通过 CLI 或 API 进行调用。

发布 ES 模块

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