阿里发布新工具，直接帮你改代码！网友：工作量又减轻了～
时间：2021-09-13 13:59:16
手机看文章
扫描二维码
随时随地手机看文章
[导读]来自：掘金，作者：阿里妈妈前端快爆链接：https://juejin.cn/post/6977259197566517284Vue3已经出来有一段时间了，很多朋友早已熟读了文档，写了好几个Demo，馋CompositionAPI等新特性已久了。无奈，在实际工作中，大部分朋友还是不...
来自：掘金，作者：阿里妈妈前端快爆链接：https://juejin.cn/post/6977259197566517284Vue3 已经出来有一段时间了，很多朋友早已熟读了文档，写了好几个 Demo，馋 Composition API 等新特性已久了。无奈，在实际工作中，大部分朋友还是不得不守着成千上万行的 Vue2 老项目过日子，做一次框架升级就像给老房子装修——念头总是充沛，决心总是匮乏。其实 Vue 团队已经尽可能地减少了破坏性更新，还提供了一份细致的迁移指南[1]，条数不少，但定睛一看，大部分都是体力活，有些很简单，比如异步组件要多包上一层：
还有一些就改起来有点麻烦，比如自定义指令生命周期的更名，和传入参数的一些细微变化：尝试一下
全局安装 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[6] 试了一下，发现在转换的基础上只要稍作改动再改一下构建流程就能跑起来了，一些转换的 Diff 如下：（查看完整 Diff[7]）实现比预想的要简单很多
为了达成转换目的，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
本站声明： 本文章由作者或相关机构授权发布，目的在于传递更多信息，并不代表本站赞同其观点，本站亦不保证或承诺内容真实性等。需要转载请联系该专栏作者，如若文章内容侵犯您的权益，请及时联系本站删除。
换一批
延伸阅读
|
下载文档
