旧版 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 '.' 错误即为修复完成。
