阿里发布新工具,直接帮你改代码!网友:工作量又减轻了~
欢迎关注方志朋的博客,回复”666“获面试宝典
来自:掘金,作者:阿里妈妈前端快爆
链接: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
热门内容:重磅消息:Spring 6 和Spring Boot 3
有个程序员老公有多爽???
如果要存 IP 地址,用什么数据类型比较好?大部人都会答错!当 Docker 遇到 Intellij IDEA,再次解放了生产力~你真的会写for循环吗?来看看这些常见的for循环优化方式
最近面试BAT,整理一份面试资料《Java面试BAT通关手册》,覆盖了Java核心技术、JVM、Java并发、SSM、微服务、数据库、数据结构等等。获取方式:点“在看”,关注公众号并回复 666 领取,更多内容陆续奉上。
明天见(。・ω・。)ノ♡
阿里发布新工具,直接帮你改代码!网友:工作量又减轻了~相关推荐
- Microsoft发布新工具,简化JavaScript Web应用的创建
Microsoft发布了一系列工具用于快速生成基于JavaScript的Web应用,这些工具包含了dotnet new和对Node.js的巧妙运用. dotnet new命令是.NET Core工具的 ...
- 精准投放、动态定价、更多成交,阿里的新优化算法帮广大淘宝卖家解决广告投放的难题...
雷锋网 AI 科技评论按:2017年8月13-17日,第23届国际知识发现与数据挖掘大会(KDD)在加拿大哈利法克斯召开.KDD的英文全称是Knowledge Discovery and Data M ...
- Mate 30 不预装任何谷歌应用;阿里巴巴发布新“六脉神剑”;VS Code 1.38 发布 | 极客头条...
快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「CSDN 极客头条」,是从 CSDN 网站延伸至官方微信公众号的特别栏目,专注于一天业界事报道.风里雨里,我们将每天为朋友们,播报最新鲜有 ...
- 程序员加班崩溃,过路外卖小哥主动帮忙改代码,网友直呼太暖了!
点击上方"视学算法",选择加"星标"或"置顶" 重磅干货,第一时间送达 有人说,成年人的崩溃总在一瞬间. 近日,一段青岛外卖小哥帮程序员写代 ...
- 请善用工具审核您的内核代码:)
在写内核代码时.代码风格(coding style)是一个非常重要的部分,否则内核代码将变的混乱不堪. 那么什么样的代码算美丽的代码?什么样的代码符合c99这种标准?此外,程序写完之后,有什么工具可以 ...
- 青岛程序员加班看不上球赛崩溃,外卖小哥伸出援手:我帮你改代码
整理 | 王晓曼 出品 | 程序人生(ID:coder _life) 近日,一段青岛外卖小哥帮奔溃程序员写代码的视频意外走红. 据了解,一程序员与朋友来酒吧看欧洲杯球赛,途中多次出去接听电话,最后不得 ...
- 程序员加班看不上球赛崩溃,外卖小哥伸出援手:我帮你改代码
整理 | 王晓曼 出品 | 程序人生(ID:coder _life) 近日,一段青岛外卖小哥帮奔溃程序员写代码的视频意外走红. 据了解,一程序员与朋友来酒吧看欧洲杯球赛,途中多次出去接听电话,最后不得 ...
- 基于 K8s 做应用发布的工具那么多, 阿里为啥选择灰姑娘般的 Tekton ?
作者 | 邓洪超,阿里云容器平台工程师, Kubernetes Operator 第二人,云原生应用标准交付与管理领域知名技术专家 导读:近年来,越来越多专门给 Kubernetes 做应用发布的工具 ...
- 【云周刊】第130期:阿里研究院发布新网商五大预测,2020年将诞生第一个机器人网商?
摘要: <2017中国SaaS用户研究报告>出炉,"新SaaS"引爆产业奇点!阿里巴巴1582.73亿背后的持续交付如何玩?淘宝造物节上都有哪些脑洞大开的创意产品... ...
最新文章
- #51CTO学院四周年#其实、其实,我就是来吐槽的”
- 和鸿蒙系统合作品牌,华为:明年将有超40家主流品牌、1亿台设备成为鸿蒙系统新入口...
- [Qt教程] 第45篇 进阶(五)Qt样式表
- 电脑运行卡顿怎么处理_【众点学】电脑运行PS卡顿?可能是你的虚拟内存没设置好!...
- 【剑指offer】调整数组顺序使奇数位于偶数前面
- gitlab 汉化后502
- 6.5 XGBoost实战
- EXCEL中IF函数的嵌套结构以及AND与OR的用法
- 超级AI买家阿里巴巴
- Linux at命令使用介绍
- 在线制作banner
- c35是什么意思_混凝土C35P6是什么意思
- 微信摇一摇抽奖的H5制作思路
- 华为Nova8缺货怎么办?这款手机也不错
- AnatomyNet: Deep Learning for Fast and Fully Automated Whole-volume Segmentation of Head and Neck An
- 基于HTML节日主题网页项目的设计与实现——圣诞节日介绍(HTML+CSS)
- Graphics.FromImage报错“Graphics object cannot be created from an image that has an indexed pixel ...”
- sbm matlab,超效率sbm模型matlab-如何用matlab估计空间杜宾模型
- 【手游】《少年三国志》完整修复全功能版-带GM后台和详细图文教程 亲测可编译运行
- 【SemiDrive源码分析】【MailBox核间通信】44 - 基于Mailbox IPCC RPC 实现核间通信(RTOS侧 IPCC_RPC Server 消息接收及回复 原理分析篇)