如何在Vite ES模块项目中集成含动态require语句的CommonJS包

嘿，我完全懂你这种头疼的感觉——在Vite的ES模块环境里硬塞带动态require的CommonJS包，简直像给电动车加汽油，怎么都不对付。之前我踩过类似的坑，给你几个亲测有效的方案，你可以挨个试试：

方案一：调整Vite预构建配置，让esbuild正确处理动态require #

你之前把依赖包加到了optimizeDeps.exclude里，这反而会让Vite跳过对它的预构建，导致运行时直接暴露CommonJS语法给浏览器（浏览器可不认require和exports）。反过来，我们应该把它放进include，并配置esbuild的转换选项：

// vite.config.ts
import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['dependency-package'], // 告诉Vite要预构建这个包
    esbuildOptions: {
      // 配置esbuild处理CommonJS，保留动态require的转换
      format: 'cjs',
      loader: { '.js': 'js' },
      // 如果包有复杂的动态require，开启这个选项可能有用
      keepNames: true,
    },
  },
  build: {
    commonjsOptions: {
      include: /dependency-package/, // 构建阶段也处理这个包的CommonJS
      transformMixedEsModules: true,
    },
  },
});

这个思路是让Vite的预构建阶段用esbuild把CommonJS包转换成浏览器能识别的格式，包括处理动态require——esbuild会把动态require转换成类似import()的异步加载逻辑（尽量兼容原有同步行为）。

方案二：使用vite-plugin-commonjs的进阶配置 #

你之前用过这个插件，但可能没配置到点上。试试给插件加上include和dynamicRequireTargets选项，明确告诉它要处理哪些文件里的动态require：

// vite.config.ts
import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
import commonjs from '@rollup/plugin-commonjs';

export default defineConfig({
  plugins: [
    react(),
    commonjs({
      include: /dependency-package/, // 只聚焦目标包，避免影响其他模块
      // 指定动态require可能加载的文件路径，帮助插件提前解析
      dynamicRequireTargets: [
        'node_modules/dependency-package/**/*.js',
        // 如果包还加载了其他目录的文件，也补充进来
      ],
    }),
  ],
  optimizeDeps: {
    exclude: ['dependency-package'], // 让插件来处理，而非esbuild
  },
});

这里的dynamicRequireTargets是关键——如果插件知道动态require的潜在加载范围，就能提前把这些文件转换成ES模块格式，避免运行时出现解析错误。

方案三：用Node.js后端代理（适用非前端运行场景） #

如果这个CommonJS包是工具类、数据处理类的代码，不需要在浏览器端直接运行，那可以把它放在后端服务里，前端通过API调用获取结果。这完全避开了浏览器端的模块兼容性问题，虽然绕了点，但最稳妥。

比如写个简单的Express接口：

// server.js
const express = require('express');
const depPackage = require('dependency-package');
const app = express();

app.get('/api/use-dep', (req, res) => {
  const result = depPackage.someFunction(req.query.param);
  res.json(result);
});

app.listen(3001);

然后前端用fetch调用这个接口就行，完全不用在前端处理CommonJS的麻烦。

方案四：手动封装CommonJS包（应急方案） #

如果上面的方法都不行，你可以手动写一个封装层，把CommonJS包的导出转换成ES模块，同时处理动态require的部分：

// src/utils/wrap-dep-package.js
// 用Node.js的require加载包（依赖Vite预构建处理这个文件）
const depPackage = require('dependency-package');

// 把需要的导出转换成ES模块格式
export const someFunction = depPackage.someFunction;

// 如果有动态require的部分，手动封装成异步函数
export async function dynamicLoad(path) {
  // 用import()模拟动态require，前提是路径有规律、可预测
  const module = await import(`dependency-package/${path}`);
  return module.default || module;
}

然后在项目里导入这个封装文件：

import { someFunction, dynamicLoad } from './utils/wrap-dep-package';

这个方法适合包的动态require逻辑不复杂的情况，你可以手动覆盖那些动态加载的部分。

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