基于Vite的React应用中动态加载字符串模块的方案咨询

方案1：用esbuild动态转换代码（推荐） #

esbuild可以直接把CommonJS格式的字符串代码转换成Vite兼容的ESM，步骤如下：

1. 安装esbuild：npm install esbuild --save-dev
2. 编写动态加载函数：

import * as esbuild from 'esbuild';

async function loadComponentFromCode(code) {
  // 将CommonJS代码转成ESM格式，同时支持JSX解析
  const result = await esbuild.transform(code, {
    format: 'esm',
    loader: 'jsx',
    target: 'es2020',
  });

  // 把转换后的代码生成Blob，创建可动态导入的URL
  const blob = new Blob([result.code], { type: 'application/javascript' });
  const url = URL.createObjectURL(blob);

  // 动态导入模块并清理临时URL
  const module = await import(url);
  URL.revokeObjectURL(url);

  // 返回组件（默认导出为组件的场景）
  return module.default;
}

这个方案能处理绝大多数CommonJS语法，转换效率高，完全适配Vite的ESM环境，还原生支持JSX解析。

方案2：手动转换require为异步import #

如果不想额外安装依赖，可以手动处理代码里的require语句，将同步调用改为异步import，再用async函数包裹执行：

async function loadCjsComponent(code) {
  // 替换静态require语句为await import
  const transformedCode = code.replace(
    /require\(['"]([^'"]+)['"]\)/g,
    'await import("$1")'
  );

  // 包裹代码，将module.exports转换为返回值
  const wrappedCode = `
    async function getComponent() {
      let module = { exports: {} };
      ${transformedCode.replace('module.exports =', 'return')}
      return module.exports;
    }
    export default getComponent();
  `;

  const blob = new Blob([wrappedCode], { type: 'application/javascript' });
  const url = URL.createObjectURL(blob);
  const module = await import(url);
  URL.revokeObjectURL(url);

  return module.default;
}

注意：这个方法是简单正则替换，复杂的require场景（比如动态路径、嵌套require）可能处理不好，适合代码结构简单的场景。

方案3：结合Rollup插件处理虚拟模块 #

利用Vite底层的Rollup体系，通过自定义虚拟模块让@rollup/plugin-commonjs处理字符串代码：

1. 安装插件：npm install @rollup/plugin-commonjs --save-dev
2. 在vite.config.js中配置：

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

export default defineConfig({
  plugins: [
    react(),
    {
      ...commonjs(),
      enforce: 'pre', // 确保在其他插件前执行转换
      resolveId(source) {
        // 识别自定义虚拟模块前缀
        if (source.startsWith('virtual-component:')) {
          return source;
        }
      },
      load(id) {
        if (id.startsWith('virtual-component:')) {
          // 提取并返回虚拟模块对应的代码内容
          return id.slice('virtual-component:'.length);
        }
      },
    },
  ],
});

3. 编写加载函数：

async function loadVirtualComponent(code) {
  // 把代码作为虚拟模块的后缀传递
  const module = await import(`virtual-component:${encodeURIComponent(code)}`);
  return module.default;
}

这个方案兼容性好，能整合到Vite的构建流程中，但配置相对复杂。

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