React v16.2.0在旧版Safari（iPhone5SE v11.1.2）中报语法错误

问题原因 #

iPhone 5SE搭载的iOS 11.1.2系统对应的Safari版本不支持ES6的对象/数组扩展运算符（...），代码中直接使用该语法且未经过转译，导致浏览器解析失败。

解决步骤 #

• 安装Babel转译插件：
  根据你使用的Babel版本选择对应插件安装：

  # Babel 7+版本
  npm install --save-dev @babel/plugin-proposal-object-rest-spread
  # Babel 6版本
  npm install --save-dev babel-plugin-transform-object-rest-spread
  

• 配置Babel：
  修改项目中的Babel配置文件（如.babelrc或babel.config.js），添加该插件：

  // .babelrc（Babel 7示例）
  {
    "presets": ["react-app"],
    "plugins": ["@babel/plugin-proposal-object-rest-spread"]
  }
  

• 若使用Create React App且未 eject：
  借助react-app-rewired和customize-cra扩展配置：

  1. 安装依赖：

     npm install --save-dev react-app-rewired customize-cra
     

  2. 修改package.json的脚本命令：

     "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test"
     }
     

  3. 项目根目录创建config-overrides.js：

     const { override, addBabelPlugin } = require('customize-cra');
     module.exports = override(
       addBabelPlugin('@babel/plugin-proposal-object-rest-spread')
     );
     

• 重新启动或构建项目，验证错误是否消失。

额外优化 #

如果还有其他ES6+语法兼容问题，可配置@babel/preset-env指定目标浏览器：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "safari": "11"
      }
    }],
    "react-app"
  ]
}

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