如何让默认create-react-app项目可在旧款iPhone设备上正常运行

默认Create React App（CRA）的生产构建适配规则由package.json中的browserslist配置控制，默认仅覆盖市场份额高于0.2%、仍在官方维护周期内的浏览器版本。iPhone 6的最高可支持系统版本为iOS 12.5，已经不在CRA默认的兼容列表范围内，构建生成的代码中会包含iOS 12无法解析的ES6+新语法，以及未做Polyfill的内置API，最终导致页面无法正常加载运行。

• 第一步：调整browserslist兼容配置
  打开项目根目录的package.json文件，找到browserslist字段，在production配置数组中添加ios 12：

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ios 12"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
  

  修改后CRA的构建流程会自动完成代码语法转译，同时按需引入必要的core-js Polyfill，兼容iOS 12的运行环境。

• 第二步：清除构建缓存
  CRA会缓存browserslist的解析结果，修改配置后需要删除旧缓存保证配置生效，执行命令：

  rm -rf node_modules/.cache
  

  Windows系统可直接手动删除node_modules目录下的.cache文件夹。

• 第三步：重新构建部署
  执行npm run build生成新的生产构建产物，将build目录下的所有文件通过FileZilla重新上传到你的自有服务器即可，原有部署流程无需改动。

• 如果调整配置后依然无法运行，优先检查项目中是否引入了未做ES5兼容的第三方依赖，未eject的CRA项目可通过react-app-rewired搭配customize-cra的addBabelInclude配置，将对应第三方包加入转译列表即可。
• 部署前可先在本地启动静态服务验证兼容性，执行npx serve build启动本地服务后，用Browserstack连接iPhone 6访问本地服务确认运行正常，再上传到生产环境。
• 无需eject项目或者修改CRA内部配置，上述browserslist调整是CRA官方支持的兼容配置方案，不会影响后续CRA版本升级。

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