阿里发布新工具，直接帮开发改代码

最新推荐文章于 2024-10-01 18:51:18 发布

Github中文社区

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量122

点赞数

文章标签： java vue python 编程语言 react

原文链接：https://mp.weixin.qq.com/s?__biz=MzU3ODMwNTk1NA==&mid=2247495877&idx=2&sn=4664cc97a32e0619430ba919b0d31295&chksm=fd75da08ca02531ef90856907517318ca392b681174b04f848dbc4e45f9f713babf86b5e6c49&scene=126&&sessionid=0

版权

点击上方“Github中文社区”，关注

看遍Github好玩的项目

来自：掘金，作者：阿里妈妈前端快爆

链接：https://juejin.cn/post/6977259197566517284

最近 huber 看到一个技术消息：阿里发布新工具，直接帮开发改代码。我们看看具体是什么？

Vue3 已经出来有一段时间了，很多朋友早已熟读了文档，写了好几个 Demo，馋 Composition API 等新特性已久了。无奈，在实际工作中，大部分朋友还是不得不守着成千上万行的 Vue2 老项目过日子，做一次框架升级就像给老房子装修——念头总是充沛，决心总是匮乏。

其实 Vue 团队已经尽可能地减少了破坏性更新，还提供了一份细致的迁移指南^[1]，条数不少，但定睛一看，大部分都是体力活，有些很简单，比如异步组件要多包上一层：

还有一些就改起来有点麻烦，比如自定义指令生命周期的更名，和传入参数的一些细微变化：

看到这种变化后，作为厌恶重复的程序员，已经开始盘算着能不能写个代码帮我们把这些规则批量给改好了，当然，写转换代码的代码要比写网页难上不少，还好我们之前已经有了一个趁手的工具：GoGoCode[2]。作为一个更简单的 AST处理工具，能大大减轻转换逻辑的书写难度，简直就是为了这事儿量身打造的！

于是我们(阿里妈妈前端团队)梳理了迁移指南里提到的，附带上 vue-router \ vuex 升级的一些 API 变化，配合 GoGoCode 书写了近 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 试了一下，发现在转换的基础上只要稍作改动再改一下构建流程就能跑起来了，一些转换的 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新特性的研发！项目伊始，存在的不足之处希望得到大家的反馈和帮助：

issues: github.com/thx/gogocod…[10]

Github：github.com/thx/gogocod…[11]（本项目在 packages/gogocode-plugin-vue/ 目录下）

官网：gogocode.io[12]

附录：当前转换规则覆盖

规则	转换支持
v-for 中的 Ref 数组	✔
异步组件	✔
attribute 强制行为	✔
$attrs包含class&style	✔
$children	✖️
自定义指令	✔
自定义元素交互	无需转换
Data 选项	✔
emits选项	✔
事件 API	✔
过滤器	✔
片段	✔
函数式组件	✔
全局 API	✔
全局 API Treeshaking	✔
内联模板 Attribute	✖️
keyattribute	✔
按键修饰符	✔
移除 $listeners	✔
挂载API变化	✔
propsData	开发中
在 prop 的默认函数中访问this	无需转换
渲染函数 API	✔
插槽统一	✔
Suspense	无需转换
过渡的 class 名更改	✔
Transition 作为 Root	开发中
Transition Group 根元素	✔
移除v-on.native修饰符	✔
v-model	✔
v-if 与 v-for 的优先级对比	✔
v-bind 合并行为	✔
VNode 生命周期事件	开发中
Watch on Arrays	✔
vuex	✔
vue-router	✔

感觉如何啊？是不是忍不住想尝试一下?

OK！到这就是这期分享
如果觉得文章有用，请点赞在看，分享。点这里👇关注我，记得标星呀～


历史阅读


★ GitHub上10k+点赞，一套强大的后台管理系统竟然出了详细教程！★  字节跳动又一开源力作发布★  SQLite 作者最新开源力作★  完美抠图王冰冰！字节实习生开发的AI，实现4K60帧视频实时抠图，连头发丝都根根分明

点个在看呗！