当前位置：首页 > 单片机 > 架构师社区

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

时间：2021-09-13 13:59:16
关键字： 代码   
[导读]来自：掘金，作者：阿里妈妈前端快爆链接：https://juejin.cn/post/6977259197566517284Vue3已经出来有一段时间了，很多朋友早已熟读了文档，写了好几个Demo，馋CompositionAPI等新特性已久了。无奈，在实际工作中，大部分朋友还是不...

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

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

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

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

阿里发布新工具，直接帮你改代码！网友：工作量又减轻了～还有一些就改起来有点麻烦，比如自定义指令生命周期的更名，和传入参数的一些细微变化：

阿里发布新工具，直接帮你改代码！网友：工作量又减轻了～
image.png
看到这种变化后，作为厌恶重复的程序员，已经开始盘算着能不能写个代码帮我们把这些规则批量给改好了，当然，写转换代码的代码要比写网页难上不少，还好我们之前已经有了一个趁手的工具：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]）

阿里发布新工具，直接帮你改代码！网友：工作量又减轻了～
image.png
阿里发布新工具，直接帮你改代码！网友：工作量又减轻了～
image.png
这里只是简单地介绍，完整的方案请参考：文档[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
本站声明： 本文章由作者或相关机构授权发布，目的在于传递更多信息，并不代表本站赞同其观点，本站亦不保证或承诺内容真实性等。需要转载请联系该专栏作者，如若文章内容侵犯您的权益，请及时联系本站删除（ 邮箱：macysun@21ic.com ）。
换一批
延伸阅读
[美通社全球TMT]

美国万通证券宣布完成其客户YXT.COM GROUP HOLDING Ltd（纳斯达克股票代码：YXT）150万美元的注册直接发行

纽约2026年8月18日 /美通社/ -- 美国万通证券作为美国金融业监管局及SIPC成员，总部位于纽约、提供全牌照服务的投资银行和证券经纪及交易商，今日宣布为其客户YXT.COM GROUP HOLDING Ltd（纳...

关键字： COM GROUP HOLDING 代码
[美通社全球TMT]

阿里云×软通动力：Qoder 重塑 FDE 交付新范式，共绘全栈 AI 转型新蓝图

北京2026年8月13日 /美通社/ -- 在 AI 重塑软件工程范式的当下，企业数智化转型正步入深水区。近日，全球领先的AI工厂全栈服务商软通动力宣布，全面引入阿里云全栈 Agentic 智能编程平台 Qoder，成功...

关键字： 阿里云 全栈 AI 代码
[美通社全球TMT]

美国万通证券宣布完成其客户YXT.COM GROUP HOLDING Ltd（纳斯达克股票代码：YXT）105万美元的注册直接发行

纽约2026年8月8日 /美通社/ -- 美国万通证券作为美国金融业监管局及SIPC成员，总部位于纽约、提供全牌照服务的投资银行和证券经纪及交易商，今日宣布为其客户YXT.COM GROUP HOLDING Ltd（纳斯...

关键字： COM GROUP HOLDING 代码
[美通社全球TMT]

多智能体协同进入企业AI应用，元脑企智EPAI 2.0发布

北京2026年8月6日 /美通社/ -- 伴随AI Coding等长流程场景的渗透，单一Agent已难以满足企业复杂的业务需求，由大量Agent持续并发运行、共同完成复杂业务的"多智能体群智协同&qu...

关键字： AI 智能体 测试 代码
[美通社全球TMT]

Quantinuum将于2026年8月11日公布第二季度财务业绩

科罗拉多州布鲁姆菲尔德2026年7月29日 /美通社/ -- Quantinuum Inc.（纳斯达克股票代码：QNT）（简称“Quantinuum”）今日宣布，将于2026...

关键字： ANTI 量子计算 CCD 代码
[美通社全球TMT]

霍尼韦尔科技公布2026年第二季度业绩

美国北卡罗来纳州夏洛特2026年7月24日 /美通社/ -- 霍尼韦尔科技（纳斯达克代码：HON）近日公布了2026年第二季度业绩。合并财报包含霍尼韦尔航空航天（纳斯达克代码：HONA）的经营数据。霍尼韦尔航空航天已于2...

关键字： 霍尼韦尔 航天 代码 自动化
[技术前线]

一文搞懂程序设计原则之单一职责原则

在软件工程数十年的迭代历程中，无数开发者都曾遭遇过“上帝类”带来的噩梦：一个数千行的类里同时混杂了数据查询、格式转换、日志打印、异常处理等十多种完全不相关的逻辑，每次修改其中一个小功能，都要通读整个类的所有代码，稍有不慎...

关键字： 程序 代码
[厂商动态]

AI编写代码，谁来保证质量？

AI编程助手已经彻底改变了一名开发者一个上午能完成的工作量。过去需要几个小时才能理清思路、写出草稿的代码，现在几秒钟就能生成。对于探索性工作和快速原型开发来说，这种效率提升是实实在在的。

关键字： AI编程助手 代码 嵌入式
[美通社全球TMT]

英矽智能与保瑞药业签署战略合作，共同推进人工智能驱动的药物研发

结合英矽智能的Pharma.AI平台与保瑞在全球范围内的研发、生产、质量控制及商业化能力，探索创新的药物研发模式 上海和台北2026年7月15日 /美通社/ -- 由生成式人工智能（AI）驱动的临床阶段生物科技公司英矽...

关键字： 人工智能 智能驱动 ARMA 代码
[美通社全球TMT]

信达生物与礼来就唯择®（阿贝西利片）在中国大陆达成商业化合作协议

美国旧金山和中国苏州2026年6月30日 /美通社/ -- 信达生物制药集团（香港联交所股票代码：01801），一家致力于研发、生产和销售肿瘤、自身免疫、代谢及心血管、眼科等重大疾病领域创新药物的生物制药公司，今日和礼来...

关键字： CD BSP 代码 OV
关闭