safari浏览器兼容性问题-JZTXT

转载自https://zhuanlan.zhihu.com/p/454418451

低版本IOS Safari浏览器不兼容ES6语法

这是我首次跟safari浏览器打交道，在跟别的公司对接H5页面的时候发现的问题，他们的app最低可支持ios10的系统安装，他们的测试在用ios11.2的系统打开我们的H5页面时便出现了白屏，身边的同事也都没有用低版本的ios的，同时我也不知道页面报的是什么错误，此时一度陷入困境，在不清楚问题的情况下去解决报错，贸然更改代码与配置太过冒险，公司的电脑用的是Windows系统，安装虚拟机来还原低版本的ios环境或许是解决这个问题的方法。

先去黑苹果社区去下载一个macOs的镜像，这里我选择的版本是macOs11.1，虚拟机安装mac系统详情可见该篇文章

https://www.jb51.net/article/177922.htm

安装mac系统是为了使用Xcode，Xcode可以模拟ios的环境。mac环境都准备完毕后，进入Xcode设置里面的Preferences，选择Components，下载需要的ios版本。

运行对应的ios版本即可实现在Windows上打开ios设备（模拟），解决了没有低版本ios真机的痛点。

打开模拟器后发现低版本的ios系统的safari确实打不开H5页面，在项目的入口index.html文件中加入如下代码

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

引入一个小插件，可以实现在移动端设备上打开控制台。

打开控制台后问题终于水落石出，Unexpected token '...'. Expected a property name，ES6拓展语法导致的代码报错。

在项目中的.babelrc文件中加入如下配置

"presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns":"usage",
        "corejs":{
          "version":"3",
          "proposal":true
        },
        "targets":{
          "chrome":"60",
          "safari":"10"
        }
      }
    ],
    "@babel/preset-react"
],
"plugins": [
    "@babel/plugin-transform-runtime",
]

配置更改后重新编译发布，低版本ios设备可正常访问

至此，首个safari浏览器兼容性问题得以解决，整个过程的关键在于如何复现问题，发现报错。如果有低版本ios设备的同学可以绕过安装虚拟机macOs系统去使用Xcode模拟器，直接引入查看控制台的插件，即可看到报错。