苏州外贸网站建站,电商平面设计前景如何,东莞市领导班子,广州网站建设定制多少钱框架升级背景
公司目前业务迭代很快#xff0c;且大部分的流量都在公众号上。然而我们公众号所使用的框架却是3年前的Vue 1.0.16。面对Vue这3年来带来的无数新特性#xff0c;我们只能望洋兴叹#xff1a;看得见#xff0c;摸不着#xff0c;因为升级这事看起来太难了。 …框架升级背景
公司目前业务迭代很快且大部分的流量都在公众号上。然而我们公众号所使用的框架却是3年前的Vue 1.0.16。面对Vue这3年来带来的无数新特性我们只能望洋兴叹看得见摸不着因为升级这事看起来太难了。
经常可以听到老同事、新同事对老框架频频吐槽也听到很多同学说升级太难了完全不可能。
于是我就寻思着整点事。
升级概况
我们的公众号承载的是一个电商购物平台历经3年多的版本迭代积攒了无数的业务代码既臃肿又庞大可谓是一个大型的应用程序了。这也是其他同学提到升级不可能的主要原因。
当前的Vue版本: v1.0.16, Vue—Router版本: v0.7.13. 升级后的目标版本:Vue: v2.6.10, Vue—Router: v3.1.3.
升级思路
因为Vue官方有对Vue 1.x迁移到更高版本的说明, 并且还提供了升级助手那升级的事情完全依赖升级助手便可完成。不过事实是这样吗
开始动手
下载好官方提供的”迁移工具“然后在项目的master分支上检出一个新的专门用来做升级的分支我是这么命名的update/vue2vue2.x。
好了准备工作就绪只需要执行”迁移工具“就可以。Let’s do it!
Holy Shit! 建议改进多达近900个这工具居然只有提示没有自动修复这太出乎我的意外了 这难办了问题太多了难道要我一个个手动修复不过我马上发现有不少Replace之类的提示这家伙完全可以自己完成啊不过这工具的作者比较懒没写。那我就用这个工具帮我来完成大部分的工作吧。
修改迁移工具
迁移工具在Github上可以直接找到然后打开源码阅读找到它的处理方式然后修改其中实现这个过程就不多说了无非是找到匹配规则然后读文件按照规则替换再写文件。我对一些明显能够自动替换的能力做了处理比如上图中的898号问题那这个工具可以帮我自动完成这个能力的。
我的这个工具可能会帮到其它朋友这里来列一下修改之后提供的能力
- router.go更换为router.push
- ready生命周期回调更改为mounted这个使用要谨慎
- 更改v-for循环的解构顺序例如v-for(key, item) in provinceList 可以自动替换为v-for(item, key) in provinceList
- 更改回调函数的调用方式例如Replace cutword 10 with cutword(10)
- 更改三括号运算符为v-html例如Replace {{{content}}} with v-htmlcontent on a containing element
- 等等等大概修改了这么些文件 我已将修改后的项目开源需要使用的同学请自取使用前请慎重。 https://github.com/sahadev/vue-migration-helper
如果使用上有问题也可联系我。需要使用调试的方式使用正常方式目前有问题。 node index.js 项目地址 通过工具的自动调整最终运行后的结果如下 已从899个提示减少到243解决了656个问题解决占比73%一共调整149个文件。已经缩短了大量的工作接下里的问题就需要进行更精细化的调整或者手工操作了。而我接下来选择的是手动修改。先让自动修改的代码跑起来。
运行自动修改后的代码
首要做的应该是调整Vue的框架版本那么我从官网上拿到了最新的Vue: v2.6.10与Vue-Router: v3.1.3进行替换并开始运行。
果不其然遇到了编译问题 如果使用我工具的朋友会遇到这个问题这个地方为了不影响代码的执行过程让使用者自行调整生命周期追加了这个提示我这里需要手动修改为mounted。
修改完成后编译成功 但运行情况怎么样呢 Vue-tools已经侦测到了Vue的版本但是界面上一片空白这是什么情况这种情况下最好的办法就是一步步替换我找到了最新Vue的使用方式并尝试运行了一个Demo然后看最小单位如何执行可行的话再进行移植。
逐步替换
因为项目太大又很老这个排查的过程花费了很多的时间与精力。这是一个耐心细致的过程在这个过程中几次想放弃但最后从结果来看是坚持下来了。这个每个人可能遇到的情况不一样就不专门提及这些琐碎的事情了。
趟过了很多坑之后主要的几个页面都跑起来了展示正常点击事件正常主交易流程可以跑通。到这里只是说主框架的坑趟完了剩下的事情就是集结其他小伙伴分模块实施然后协调资源做最终回归测试的过程了。
更新之前 更新之后
后话
协调资源做完回归测试还需要灰度发布到线上监控运行情况趋于稳定后才能在这个新的框架上继续做业务开发这更是一个漫长的过程不过希望的曙光已经可以看见。
