阿里发布新工具，直接帮你改代码！网友：工作量又减轻了～-CSDN博客

推荐大家关注一个公众号

点击上方 "编程技术圈"关注, 星标或置顶一起成长

后台回复“大礼包”有惊喜礼包！

每日英文

Somethings，I don't talk，I don't ask，don't mean I don't care. No one indebted for others,while many people don't know how to cherish others.

有些事，我不说，我不问，不代表我不在乎。没有谁对不起谁，只有谁不懂得珍惜谁。

每日掏心话

上天很公平，我们得到的永远都和失去的一样多。谁没有难的时候，熬不过去，我们就不配得到更好的一切。

责编：乐乐 | 来自：阿里妈妈前端快爆 链接：juejin.cn/post/6977259197566517284

编程技术圈(ID:study_tech)第 1304次推文

往日回顾：腾讯员工吐槽：团队来了个阿里高p，瞬间会议变多，群多了

正文

Vue3 已经出来有一段时间了，很多朋友早已熟读了文档，写了好几个 Demo，馋 Composition API 等新特性已久了。无奈，在实际工作中，大部分朋友还是不得不守着成千上万行的 Vue2 老项目过日子，做一次框架升级就像给老房子装修——念头总是充沛，决心总是匮乏。
其实 Vue 团队已经尽可能地减少了破坏性更新，还提供了一份细致的迁移指南，条数不少，但定睛一看，大部分都是体力活，有些很简单，比如异步组件要多包上一层：
还有一些就改起来有点麻烦，比如自定义指令生命周期的更名，和传入参数的一些细微变化：


看到这种变化后，作为厌恶重复的程序员，已经开始盘算着能不能写个代码帮我们把这些规则批量给改好了，当然，写转换代码的代码要比写网页难上不少，还好我们之前已经有了一个趁手的工具：GoGoCode。
作为一个更简单的 AST 处理工具，能大大减轻转换逻辑的书写难度，简直就是为了这事儿量身打造的！
于是我们梳理了迁移指南里提到的，附带上 vue-router \ vuex 升级的一些 API 变化，配合 GoGoCode 书写了近 30 条转换逻辑，涵盖了 Vue2 到 Vue3 代码 break change 的大部分场景，这个程序可以帮助你一键把 Vue2 的代码转换成 Vue3 的代码。
上面提到的两条 Vue2 到 Vue3 的差异对比中，右侧 Vue3 的代码就是通过这个工具根据左侧 Vue2 代码原片直出的，效果还不错吧 ^_^，我们来一起试一下！
尝试一下全局安装 gogocode-clinpm 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 试了一下，发现在转换的基础上只要稍作改动再改一下构建流程就能跑起来了，一些转换的 Diff 如下：

这里只是简单地介绍，完整的方案请参考：文档
实现比预想的要简单很多为了达成转换目的，GoGoCode 新增支持了对 .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 新特性的研发！项目伊始，存在的不足之处希望得到大家的反馈和帮助：
Github：https://github.com/thx/gogocode（本项目在 packages/gogocode-plugin-vue/ 目录下）
官网：gogocode.io你还有什么想要补充的吗？
PS：欢迎在留言区留下你的观点，一起讨论提高。如果今天的文章让你有新的启发，欢迎转发分享给更多人。

版权申明：内容来源网络，版权归原创者所有。除非无法确认，我们都会标明作者及出处，如有侵权烦请告知，我们会立即删除并表示歉意。谢谢!

欢迎加入后端架构师交流群，在后台回复“学习”即可。

最近面试BAT，整理一份面试资料《Java面试BAT通关手册》，覆盖了Java核心技术、JVM、Java并发、SSM、微服务、数据库、数据结构等等。在这里，我为大家准备了一份2021年最新最全BAT等大厂Java面试经验总结。
别找了，想获取史上最简单的Java大厂面试题学习资料
扫下方二维码回复「面试」就好了


猜你还想看
阿里、腾讯、百度、华为、京东最新面试题汇集
消息幂等（去重）通用解决方案，真顶！

历史上第一个网页它长啥样？？？

详解ＭＱ消息队列及四大主流ＭＱ的优缺点

嘿，你在看吗？