咨询如何配置Vite以支持将CommonJS模块打包为单个IIFE格式bundle

你遇到的问题是Vite在默认的lib模式配置下，没有正确解析并打包CommonJS（CJS）模块的依赖，导致a.js的代码没有被合并到最终的IIFE bundle中。这是因为Rollup（Vite底层的打包工具）默认对CJS模块的静态分析支持有限，需要显式配置来确保它能正确处理CJS的require调用并打包依赖模块。

下面是具体的解决步骤：

解决方案1：显式配置Rollup的CommonJS插件 #

Vite内部已经集成了@rollup/plugin-commonjs，我们只需要在配置中显式启用并配置它，让它处理你的源码目录下的CJS模块：

1. 修改你的vite.config.js，添加rollupOptions配置，引入并使用@rollup/plugin-commonjs：

import { defineConfig } from 'vite';
import { resolve } from 'path';
import commonjs from '@rollup/plugin-commonjs';

export default defineConfig({
    build: {
        lib: {
            name: 'bundle',
            entry: resolve(import.meta.dirname, 'src', 'index'),
            formats: ['iife'],
        },
        rollupOptions: {
            // 确保相对路径的模块不会被标记为外部依赖
            external: (id) => !id.startsWith('.') && !resolve(__dirname).includes(id),
            plugins: [
                // 配置CommonJS插件处理src目录下的CJS模块
                commonjs({
                    include: /src\/.*/,
                    // 可选：开启混合模块转换，处理同时存在ESM和CJS的情况
                    transformMixedEsModules: true,
                }),
            ],
        },
    },
});

2. 重新执行vite build，此时a.js的代码会被正确打包到IIFE bundle中，最终的输出会变成：

(function(){"use strict";function a(chars){console.log('chars', chars);}a("hello")})();

解决方案2：强制Vite预构建CJS模块（可选） #

如果方案1不生效，你可以尝试强制Vite在构建前预构建CJS模块，确保它们被转换为ESM格式后再打包：

在vite.config.js中添加optimizeDeps配置：

export default defineConfig({
    optimizeDeps: {
        // 强制预构建指定的CJS模块
        include: ['src/a.js'],
        esbuildOptions: {
            loader: {
                '.js': 'js',
            },
        },
    },
    // 保留之前的build配置...
});

为什么默认配置不生效？ #

Vite默认会在构建时应用@rollup/plugin-commonjs，但在lib模式下，它可能不会自动识别相对路径的CJS模块为需要打包的依赖，而是将其标记为外部模块。显式配置插件并设置include规则，能确保Rollup正确解析CJS的require调用，将依赖模块的代码合并到最终bundle中。

另外，当你切换为ESM模块时能正常打包，是因为Rollup对ESM的静态导入（import）有更好的原生支持，能自动追踪并打包所有依赖。

备注：内容来源于stack exchange，提问作者Johannes Merz