Vite + Qiankun 微前端项目中的 require is not defined 问题Vite + Qiank

最近在使用 Vite + Vue3 + Qiankun 搭建微前端的主应用时，遇到一个问题：开发时一切正常，但在打包后总是报错，提示某个方法找不到。经过排查，发现问题出在 require 语法上。具体错误信息为：require is not defined。在网上搜索后发现，很多人都遇到过类似的问题。查找资料后发现，浏览器不识别 CommonJS 语法，需要通过插件进行转换。

解决方法

方法1：项目代码中使用了 require 语法

如果你的项目代码中使用了 require 语法，可以使用 vite-plugin-require-transform 插件进行转换：

首先，安装插件：

npm install vite-plugin-require-transform -D

然后，在 Vite 配置文件中引入并使用该插件：

import { defineConfig } from 'vite';
import requireTransform from 'vite-plugin-require-transform';

export default defineConfig({
  plugins: [
    requireTransform({
      fileRegex: /.js$|.vue$/
    })
  ]
});

方法2：第三方包内部使用了 require 语法

如果你的项目本身没有使用 require 语法，或者方法1未能解决问题，可能是因为第三方包内部使用了 require 语法。此时，可以使用 vite-plugin-commonjs 插件。

首先，安装插件：

npm install vite-plugin-commonjs -S

然后，在 Vite 配置文件中引入并使用该插件：

import { defineConfig } from 'vite';
import commonjs from 'vite-plugin-commonjs';

export default defineConfig({
  plugins: [commonjs()],
  build: {
    commonjsOptions: {
      transformMixedEsModules: true
    }
  }
});

总结

通过以上两种方法，可以有效解决 Vite 打包后遇到的 require is not defined 问题。方法1适用于项目代码中直接使用 require 语法的情况，而方法2则解决了第三方包中使用 require 语法的问题。希望这些解决方案能帮助到遇到同样问题的开发者。