【Rollup入门】初识Rollup

阅读文档：Rollup中文官方文档

一、Rollup是什么？

Rollup是使用ES Module格式进行对JavaScript的模块打包工具，提供一个充分利用ESM各项特性的高效打包工具，允许使用ES Module编写代码，然后将其编译回多种模块化格式。

1.1 Rollup的特点

• 拥有Tree Shaking
• 兼容性，可以通过插件导入common js和发布es模块

1.2 Rollup的快速上手

有两种方式运行Rollup：

• 提供一个可选的 Rollup 配置文件，以简化命令行使用并启用高级 Rollup 功能
• 导入rollup库来使用

命令行方式运行Rollup
在官方文档当中提到了两种方式：1、全局安装Rollup，作为全局命令行工具使用；2、本地安装Rollup，配合package.json或者npx rollup去使用。

以上两种方式都需要配置文件rollup.config.js一起使用，同时，使用配置文件必须传递--config或者-c标志。

# 向 Rollup 传递自定义配置文件位置
rollup --config my.config.js
npx rollup --config my.config.js
# 如果你没有传递文件名，Rollup 将会尝试
# 按照以下顺序加载配置文件：
# rollup.config.mjs -> rollup.config.cjs -> rollup.config.js
rollup --config
npx rollup --config

使用package.json或者npx rollup去使用的原理不懂的朋友可以看这两篇文章：
【Npm】npx到底是干什么
【Npm】一文了解透彻package.json里的script字段以及相关知识

配置文件支持语法提示
有两种方式：

// 方式一
/**
 * @type {import('rollup').RollupOptions}
 */
const config = {
    /* 你的配置 */
};
export default config;
// 方式二
import { defineConfig } from 'rollup';

export default defineConfig({
    /* 你的配置 */
});

注意：
由于配置文件rollup会通过node去读取，整个文件都是esm形式，不能使用commonjs的形式去写。

JavaScript API方式运行Rollup
应用场景：编程式打包、扩展Rollup本身。

二、Rollup的代码分割

有三种情况，Rollup会自动将代码拆分成块：

1. 动态加载
2. 多个入口点
3. output.manualChunks