[未解决] 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等插件之前遇到类似问题的时候都试过,未果
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~