升级Webpack 5遇Uncaught ReferenceError: process未定义问题咨询

问题1：使用可选链操作符仍抛出process is not defined错误的原因 #

可选链操作符（?.）仅能在变量已存在的前提下，安全访问其深层属性，它无法解决「变量本身不存在于全局作用域」的问题。Webpack 5默认不再向浏览器环境注入Node.js的全局变量（如process），当代码执行到process?.env?.SOME_FIELD时，JS引擎首先会尝试查找全局作用域中的process变量——这个变量根本不存在，直接抛出ReferenceError，可选链根本没机会生效。

问题2：DefinePlugin配置无效的原因及可行解决方案 #

为什么你的DefinePlugin配置没用？ #

DefinePlugin是做静态字符串替换的工具，它不支持可选链语法（?.）。你配置的'process?.env?.JEST_WORKER_ID'是无法被静态解析的表达式，Webpack不会对它进行任何替换，自然无效。

无需修改合作团队代码的解决方案 #

以下三种方案均可在你的Webpack配置中实现，不需要改动node_modules内的代码：

方案1：修正DefinePlugin配置，静态注入process对象

直接定义全局的process变量（哪怕是空对象），让可选链能正常工作：

plugins: [
  new webpack.DefinePlugin({
    // 注入空对象，确保process存在，可选链可正常判断
    'process': '({ env: {} })',
    // 也可根据实际需求注入具体环境变量
    // 'process.env.SOME_FIELD': JSON.stringify(process.env.SOME_FIELD || undefined)
  })
]

方案2：用ProvidePlugin全局注入process的浏览器兼容版

先安装polyfill包：

npm install process --save-dev

然后在Webpack配置中配置ProvidePlugin：

plugins: [
  new webpack.ProvidePlugin({
    process: 'process/browser'
  })
]

该方案会把process包的浏览器兼容版本自动注入到全局作用域，代码中的process变量将指向这个polyfill对象。

方案3：通过resolve.fallback配置Node.js核心模块polyfill

同样需要先安装process包，然后在Webpack配置中添加fallback配置：

resolve: {
  fallback: {
    process: require.resolve('process/browser')
  }
}

Webpack 5移除了默认的Node.js核心模块polyfill，此配置会让Webpack在遇到process时自动加载对应的浏览器兼容实现。

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