Jenkins发布uniapp开发的H5遇到的问题

 

目录

​编辑 

前言：

一、问题：        

二、解决经历：

        1、思路1（不成功）：

       2、 思路2（成功）：        

三、原因分析：

总结

---

前言：

       背景：由于历史原因，公司有个历史项目使用vue开发的公众号H5，原生开发的微信小程序。两端功能的完全一样，但是需要维护两个项目，最近客户提了需求需要修改部分功能，博主接到需求后，觉得维护两套代码不仅是重复开发，测试起来也麻烦，因为之前是两个人开发不同端的缘故，导致大部分的bug都是因为两端不一致产生的。为了节省时间和维护成本，提升开发测试效率，在反复对比调研，最终选择了uniapp技术框架融合两端进行重构。

---

一、问题：        

        公司使用Jenkins发布公众号H5,在使用uniapp之前，发布一直很稳定，更换uniapp后，发布公众号H5偶尔就会莫名的出现异常，搞得我和运维都很头疼,报错如下：

---

 

二、解决经历：

        异常抛出无法定位是前端问题还是运维部署的问题，一开始只能走常规的Jenkins报错搜索流程，但是这个很奇怪Jenkins发布正常，只是项目没办法运行，只有控制台上诉截图的错，所以根本就找不到对应的解决方案，只能继续在猜测是不是Jenkins这里是不是有问题。

        1、思路1（不成功）：

        因为本地编译，本地打包发布都可以成功，后来猜测是不是本地的node版本跟Jenkins线上配置的node版本不对呢，于是我们进行了又一次的尝试，将本地的node版本修改到跟线上一样尝试排错，不试还好，一试吓一跳，试过之后本地打包也有问题了。还好之前做了一下备份，不然备用的发版方案都没有了...

       2、 思路2（成功）：        

        再调整思路，本地调试发现报错的地方指向的位置用的 async+await ,于是就怀疑是不是node中解析ES6转ES5的babel插件版本有问题，因为我本地一直用的是yarn,这次尝试删除 node-modules，node 版本还是固定在 14，使用npm install，然后npm run serve试试，最后可以了.

---

三、原因分析：

        yarn install 报错的原因是因为 npm 和 yarn 安装依赖时合并策略不同，导致依赖版本与预期不同导致。
如果仍要通过 yarn 管理依赖，可修改项目根目录 package.json 中 devDeps 依赖 @babel/runtime 的版本为 ~7.17.9，并增加

···
"resolutions":{
"@babel/runtime": "~7.17.9"
}
···

锁定该依赖版本。

---

总结

        问题发现到解决，一开始方向不对以为是Jenkins的问题，浪费了些精力，然后调整方向，一直到之后找到解决方案。虽然很曲折，但还是很开心。故记录一下。希望这个记录能帮到看到这篇文章的小伙伴。