本文详解 Vue 2 项目因引入含可选链（?.）语法的 NPM 模块而报错 Module parse failed: Unexpected token 的根本原因与系统性升级方案，涵盖 Babel、ESLint 及 Vue CLI 插件的协同配置。
本文详解 vue 2 项目因引入含可选链（`?.`）语法的 npm 模块而报错 `module parse failed: unexpected token` 的根本原因与系统性升级方案，涵盖 babel、eslint 及 vue cli 插件的协同配置。
当 Vue 2 项目通过 Git 方式复用外部 NPM 模块（如共享资产库）时，若该模块使用了现代 JavaScript 语法（例如可选链 ?. 或空值合并 ??），旧版构建工具链往往无法识别，从而触发 Module parse failed: Unexpected token 错误。典型报错如下：
Module parse failed: Unexpected token (78:32)
| window.makeIdentifier = (payload) => {
> return "commentOn-" + payload?.sk;
| };该错误并非 ESLint 报错，而是 Webpack（经由 @vue/cli-service 驱动）在解析源码阶段失败——说明当前 Babel 配置未启用对 ES2020+ 语法的支持，或解析器版本过低。
根本原因：工具链版本不兼容
Vue CLI 4（对应 @vue/cli-service@^4.x）默认使用 babel-eslint 作为 ESLint 解析器，并依赖较旧的 @babel/core@^7.9，其 @babel/preset-env 默认目标环境（target）未覆盖可选链所需特性，且缺少 @babel/plugin-proposal-optional-chaining 插件（虽在较新 Babel 版本中已内置，但需正确启用）。
而你的“Brand New”项目已升级至 Vue CLI 5，天然支持该语法；旧项目仍停留在 CLI 4 生态，因此出现差异行为。
立即学习“前端免费学习笔记（深入）”；
正确升级路径：渐进式对齐依赖
切忌直接复制整个 package.json——这极易引发依赖冲突。应分层对齐关键工具链：
✅ 第一步：升级核心解析器与 ESLint 配置
将 ESLint 解析器从废弃的 babel-eslint 迁移至官方推荐的 @babel/eslint-parser（Babel 官方维护，支持最新语法）：
// .eslintrc.js 或 eslintConfig 字段中
"parserOptions": {
"parser": "@babel/eslint-parser",
"ecmaVersion": 2022,
"sourceType": "module"
}同时升级 ESLint 及插件版本：
- "eslint": "^6.7.2", - "eslint-plugin-vue": "^6.2.2", + "eslint": "^7.32.0", + "eslint-plugin-vue": "^8.0.3",
⚠️ 注意：eslint-plugin-vue@^8.x 要求 ESLint ≥ v7，且仅兼容 Vue 2.7+（推荐同步升级 Vue 至 2.7.16+ 以获得最佳兼容性）。
✅ 第二步：升级 Babel 与 Vue CLI 工具链
替换旧版 CLI 插件，启用 Babel 7.12+ 对可选链的原生支持（无需手动添加插件）：
- "@vue/cli-plugin-babel": "^4.5.15", - "@vue/cli-plugin-eslint": "^4.5.15", - "@vue/cli-service": "^4.5.15", + "@vue/cli-plugin-babel": "~5.0.0", + "@vue/cli-plugin-eslint": "~5.0.0", + "@vue/cli-service": "~5.0.0", + "@babel/core": "^7.12.16", + "@babel/eslint-parser": "^7.12.16",
? 提示：@vue/cli-service@5.x 内置 @babel/preset-env 并默认启用 loose: false + targets: { node: 'current' }，自动包含 optionalChaining 等提案支持。
✅ 第三步：验证并清理（关键！）
执行以下命令确保依赖纯净：
# 清理锁文件与 node_modules rm -rf node_modules package-lock.json # 安装对齐后版本 npm install # 验证构建是否通过 npm run build
若项目含 Jest 单元测试，还需同步升级测试工具链（如示例中的 @vue/vue2-jest 和 babel-jest），否则测试阶段可能二次报错。
最终验证：语法支持检查
可在任意 .js 文件中临时添加测试代码验证：
// src/test-syntax.js
export const testOptionalChaining = (obj) => obj?.foo?.bar ?? 'default';
console.log(testOptionalChaining({ foo: { bar: 'ok' } })); // → 'ok'成功构建即表明可选链已被正确转译。
总结：避免未来踩坑的实践建议
- 锁定工具链主版本：Vue CLI 4 与 5 不兼容，团队应统一主版本号并记录升级 checklist；
- 禁用“魔法”依赖：避免 ^ 在 @vue/cli-* 上无约束升级，推荐使用 ~（补丁级）或固定版本（如 5.0.8）；
-
启用 core-js 显式垫片（可选）：若需兼容 IE11，需在 babel.config.js 中配置：
presets: [ ['@vue/app', { useBuiltIns: 'entry', polyfills: ['es.promise', 'es.array.iterator'] }] ] - 长期策略：Vue 2 项目建议逐步迁移至 Vue 3（组合式 API + Vite 构建），从根本上规避此类 Babel 配置复杂度。
通过上述结构化升级，你不仅能解决 payload?.sk 解析失败问题，更能建立可持续维护的前端工具链基线。
