总体情况
大体情况是这样的,我们这做的app,内嵌h5,突然一天早上测试说,哎呀,进不去啦,白屏啦....我:...
排查思路
- 找ios要进入h5的链接,手机版本(因为并不是所有的手机都进不去),问了一下,iPhone 11,ios 11版本系统。(在线嫌弃,这是多少年前的系统了....)
- 链接感觉没问题。
完了,应该是h5这边的问题,看了一下手机上的效果。进入h5效果是:首先有滚动条,后面就没了,猜测应该是加载项目资源的时候,某行代码报错了,因为别的手机没问题,猜测,应该是写的某些代码会涉及到浏览器版本的原因。难道是某些ES6语法不兼容?
借助第三方工具排查
因为看不出什么报错信息,所以查了一下,可以安装Xcode来看h5报了什么错
好家伙,不识别扩展运算符
解决方法
- 引入babel转义扩展运算符的插件,注意插件名叫
plugin-proposal-object-spread
,
注:查找插件,可以在这个npm官网查找。我是直接下载的babel包,然后把要的插件安装包放到项目@babel下面的。(这里有个坑,待会说)
引入之后,坑来了,
npm run serve
准备飞起,完了,报错了,打开plugin-proposal-object-spread/lib/index.js
发现,要引用的包这个没有:
plugin-syntax-object-spread
,所以,
-
继续安装
plugin-syntax-object-spread
。为了以防万一,require
引用的包文件,都可以检查一下是否引入。 -
npm run serve
,准备再次飞起,完了,报错了
找到相对应的文件,发现api.targets() is not a function
,所以找到相对应的文件,
应该是这个文件helperPluginUtils
有点问题.
将这个包下面的index.js
替换成最新的。
npm run serve
,成功。npm run build --test
,打包成功。- 项目可以成功打开了。
总结
可能就是项目是内网开发,所以有的依赖包太老了,比如babel
,建议安装最新版babel
,这些扩展运算符依赖插件都会包含进去,省的自己替换是有风险的,像我上面虽然替换完文件可以解决问题,但不排除会有其他问题发生。