Rollup 是一个用于 JavaScript 的模块打包工具，它将小的代码片段编译成更大、更复杂的代码，例如库或应用程序。它使用 JavaScript 的 ES6 版本中包含的新标准化代码模块格式，而不是以前的 CommonJS 和 AMD 等特殊解决方案。ES 模块允许你自由无缝地组合你最喜欢的库中最有用的个别函数。这在未来将在所有场景原生支持，但 Rollup 让你今天就可以开始这样做。
除屑优化（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);
一.安装
//全局安装
npm install rollup --global
//安装到本地
npm install rollup --save-dev
二.基本使用
1.基础要点：
配置需要一个入口文件并且设置代码输出格式
格式选项：
2.快速上手
创建入口文件：
打包：
三.配置文件
随着我们添加更多选项，输入命令会变得有点麻烦。
为了避免重复输入，我们可以创建一个包含所有必要选项的配置文件。配置文件是用 JavaScript 编写的，比原始的 CLI 更加灵活。
在项目根目录中创建一个名为 rollup.config.mjs 的文件
export default {
input: 'src/index.js',
output: {
file: 'bundle.js',
format: 'iife'
}
};
使用配置文件
rm bundle.js # so we can check the command works!
rollup -c //表明我们需要使用配置文件
可以使用等效的命令行选项覆盖配置文件中的任何选项：
rollup -c -o bundle-2.js
如果你想，你也可以选择指定不同于默认的 rollup.config.mjs 的配置文件：
rollup --config rollup.config.dev.mjs
四.使用插件
到目前为止，我们已经用入口文件和通过相对路径导入的模块打了一个简单的包。随着你需要打包更复杂的代码，通常需要更灵活的配置，例如导入使用 NPM 安装的模块、使用 Babel 编译代码、处理 JSON 文件等等。
插件是rollup的唯一扩展方式
插件列表：Rollup Awesome List
1.@rollup/plugin-json
@rollup/plugin-json：允许 Rollup 从 JSON 文件中导入数据。
npm install --save-dev @rollup/plugin-json
(我们使用 --save-dev 而不是 --save，因为我们的代码在运行时实际上不依赖于插件，只有在打包时才需要。)
2.@rollup/plugin-node-resolve
@rollup/plugin-node-resolve:抹平rollup根据本地路径加载模块，不像webpack根据模块名称导入的差异。（一个 Rollup 插件，它使用 Node 解析算法来定位模块，用于在node_modules）
npm install @rollup/plugin-node-resolve --save-dev
例如引入lodash-es
3.@rollup/plugin-commonjs
@rollup/plugin-commonjs：由于rollup设计只处理ES模块，对于CommonJS 模块默认是不支持的，我们需要利用插件处理。（一个 Rollup 插件，用于将 CommonJS 模块转换为 ES6，以便它们可以包含在 Rollup bundle 中。）
npm install @rollup/plugin-commonjs --save-dev
五.代码拆分
Rollup 将使用动态导入创建一个仅在需要时加载的单独块。为了让 Rollup 知道在哪里放置第二个块，我们不使用 --file 选项，而是使用 --dir 选项设置一个输出文件夹：
修改配置文件：
总结
rollup优点：
缺点：
应用程序：webpack 库/框架：rollup