Written on May 06, 2023

某某 H5 页面是运行在安卓设备上的 webview 页面，在我们第一次部署的时候，遇到了在低版本手机，系统安卓 6 上白屏的问题 -.-

那。。这当然是我的问题，只顾着埋头开发业务功能，忽略了对老旧手机支持问题。

于是乎。

我迅速装了 @vitejs/plugin-legacy

透过 navigator 拿到 UA 信息，安卓 6 对应 Chrome 版本为 50。拿到了，写上配置

targets: ['Chrome 50', 'Safari 11', '....']

提交代码...部署....OK 没问题，安卓 6 完美运行无报错。

本以为兼容问题就在此告一段落了，殊不知 ┭┮﹏┭┮

刚刚上线完，PM 和后端同学去门店验收，有一部比较魔幻的手机就脱颖而出了。

为什么，大家都能打开，他却打不开，魔不魔幻吧。

第一时间，当然是懵的，没什么思路。

打开 raptor，也拦截不到报错

接着，就是远程调试，在我一步一步的指导下，后端同学终于手机电脑配合打开了 chrome://inspect/ 的页面

正准备看下控制台抛出的是什么错误，结果看到了 404，我的 ma 呀~

一开始怀疑是 polyfill 没做完美，这一下 404 把我思路又给搅乱了，开始怀疑是不是 Nginx 配置转发的问题，怀疑 App 在打开 webview 的时候做过的处理等等~

接着我又尝试了好几个 6、7、9 的安卓机型，都正常显示没有问题，**！

......

怎么办

咋办

模拟器！！

下载 Genymotion，装了一个 8.1 的安卓系统，开机----启动-----装上我们的 App 包

跑...跑起来了，还挺刘畅。。

这次排除了系统的问题

第二天，我一早去了门店，找到了这部小 Vivo，找了根 USB 线插电脑上就开整，先看下那个 404 是什么问题吧。

Google 中.....

原来，不确定是 App 配置的特性还是什么，正式环境打开 inspect 调试工具的话，这个上面加载的地址根本不是我的线上地址呀？？

看到这里，好像有了点思路，跟 chrome-devtool 有关系的，脑海中第一个想法就是 🪜

看了下公司的 VPN 是访问不了https://chrome-devtools-frontend.appspot.com/ 的

科学上网中....

成功访问https://chrome-devtools-frontend.appspot.com/

再次打开调试工具，成功打开页面，控制台抛出来了错误

查阅 MDN，发现 globalThis 最低兼容 Chrome71，目前 Chrome 版本为 68

可恶，为什么比 68 更低版本的浏览器就能够兼容，难不成要单独把 68 写到 polyfill 的 targets 中？

试了下 Chrome >= 50 的写法，光速上线

还是不行

先解决问题要紧

targets: ['Chrome 50', 'Chrome 68', 'Safari 11', '....']

这样写完美解决，耗时接近 1 整天。。

可恶，为什么比 68 更低版本的浏览器就能够兼容，难不成要单独把 68 写到 polyfill 的 targets 中？

带着这个疑问，我即将投入到 vite/plugin-legacy 的学习中，简单看了下官网，底层还是基于 babel 实现

https://babeljs.io/docs/options#targets

好吧，babel，淦。。

我来了^_^。