Rollup 是一个用于 JavaScript 的模块打包器，可以编译代码并将小块代码编译成大块复杂的代码，采用树形摇晃（tree-shaking）的方式消除未使用的代码。Rollup.config.js 文件是配置 Rollup 工作方式的核心文件。本章将详细介绍如何创建和配置 rollup.config.js 文件。
入门配置
首先，需要安装 Rollup 和必要的插件。可以通过 npm 或 yarn 安装：
npm install --save-dev rollup
接下来，在项目根目录下创建一个名为 rollup.config.js 的文件，并开始基础配置：
// www.javascriptcn.com code example
import { terser } from "rollup-plugin-terser";
import resolve from "@rollup/plugin-node-resolve";
export default {
input: "src/main.js", // 指定输入文件
output: {
file: "dist/bundle.js", // 指定输出文件
format: "iife", // 输出格式为立即调用函数表达式（IIFE）
},
plugins: [
resolve(), // 插件，用于解析 Node.js 模块
terser() // 压缩插件
]
};上述配置中，input 表示入口文件路径，output 表示输出文件路径和格式。plugins 数组用于添加各种插件以增强或修改构建过程。
输入配置详解
输入配置部分主要通过 input 属性定义。这个属性接受一个字符串值，代表你要打包的主入口文件路径。例如：
input: "src/index.js"
这里假设入口文件位于 src/index.js。
输出配置详解
输出配置部分主要通过 output 属性定义。这个属性可以是一个对象，也可以是一个数组（如果你有多个输出目标）。每个对象都可以包含以下属性：
file: 指定输出文件的路径。format: 定义输出的模块格式。常见的格式包括：iife: 立即调用函数表达式，适用于直接插入到 HTML 页面中的脚本。umd: 兼容 AMD、CommonJS 和全局变量的通用模块格式。cjs: CommonJS 格式，通常用于 Node.js 环境。es: ES 模块格式，适合现代浏览器环境。
示例配置：
output: {
file: "dist/bundle.js",
format: "iife"
}使用插件
插件扩展了 Rollup 的功能，使你可以更灵活地处理各种需求。常见的插件包括：
- @rollup/plugin-node-resolve: 解析 Node.js 模块，允许 Rollup 找到并使用第三方库。
- @rollup/plugin-commonjs: 将 CommonJS 模块转换为 ES6 模块，使得它们可以被 Rollup 正确处理。
- terser: 压缩代码，减少文件体积。
- @rollup/plugin-babel: 使用 Babel 转换现代 JavaScript 语法，确保向后兼容。
例如，要添加 terser 插件进行代码压缩：
import { terser } from "rollup-plugin-terser";
export default {
// 其他配置...
plugins: [
terser()
]
};处理多个入口点和输出
如果项目中有多个入口点，可以通过数组形式指定多个输入和对应的输出配置：
// www.javascriptcn.com code example
export default [
{
input: "src/app1.js",
output: {
file: "dist/app1.js",
format: "iife"
}
},
{
input: "src/app2.js",
output: {
file: "dist/app2.js",
format: "iife"
}
}
];这种方式非常适合构建多页面应用或多模块项目。
总结
rollup.config.js 文件是 Rollup 的核心配置文件，通过它你可以定义项目的输入、输出以及使用各种插件来定制构建流程。掌握这些基础知识后，你可以根据项目需求进一步探索更多高级配置选项。下一章我们将深入探讨如何使用 Rollup 处理不同类型的文件，如 CSS 和图片资源。