写一个vscode插件改善web项目的多版本维护难题

写一个vscode插件改善web项目的多版本维护难题

背景

先设想一个场景,如果你的项目存在多个版本同时维护,不同版本代表着不同时期的不同技术栈和不同的功能,分别有各自的客户群在使用。日常,一个bugfix或者一个新功能要应用在这些版本上,你需要逐个版本去切换,逐个去重装依赖,跑服务自测,这种来回操作无疑是最耗时间的。

mv.png

以笔者为例,所在团队主要维护ToB项目,每个项目都存在多版本同时维护的情况,比如项目A交付给不同客户使用后,后续的迭代是以版本的形式让客户付费升级的,客户也可以购买不同的版本,时间长了以后就会出现V1.0,V2.0,V3.0... ...这种多版本不同客户群使用的情况,常规开发流程中,某个feature或者bugfix在V1.0上开发完以后,如果要应用到2.0,3.0...等其它版本,就要逐个提交然后检出切换不同版本开发维护,版本相近的代码还好,cherry-pick可以直接应用这次commit,而版本跨度大业务代码差距大的时候,这种切换检出分支的动作必不可少。即使通过新建文件夹的形式clone多份代码,也需要开很多个vscode去来回切换。而更麻烦的是,如果要跑项目自测或者开发预览,还面临着频繁重装依赖等繁琐耗时的操作,肆意地消耗着我们的开发时间成本。

如何通过技术手段改善这种状况呢?或者如果有个工具或者插件能把所有版本的文件列出来就好了,这样不同版本间的文件就可以很方便的在当前编辑器面板直接coding或者跑服务。

基于这个想法,决定开发出一个vscode插件来实现多版本便捷维护的工具。

解决方案

团队内使用的开发工具是vscode,可以通过开发插件方式解决上述问题,工具主要功能:

  • 列出所有分支(即版本)供检出;
  • 检出的分支与当前项目并列,方便实时点开任意文件;
  • 添加终端打开功能;

最终效果预览

列出项目版本(分支)供检出:

choose-branches.gif

当前面板开发检出过的多版本文件:

checkout-branches.gif

技术实现

项目版本或分支管理用git,版本是用git分支来区分的,也就意味着我们需要先读取所有项目分支信息并列出,然后根据需要检出要维护的版本分支。

实现分析:

  • 列出分支:可以约定所有大版本都用递增分支名方便标识,如:v1.0.0, v2.0.0
  • 版本检出:利用 git worktree

列出分支

可以利用node的child_process开启一个子进程,利用spawn或者exec方法执行git branch -ar终端命令获取所有版本信息。

为了简化实现,我是利用第三方库simple-git来执行git命令的。

simple-git是一个轻量级接口,它使得在node应用中也可以操作git,执行各种git命令。(A light weight interface for running git commands in any node.js application.):

这里利用simple-git核心方法之一 --branch查询所有分支信息,核心代码:

image.png

版本检出

版本检出是这个工具的核心技术难点。

正常情况下,同级目录git是不可以检出同一个项目地址的,这也是导致我们多版本维护遇到麻烦的主要原因之一。笔者在这里利用git worktree来绕过这个限制。git worktree是一个比较冷门的功能,日常项目用得很少。它实现了一个仓库多个工作树(分支)的检出功能。

Git worktree是15年git推出的多仓库多工作区管理模式:一个git仓库可以支持多个工作树,分别对应不同的分支。我们在git中通过"git init"或"git clone"创建一个(主)工作区(树)(main working tree)。 具体资料:git-scm.com/docs/git-wo…

simple-git并没有worktree的相关api,但它有一个raw方法可以执行自定义的git命令,核心代码:

image.png

剩下的就是调用vscode相关方法将相关版本分支及代码展示出来并且提供读写功能,vscode插件开发的介绍不是这篇文章的重点就不赘述啦,感兴趣的同学可以参考官网的教程:code.visualstudio.com/api/get-sta…

插件地址

依照上述实现方案,实现的vscode插件已经发布:version shuttle(版本穿梭) 插件地址:marketplace.visualstudio.com/items?itemN…

image.png

这个插件的初衷是解决tob项目的多版本同时维护问题,多版本也意味着多分支,多分支同时维护的时候也可以用它来提效哦~

Q&A:

1, 插件如何解决依赖重装依赖问题?

答: pull下来的分支相当于一个单独项目,跟主项目是隔离的,不用担心反复重装。

2, 分支列表没有显示出分支信息?

答:请在项目根目录再拉取分支信息,因为项目根目录才能读到对应的.git文件信息。

欢迎使用,拍砖指正,谢谢~

分类:
前端
标签: