一个 Vite 打包配置,引发的问题—— global: 'globalThis'
1、问题:今天在发开中要对一个包版本升级,使用新的版本,安装官方文档进行了引用配置,
根据文档,配置完毕后,本地运行项目一切正常,但到打包构建时却出现了一下问题。
Could not resolve "./lib/globalThis-analytics-helper"
from "node_modules/@segment/analytics-next/dist/pkg/index.js"
一开始没有发现问题所在,就去 node_modules/@segment/analytics-next/dist/pkg/index.js 文件里面查找,是否引用了./lib/globalThis-analytics-helper,只发现了
export { getGlobalAnalytics } from './lib/global-analytics-helper';
这个的引用,没有 globalThis-analytics-helper为什么global会变成globalThis内,我就把 vite.config.ts 中的define: { global: 'globalThis' }配置注释,再次打包竟然成功了,这里我就发现了是这里的问题导致的,后面就改成了
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: "globalThis",
},
// Enable esbuild polyfill plugins
plugins: [],
},
},
打包就成功了,而且本地也可以正常运行了。
2、根本原因分析
-
define.global的作用:-
Vite在构建阶段(包括dev和build)会 把项目中所有出现的global替换成globalThis。 - 这种全局替换会影响第三方库的内部模块解析逻辑。
-
-
optimizeDeps.esbuildOptions.define的区别:- 只在开发模式下预构建依赖时生效,不影响打包。
- 安全地解决浏览器对
Node.js库的global兼容性问题。 - 不会破坏第三方库的模块解析,因此不会触发类似错误。
3、错误分析
- 使用
define: { global: 'globalThis'},配置后,导致和@segment/analytics-next内的global冲突,在打包时把@segment/analytics-next路径中global替换成了globalThis导致路径解析时,找不到路径而失败。