改善web项目的多版本维护难题

背景

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

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

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

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

解决方案

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

1. 列出所有分支（即版本）供检出；
2. 检出的分支与当前项目并列，方便实时点开任意文件；
3. 添加终端打开功能；

最终效果预览

列出项目版本（分支）供检出:

技术实现

项目版本或分支管理用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查询所有分支信息，核心代码：

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

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

Git worktree是15年git推出的多仓库多工作区管理模式：一个git仓库可以支持多个工作树，分别对应不同的分支。我们在git中通过"git init"或"git clone"创建一个（主）工作区（树）（main working tree）。

具体资料：https://git-scm.com/docs/git-worktree

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

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

插件地址

依照上述实现方案，实现的vscode插件已经发布：version shuttle（版本穿梭） 插件地址：https://marketplace.visualstudio.com/items?itemName=liquidityVision.version-shuttle

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