Rollup配置优化：如何将多输出文件合并为单个文件？

问题分析 #

生成500个文件不是Rollup的默认行为，核心原因在于你使用的@open-wc/building-rollup提供的createBasicConfig默认配置包含了以下逻辑：

• 自动将组件关联的静态资源（样式、图片等）单独输出
• 默认开启了代码拆分（code splitting）机制
• 可能对每个组件的依赖模块进行了独立打包

另外，你配置中的multi()插件用于合并多入口文件，但你已经通过components.js统一导入了所有组件，这个插件反而会干扰打包逻辑，引发不必要的文件拆分。

解决方案：输出单个文件 #

通过调整Rollup配置，可实现单文件输出，具体修改如下：

修改后的rollup.config.js #

import { createBasicConfig } from "@open-wc/building-rollup";
import dynamicImportVars from "@rollup/plugin-dynamic-import-vars";
import merge from "deepmerge";
import { nodeResolve } from "@rollup/plugin-node-resolve";

const baseConfig = createBasicConfig({
    developmentMode: false,
    outputDir: "dist",
    output: {
        inlineDynamicImports: true,
        format: 'iife', // 指定浏览器兼容的立即执行函数格式，强制单文件打包
        entryFileNames: 'js_components.js' // 明确输出文件名
    }
});

export default merge(baseConfig, {
    input: "prod/components.js", // 直接指定单个入口文件
    plugins: [nodeResolve(), dynamicImportVars()] // 移除多余的multi插件
});

关键修改说明 #

• 指定输出格式：设置format: 'iife'（或umd），这两种格式会将所有依赖代码合并到单个文件中，避免ES模块格式默认的代码拆分。
• 移除multi插件：@rollup/plugin-multi-entry用于多入口合并，你已经通过components.js统一导入组件，无需该插件，它会导致不必要的文件拆分。
• 统一输出文件名：通过entryFileNames明确指定输出文件名，避免Rollup自动生成拆分文件。
• 处理静态资源（可选）：如果组件引用了CSS、图片等资源，@open-wc/building-rollup默认会单独输出。若要将样式内联到JS文件，可添加rollup-plugin-styles等插件，把样式打包进最终的JS文件。

验证结果 #

修改配置后重新执行Rollup构建，dist目录下只会生成指定的js_components.js文件（若有必须保留的资源文件，可根据需求进一步调整插件配置）。

内容的提问来源于stack exchange，提问作者RGriffiths