重磅:阿里发布神器工具,直接帮你改代码,我高潮了!网友:工作量又减轻了!...
上一篇:一个90后员工猝死的全过程
0、2T架构师学习资料干货分享
作者:阿里妈妈前端快爆
链接:https://juejin.cn/post/6977259197566517284
Vue3 已经出来有一段时间了,很多朋友早已熟读了文档,写了好几个 Demo,馋 Composition API 等新特性已久了。无奈,在实际工作中,大部分朋友还是不得不守着成千上万行的 Vue2 老项目过日子,做一次框架升级就像给老房子装修——念头总是充沛,决心总是匮乏。
其实 Vue 团队已经尽可能地减少了破坏性更新,还提供了一份细致的迁移指南[1],条数不少,但定睛一看,大部分都是体力活,有些很简单,比如异步组件要多包上一层:
还有一些就改起来有点麻烦,比如自定义指令生命周期的更名,和传入参数的一些细微变化:
看到这种变化后,作为厌恶重复的程序员,已经开始盘算着能不能写个代码帮我们把这些规则批量给改好了,当然,写转换代码的代码要比写网页难上不少,还好我们之前已经有了一个趁手的工具:GoGoCode[2]。
我们之前的文章《阿里妈妈出的新工具,给批量修改项目代码减轻了痛苦》[3]介绍过它,作为一个更简单的 AST处理工具,能大大减轻转换逻辑的书写难度,简直就是为了这事儿量身打造的!
于是我们梳理了迁移指南[4]里提到的,附带上 vue-router \ vuex 升级的一些 API 变化,配合 GoGoCode[5] 书写了近 30 条转换逻辑,涵盖了 Vue2 到 Vue3 代码 break change 的大部分场景,这个程序可以帮助你一键把 Vue2 的代码转换成 Vue3 的代码。
上面提到的两条 Vue2 到 Vue3 的差异对比中,右侧 Vue3 的代码就是通过这个工具根据左侧 Vue2 代码原片直出的,效果还不错吧 ^_^,我们来一起试一下!
尝试一下
全局安装 gogocode-cli
npm install gogocode-cli -g
复制代码
在终端(terminal)中跳转到需要升级的 Vue 项目路径。如果需要升级 src 路径下的 Vue 代码,执行如下命令
gogocode -s ./src -t gogocode-plugin-vue -o ./src-out
复制代码
转换操作执行完毕后新的 Vue3 代码会被写入到 src-out 目录中
我们拿 Vue2 的官方示例项目 vue-hackernews-2.0[6] 试了一下,发现在转换的基础上只要稍作改动再改一下构建流程就能跑起来了,一些转换的 Diff 如下:(查看完整 Diff[7])
这里只是简单地介绍,完整的方案请参考:文档[8]
实现比预想的要简单很多
为了达成转换目的,GoGoCode[9] 新增支持了对 .vue 文件的解析,我们可以轻松地获取到解析好的 template 和 scirpt AST节点,并利用 GoGoCode 方便的 API 进行处理。
一些简单的规则,比如前面介绍的异步组件转换直接进行类似字符串的替换即可,由于是基于 AST 的,所以无需关心代码格式,工作量是很小的:
script.replace('() => import($_$)', 'Vue.defineAsyncComponent(() => import($_$))').replace(`() => ({component: import($_$1),$$$})`,`Vue.defineAsyncComponent({loader: () => import($_$1),$$$})`);
这次项目也检验了 GoGoCode 对复杂情况的处理,就像前面提到的自定义指令生命周期的变化,也很轻松地做到!
开源了,希望能得到大家的反馈
吃水不忘挖井人,希望这些工作能为 Vue 开源社区做些贡献,让社区尽快享受到Vue3带来的技术红利,也让Vue团队的成员能够拜托 Vue2 的历史包袱,更加聚焦于Vue3新特性的研发!项目伊始,存在的不足之处希望得到大家的反馈和帮助:
issues: github.com/thx/gogocod…[10]
钉钉群:34266233
最后:求 star 支持!
Github:github.com/thx/gogocod…[11](本项目在 packages/gogocode-plugin-vue/ 目录下)
官网:gogocode.io[12]
附录:当前转换规则覆盖
规则 | 转换支持 | 文档 |
---|---|---|
v-for 中的 Ref 数组 | ✔ | 链接[13] |
异步组件 | ✔ | 链接[14] |
attribute 强制行为 | ✔ | 链接[15] |
$attrs包含class&style | ✔ | 链接[16] |
$children | ✖️ | 链接[17] |
自定义指令 | ✔ | 链接[18] |
自定义元素交互 | 无需转换 | 链接[19] |
Data 选项 | ✔ | 链接[20] |
emits选项 | ✔ | 链接[21] |
事件 API | ✔ | 链接[22] |
过滤器 | ✔ | 链接[23] |
片段 | ✔ | 链接[24] |
函数式组件 | ✔ | 链接[25] |
全局 API | ✔ | 链接[26] |
全局 API Treeshaking | ✔ | 链接[27] |
内联模板 Attribute | ✖️ | 链接[28] |
keyattribute | ✔ | 链接[29] |
按键修饰符 | ✔ | 链接[30] |
移除 $listeners | ✔ | 链接[31] |
挂载API变化 | ✔ | 链接[32] |
propsData | 开发中 | 链接[33] |
在 prop 的默认函数中访问this | 无需转换 | 链接[34] |
渲染函数 API | ✔ | 链接[35] |
插槽统一 | ✔ | 链接[36] |
Suspense | 无需转换 | 链接[37] |
过渡的 class 名更改 | ✔ | 链接[38] |
Transition 作为 Root | 开发中 | 链接[39] |
Transition Group 根元素 | ✔ | 链接[40] |
移除v-on.native修饰符 | ✔ | 链接[41] |
v-model | ✔ | 链接[42] |
v-if 与 v-for 的优先级对比 | ✔ | 链接[43] |
v-bind 合并行为 | ✔ | 链接[44] |
VNode 生命周期事件 | 开发中 | 链接[45] |
Watch on Arrays | ✔ | 链接[46] |
vuex | ✔ | 链接[47] |
vue-router | ✔ | 链接[48] |
参考资料
[1]
迁移指南:https://v3.cn.vuejs.org/guide/migration/array-refs.html
[2]
GoGoCode:https://github.com/thx/gogocode
[3]
《阿里妈妈出的新工具,给批量修改项目代码减轻了痛苦》: https://juejin.cn/post/6938601548192677918
[4]
迁移指南:https://v3.cn.vuejs.org/guide/migration/array-refs.html
[5]
GoGoCode: https://github.com/thx/gogocode
[6]
vue-hackernews-2.0: https://github.com/vuejs/vue-hackernews-2.0
[7]
查看完整 Diff: https://github.com/thx/gogocode/commit/6506a0e693aff1896da6c8863fa7e7c72d89610f?branch=6506a0e693aff1896da6c8863fa7e7c72d89610f&diff=split
[8]
文档: https://gogocode.io/zh/docs/specification/vue2-to-vue3
[9]
GoGoCode: https://github.com/thx/gogocode
[10]
github.com/thx/gogocod…: https://github.com/thx/gogocode/issues
[11]
github.com/thx/gogocod…: https://github.com/thx/gogocode
[12]
gogocode.io: https://gogocode.io
看完这篇文章,你有什么收获?欢迎在留言区与10w+Java开发者一起讨论~
感谢您的阅读,也欢迎您发表关于这篇文章的任何建议,关注我,技术不迷茫!小编到你上高速。
· END ·
最后,关注公众号互联网架构师,在后台回复:2T,可以获取我整理的 Java 系列面试题和答案,非常齐全。
正文结束
推荐阅读 ↓↓↓
1.不认命,从10年流水线工人,到谷歌上班的程序媛,一位湖南妹子的励志故事
2.如何才能成为优秀的架构师?
3.从零开始搭建创业公司后台技术栈
4.程序员一般可以从什么平台接私活?
5.37岁程序员被裁,120天没找到工作,无奈去小公司,结果懵了...
6.IntelliJ IDEA 2019.3 首个最新访问版本发布,新特性抢先看
7.这封“领导痛批95后下属”的邮件,句句扎心!
8.15张图看懂瞎忙和高效的区别!
一个人学习、工作很迷茫?
点击「阅读原文」加入我们的小圈子!
重磅:阿里发布神器工具,直接帮你改代码,我高潮了!网友:工作量又减轻了!...相关推荐
- 推荐一款 IDEA 神器 ,人工智能帮你写代码,再也不用加班了!!
今天栈长给大家推荐一款代码神器,人工智能帮你写代码,简直爽的不行,关键还是免费的,一起来看看. 简介 Codota 是一款优秀的 AI 代码自动完成工具,可以帮助我们极大的提高开发效率. 官网:htt ...
- 阿里发布新工具,直接帮你改代码!网友:工作量又减轻了~
欢迎关注方志朋的博客,回复"666"获面试宝典 来自:掘金,作者:阿里妈妈前端快爆 链接:https://juejin.cn/post/6977259197566517284 Vu ...
- 请善用工具审核您的内核代码:)
在写内核代码时.代码风格(coding style)是一个非常重要的部分,否则内核代码将变的混乱不堪. 那么什么样的代码算美丽的代码?什么样的代码符合c99这种标准?此外,程序写完之后,有什么工具可以 ...
- 基于 K8s 做应用发布的工具那么多, 阿里为啥选择灰姑娘般的 Tekton ?
作者 | 邓洪超,阿里云容器平台工程师, Kubernetes Operator 第二人,云原生应用标准交付与管理领域知名技术专家 导读:近年来,越来越多专门给 Kubernetes 做应用发布的工具 ...
- 云重磅 | 阿里巴巴平均每天纳税超1.4亿;谷歌、Face book与AWS将共建美欧新海底电缆;阿里发布谣言粉碎机:1秒辨真伪...
戳蓝字"CSDN云计算"关注我们哦! 嗨,大家好,重磅君带来的[云重磅]特别栏目,如期而至,每周二第一时间为大家带来重磅新闻.把握技术风向标,了解行业应用与实践,就交给我重磅君吧! ...
- “如果你害怕成为陈冠希,彻底删除文件工具来帮你”--彻底删除文件(File Delete Absolutely)1.02发布...
"你如果害怕成为陈冠希,彻底删除文件工具来帮你". 在当今社会中,人们越来越多地依靠计算机来办公.每个人也习惯于在计算机中保存自已的各种文档.视频.相片.这在方便每个人的同时,也会 ...
- “如果你害怕成为陈冠希,彻底删除文件工具来帮你”--彻底删除文件(File Delete Absolutely)1.02发布
"你如果害怕成为陈冠希,彻底删除文件工具来帮你". 在当今社会中,人们越来越多地依靠计算机来办公.每个人也习惯于在计算机中保存自已的各种文档.视频.相片.这在方便每个人的同时,也会 ...
- 【每日新闻】欧盟委员会对华硕等4家公司处以1.3亿美元罚款;谷歌发布多款AI工具:帮大众更好地利用人工智能...
点击关注中国软件网 最新鲜的企业级干货聚集地 趋势洞察 2018中国软件生态大会 厦门站就要与您见面啦! 点击文末[阅读原文]了解更多喔 趋势洞察 工业和信息化部:希望和世界各国半导体企业密切合作 工 ...
- DeepMind和暴雪联手发布开发工具和replay数据集,让更多AI研究者玩上星际2
雷锋网 AI 科技评论按:去年年底的时候,大家都知道了 DeepMind 的人工智能要开始玩星际了,今天DeepMind 也正式发布了论文和相关博文介绍了自己在这方面的成果,他们与暴雪联手发布了一系列 ...
- ps 2021正式版更新,逆天神器Neural Filters帮你智能修复
ps 2021正式版更新,新版的PS 2021中新增了很多实用的功能,其中Neural Filters功能非常令很多朋友期待,依靠强大的云端Ai神经网络,它可以帮我们把复杂的操作简单化,大大提高了我们 ...
最新文章
- Y项目轶事之入场半个月
- java properties读取 封装_java properties 文件读取踩坑记
- 【重大更新】DevExpress v17.1新版亮点(DevExtreme HTML5/JS篇)
- 完全背包问题 POJ1384
- mysql中char,varchar,text
- 如何更新android v7 support library,新手入门之Android Support Library | Soo Smart!
- 【PHP7.2+】win10安装laravel(完整版,包含运行)
- 2020年你应该学习 .Net Core
- Exynos4412 Uboot 移植(一)—— Uboot 编译流程分析
- java选课系统_java实现学生选课系统
- oracle+greatest+max,ORACLE 内置函数之 GREATEST 和 LEAST(求多列的最大值,最小值)
- 基于队列的二叉树层次遍历
- Tomcat的Document base ……does not exist or is not a readable directory错误
- pe安装linux 12.04,乌班图系统Ubuntu 12.04安装教程(图文详解)
- CTF密码图鉴(持续更新)
- nwjs编写浏览器外壳
- APP UI结构-首页功能点大集锦,很干很详细
- 补充:Log4j2日志文件,RollingFile的文件滚动更新机制;
- DSA-数据签名算法(理论)
- VSCode嵌入式硬件开发环境设置