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

旧版 Safari 对可选链（?.）的支持情况，其实挺让人头疼的。就拿 iOS 11.2 或者 macOS 10.13 自带的 Safari 11.0 来说吧，它们在解析 user?.profile?.name 这类语法时，会直接抛出一个 SyntaxError: Unexpected token '.'，然后页面就白屏了，所有 JS 都中断。这可不是闹着玩的——你辛辛苦苦写好的代码，在用户手机上根本跑不起来。

那么，怎么解决呢？核心思路就是在构建阶段通过 Babel 把可选链语法转译成兼容的旧语法，让 Safari 能认出来。下面分三步走，每一步都是关键，少一个都可能白忙活。

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

打开项目根目录下的 babel.config.js 或（如果还在用的话）.babelrc。先检查 targets 配置——别以为只写个 "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 '.'，页面正常展示，就是修复完毕的信号。