如何在Safari浏览器中修复对ES6可选链操作符在旧版本中的语法报错？

旧版 Safari（如 iOS 11.2 或 Safari 11.0）不支持可选链语法，需通过 Babel 转译：必须在 babel.config.js 中显式配置 targets: { safari: "10.1" }，并安装启用 @babel/plugin-proposal-optional-chaining 插件，否则会因 SyntaxError 导致白屏。

旧版 Safari（如 iOS 11.2 或 macOS 10.13 内置的 Safari 11.0）在解析 user?.profile?.name 这类可选链语法时会直接抛出 SyntaxError: Unexpected token '.'，页面白屏且 JS 全部中断，必须在构建阶段将其转译为兼容代码才能运行。

确认目标浏览器版本并配置 Babel 转译目标

打开项目根目录下的 babel.config.js 或 .babelrc，检查 targets 配置是否明确指向旧版 Safari。仅写 "es5" 不够——Safari 10.1 才开始部分支持 let/const，但完全不支持可选链，必须显式声明：

【targets 必须包含 safari: "10.1" 或 ios: "10.3"】

修改配置如下（以 babel.config.js 为例）：

module.exports = { presets: [["@babel/preset-env", { targets: { safari: "10.1" } }] };

这一步漏掉会导致 Babel 认为环境已支持可选链，跳过转译，最终代码仍含 ?. 符号，在 Safari 中直接解析失败。

安装并启用可选链专用转译插件

方法一：使用 npm 安装插件

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

注意：Node.js v14 以下版本安装时若报“源文本中出现无法识别的标记”，需用单引号包裹插件名：npm install '@babel/plugin-proposal-optional-chaining' --save-dev

方法二：在配置中启用插件

在 babel.config.js 的 plugins 数组中加入该插件：

plugins: ["@babel/plugin-proposal-optional-chaining"]

⚠️ 插件必须放在 presets 之后，否则 Babel 可能因解析顺序错误而忽略它。

验证转译结果是否生效

第一步：在源码中写一段测试代码

const name = user?.profile?.name ?? "Anonymous";

第二步：执行构建命令（如 npm run build 或 npx webpack）

第三步：打开生成的 dist 目录下对应 JS 文件，搜索 ?. —— 若仍存在未转译的 ?. 符号，说明插件未生效或配置路径错误；若看到类似 user == null ? void 0 : (user.profile == null ? void 0 : user.profile.name) 的结构，则转译成功。

第四步：将构建产物部署到本地服务器，用 Safari 10.1 真机或 Xcode 模拟器加载测试页面，控制台不再报 Unexpected token '.' 错误即为修复完成。