[未解决] Vite 永远年轻,永远被commonjs+vite组合拳背刺。打包后第三方依赖报错“require is not defined”问题
这个问题遇到不下三次了,每次都有新的被折磨体验,令人头秃。希望这次可以彻底解决。
这次遇到问题的是mapboxgl的标绘插件@mapbox/mapbox-gl-draw的圆形扩展插件mapbox-gl-draw-circle,它用了commonjs语法,vite开发环境时引入没有问题,但打包后会报错:
导致出错的代码:
import { CircleMode, DragCircleMode, DirectMode, SimpleSelectMode } from "mapbox-gl-draw-circle";
依赖中是这样引用的:
const CircleMode = require("./lib/modes/CircleMode");
const DragCircleMode = require("./lib/modes/DragCircleMode");
const DirectMode = require("./lib/modes/DirectModeOverride");
const SimpleSelectMode = require("./lib/modes/SimpleSelectModeOverride");
在不拿插件代码过来自己重写的情况下(而且也尝试了重写,并不容易实现),做过以下尝试:
- 使用vite-plugin-require-transform转换:无效,该插件不对node_modules中的代码做转换
- 安装@rollup/plugin-commonjs,在vite.config.js引入commonjs插件,配置build.commonjsOptions:无效,不论transformMixedEsModules设为true或false,一些参数反复调整,都会导致别的问题,比如dayjs等其他第三方插件导入报错
import commonjs from "@rollup/plugin-commonjs";
plugins: [
...
commonjs({
include: [],
// namedExports: ["default"],
// strictRequires: true,
// transformMixedEsModules: true,
// esmExternals: true,
// requireReturnsDefault: "preferred",
})
],
build: {
...
commonjsOptions: {
include: [],
// namedExports: ["default"],
strictRequires: true,
},
}
- 把依赖包放到public下,在index.html中引入:无效,报错,该依赖方法没有写全局变量注册
- vite-babel-plugin、@rollup/plugin-node-resolve、@originjs/vite-plugin-commonjs、rollup-plugin-commonjs等插件之前遇到类似问题的时候都试过,未果