前端-Rollup

        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