在前端开发中，构建工具是提高效率的重要手段之一。Rollup 是一个非常流行的模块打包工具，特别适用于现代 JavaScript 应用程序的开发。它能够将多个小文件打包成一个或多个优化后的文件，从而提升网页加载速度和性能。
在使用 Rollup 打包项目时，配置入口文件和输出文件的位置至关重要。合理的配置可以确保你的代码被正确地处理并生成最终的构建产物。本章将详细介绍如何设置 Rollup 的入口和输出配置。
入口文件配置
入口文件是 Rollup 开始打包过程的第一个文件。这个文件通常是一个 JavaScript 文件，包含了项目的启动逻辑或者导出了需要打包的模块。Rollup 会从这个文件开始解析所有的依赖关系，并将其转换为最终的打包结果。
在 Rollup 配置文件（通常是 rollup.config.js）中，可以通过 input 属性来指定入口文件的位置。例如：
export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'iife'
}
};在这个例子中，src/main.js 被设置为入口文件。这意味着 Rollup 将从这个文件开始处理所有的导入和导出。
输出文件配置
输出文件配置决定了打包后的文件应该如何被组织和保存。这包括了文件名、路径以及打包格式等信息。通过调整这些选项，你可以控制最终生成的文件结构和形式。
在 Rollup 中，输出配置通常通过 output 对象进行定义。以下是一些常用的输出配置项：
- file：指定输出文件的路径。这是必须的配置项。
- format：定义打包后的文件格式。常见的格式有
iife,cjs,esm等。 - sourcemap：是否生成 sourcemap 文件。这对于调试非常有用。
- name：如果打包格式为 IIFE 或 UMD，这个属性指定了全局变量的名字。
- exports：指定导出的模式，如
named或default。
继续上面的例子，假设我们希望生成一个立即执行函数包裹（IIFE）格式的文件，并且开启 sourcemap 以便于调试：
-- -------------------- ---- -------
------ ------- -
------ --------------
------- -
----- -----------------
------- -------
---------- -----
----- -------
-
--在这个配置中，我们指定了输出文件为 dist/bundle.js，并且设置了打包格式为 IIFE，同时还开启了 sourcemap 功能。
动态输出配置
有时候，你可能需要根据不同的环境或条件来动态地改变输出配置。Rollup 提供了一种方法来实现这一点，即通过函数返回配置对象。例如：
-- -------------------- ---- -------
------ ------- ---------- -
----- ------------ - -------------------- --- -------------
------ -
------ --------------
------- -
----- ------------ - -------------------- - -----------------
------- -------
---------- -------------
-
--
-在这个例子中，根据 NODE_ENV 环境变量的值来决定输出文件的路径和是否生成 sourcemap。
总结
配置 Rollup 的入口和输出文件是构建过程中的关键步骤。正确的配置可以帮助你生成符合预期的打包文件，从而提升应用的性能和可维护性。通过合理利用 Rollup 提供的各种配置选项，你可以轻松地满足不同场景下的需求。
接下来我们将探讨如何配置 Rollup 的插件系统，以进一步增强打包过程的功能性和灵活性。