Vite/React如何强制UMD包默认导出？无需修改原包代码

问题场景 #

开发常规配置的Vite/React应用时，集成旧UMD格式包another-package遇到如下问题：

• 原导入代码：

Promise.all([import('another-package/dist/js/jsFile')])
  .then(([sdk]) => {
    const mySdk = sdk.Sdk()
    doSomethingWith(mySdk)
  })

• 运行报错：sdk.Sdk() is not a function
• 手动修改为const mySdk = sdk.default.Sdk()后可正常运行，原因是UMD模块在ES模块环境中默认导出未被正确识别

解决方案（通过Vite配置适配，无需修改包代码） #

借助@rollup/plugin-commonjs插件，针对目标UMD包强制设置默认导出映射，具体步骤如下：

1. 安装依赖 #

若未安装@rollup/plugin-commonjs，先执行安装：

npm install -D @rollup/plugin-commonjs

2. 配置Vite #

在vite.config.js（或vite.config.ts）中导入插件并配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import commonjs from '@rollup/plugin-commonjs'

export default defineConfig({
  plugins: [react()],
  // 生产构建阶段配置
  build: {
    rollupOptions: {
      plugins: [
        commonjs({
          // 全局配置：将CommonJS模块的module.exports作为ES模块的默认导出
          defaultIsModuleExports: true,
          // 精准配置：仅针对目标包指定导出映射（可选，更精准）
          namedExports: {
            'another-package/dist/js/jsFile': ['Sdk']
          }
        })
      ]
    }
  },
  // 开发环境预构建配置（确保开发时也能正确处理）
  optimizeDeps: {
    include: ['another-package/dist/js/jsFile'],
    esbuildOptions: {
      plugins: [
        {
          name: 'fix-umd-default',
          setup(build) {
            // 拦截目标包的加载，适配UMD到ESM
            build.onLoad({ filter: /another-package\/dist\/js\/jsFile/ }, async (args) => {
              const fs = require('fs')
              const content = await fs.promises.readFile(args.path, 'utf8')
              return {
                contents: `
                  // 执行UMD代码并导出模块内容
                  const umdModule = (function() {
                    ${content}
                    return typeof module !== 'undefined' ? module.exports : window.Sdk;
                  })();
                  export default umdModule;
                  export const Sdk = umdModule.Sdk;
                `,
                loader: 'js'
              }
            })
          }
        }
      ]
    }
  }
})

配置说明 #

• defaultIsModuleExports: true：告知插件将CommonJS模块的module.exports整体作为ES模块的默认导出，动态导入后的sdk对象直接对应原UMD包的导出，可直接调用sdk.Sdk()
• namedExports配置：可选，精准指定目标包需要导出的命名成员，避免全局配置影响其他包
• 开发环境的optimizeDeps配置：确保Vite用esbuild预构建依赖时，正确适配UMD模块的导出结构，避免开发和生产环境行为不一致

配置完成后，原导入代码无需修改即可正常运行。

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