配置.browserslistrc为Electron 12.0.2时Vue项目使用可选链构建失败

该报错并非某一个loader直接导致，核心原因是webpack 4.x 内置的Acorn解析器不支持ES2020规范的可选链语法。
当你将.browserslistrc配置为Electron 12.0.2时，Babel检测到目标环境原生支持可选链，会跳过该语法的转译步骤，带?.的代码经过cache-loader、ts-loader、eslint-loader处理后直接交给webpack核心解析阶段，webpack4无法识别该语法就会抛出Unexpected token错误。当你改为通用浏览器规则时，Babel会把可选链转译为兼容的ES5语法，webpack4就能正常解析。

你可以根据项目情况选择任意一种方案解决：

• 方案1：升级webpack到5.x版本
  webpack 5 内置的JS解析器原生支持ES2020全量语法，包括可选链、空值合并运算符等，无需额外配置即可兼容未转译的新语法，是长期最优的解决方案。
• 方案2：强制Babel转译可选链语法
  如果暂时无法升级webpack版本，可以在Babel配置中显式引入可选链转译插件，强制转译该语法：

1. 安装依赖

npm install @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator --save-dev

2. 修改Babel配置文件（babel.config.js或.babelrc）

module.exports = {
  // 原有presets配置保持不变
  plugins: [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator"
  ]
}

修改后删除node_modules/.cache目录重启构建即可生效。

• 方案3：调整TypeScript编译目标
  如果项目用TS开发，也可以通过降低TS编译目标版本，让ts-loader直接转译可选链语法，修改tsconfig.json：

{
  "compilerOptions": {
    "target": "ES2019",
    // 其余原有配置保持不变
  }
}

如果调整后出现ESLint相关的语法报错，升级ESLint到7.0+版本即可，低版本ESLint同样不支持可选链语法解析。

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