当前位置: 首页 > Web前端 > vue.js

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

时间:2023-03-31 17:53:57 vue.js

背景先想象一个场景,如果你的项目有多个版本同时维护,不同的版本代表不同的技术栈和不同的不同时期的功能,每个时期都有自己的客户在使用。每天,如果要对这些版本进行BUG修复或新功能应用,则需要一个一个切换版本,一个一个重装依赖,运行服务自检。这种来回操作无疑是最耗时的。以笔者为例,我的团队主要维护ToB项目,每个项目同时维护多个版本。可以购买不同的版本,时间久了就会出现V1.0、V2.0、V3.0……这种不同客户群使用多个版本的情况,在正常的开发过程中,某个特性orbugfix在V1.0开发后,如果想应用到其他版本如2.0,3.0等,必须一一提交,然后checkout,切换到不同版本开发和维护。版本相近的代码就可以了,cherry-pick可以直接应用这个commit,而当版本跨度大,业务代码差距大的时候,这个切换检出分支的动作是必不可少的。即使以新文件夹的形式克隆多份代码,也需要打开很多vscode来回切换。更麻烦的是,如果要运行项目自测或者开发预览,还要面临频繁重装依赖等繁琐耗时的操作,无节制地消耗着我们的开发时间和成本。如何通过技术手段改善这种情况?或者如果有一个工具或者插件可以列出文件的所有版本就好了,这样不同版本之间的文件可以方便的编码或者直接在当前的编辑器面板运行服务。基于这样的想法,决定开发一款vscode插件,实现多版本便捷维护工具。解决方案团队使用的开发工具是vscode,可以通过开发插件的方式解决上述问题。该工具的主要功能是列出所有分支(即版本)以供检出;检出分支与当前项目并列,方便实时打开任意文件;增加终端开启功能;最终效果预览列出项目版本(分支)进行检出:当前面板开发检出的多版本文件:使用git进行技术实现项目版本或分支管理,版本以gitbranches区分,即我们需要读取和列出先查看所有项目分支信息,然后根据需要查看要维护的版本分支。实现分析:listbranches:可以约定所有大版本用递增的分支名方便标识,如:v1.0.0,v2.0.0versioncheckout:使用gitworktree列出分支,可以使用node的child_process启动一个childprocess,使用spawn或者exec方法执行gitbranch-ar终端命令获取所有版本信息。为了简化实现,我使用第三方库simple-git来执行git命令。simple-git是一个轻量级的接口,使得在node应用中操作git,执行各种git命令成为可能。(在任何node.js应用程序中运行git命令的轻量级接口。):这里使用simple-git--branch的核心方法之一来查询所有分支信息,核心代码:versioncheckoutversioncheckout是核心这个工具难度的技术。一般情况下,同级的git是查不到同一个项目地址的,这也是我们在多版本维护中遇到麻烦的主要原因之一。作者在这里使用gitworktree来绕过这个限制。gitworktree是一个比较冷门的功能,在日常项目中很少用到。实现一个仓库的多个工作树(分支)的结账功能。gitworktree是git在2015年推出的多仓库多工作区管理模式:一个git仓库可以支持多个工作树,对应不同的分支。我们通过“gitinit”或“gitclone”(主工作树)在git中创建一个(主)工作区(树)。具体信息:https://git-scm.com/docs/git-...simple-git没有worktree相关的api,但是有一个原始的方法来执行自定义的git命令,核心代码:剩下的就是调用vscode相关方法显示相关版本分支和代码,并提供读写功能。vscode插件开发介绍不是本文的重点,不再赘述。有兴趣的同学可以参考官网教程:https://code.visualstudio.com...插件地址根据上面的实现方案,实现的vscode插件已经发布:版本穿梭(versionshuttle)插件地址:https://marketplace.visualstu...这个插件的初衷是为了解决tob项目的多版本同时维护的问题,多版本也意味着多分支,以及也可以用于多个分支同时维护时提高效率~欢迎使用,指正,谢谢~