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-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 如下:(查看残缺 Diff)

这里只是简略地介绍,残缺的计划请参考:文档

实现比料想的要简略很多

为了达成转换目标,GoGoCode 新增反对了对 .vue 文件的解析,咱们能够轻松地获取到解析好的 template 和 script 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: https://github.com/thx/gogocode/issues

钉钉群:34266233

最初:求 star 反对!

Github:github.com/thx/gogocod…(本我的项目在 packages/gogocode-plugin-vue/ 目录下)

官网:gogocode.io

附录:以后转换规则笼罩

规定转换反对文档
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链接