从0到1自建一个代码cr diff平台

呼啦星星星 - 2022-02-21 22:30:21

---

自建diff平台基于git（其他类似

首先明白diff平台是为了做什么，无非就是以下几个重点

应用发布卡点触发代码crdiff过程中的评论和留言和提交记录等信息的存储记录如何更快更轻量级的实现分支diff获取diff后如何将diff呈现给前端点击diff文件后和“谁”比对，怎么比对和呈现

针对以上问题逐一进行分析和细化

一 应用发布卡点触发代码cr首先要考虑什么时候你要触发这个diff，唯一确定的那肯定是发布流程中的发布前卡点，也就是说必须经过代码cr通过后才能进行下一步发布

graph TD
    A[构建打包] -->|卡点| B(代码review) -->|通过| C(发布)

还有一种情况就是是否要在日常开发过程中比如某个分支并不是需要走发布流程（例如技术优化等等），就需要单独给组员或者你的同事发diff评审

所以综上就需要有能触发diff的功能，其实就是将这个需要进行diff的分支仓库进行记录到数据库，返回对应id拼接成diff地址类似：http://diff.com/diffId?=111
然后剩下的工作就交给下一步（初始化diff）了

二 diff过程中的评论和留言和提交记录等信息的存储记录

这一步其实就是在考虑怎么设计数据库表了，存储信息其实很简单无非就是 1 git地址（用来初始化仓库比对diff）2 评论内容 3 发起diff的人信息 4 此分支的commmitlist（为什么要记录这个，因为可以从这里查看这个分支每一次的提交内容并且进行diff）

三 如何更快更轻量级的实现分支diff这一步是重点，涉及到核心如何进行初始化diff给前端

首先细化一下这一步需要做的工作

从步骤一获取到的diff链接（已经存储了相关git信息和初始化了数据库信息），从diffId获取到的初始化信息有两个： 1 branch（需要进行diff的分支号） 2 git仓库地址根据git仓库进行如下shell：（这个就不用赘述了，有点node基础的应该知道在nodejs中执行shell的操作）

`mkdir -p ${initCodeAddressDiff} && cd ${initCodeAddressDiff} && git init && git remote add origin ${gitAddress} && git fetch`

其中initCodeAddressDiff是在服务器上建立的此应用的分支文件目录，例如应用叫test，分支是0.0.1，那目录就是test/0.0.1，然后在这个目录下进行初始化git仓库（gitAddress）

上一步完成后就实现了可以进行git shell操作的文件容器了，下一步就是需要获取这个分支的diff信息了（注：此过程中省略了很多判空和容错校验，后续的shell都是在此文件目录下执行的）：

`git fetch && git merge-base remotes/origin/master remotes/origin/${branch}`

这一步是做什么呢？是为了获取这个分支branch拉取出来那个时候的master祖先分支节点commit，后续的比对都是和这个节点进行diff，同时将这个commitId存入数据库，后续直接使用

获取此分支的所有未合并的commmitList

`git log remotes/origin/master..remotes/origin/${branchTag} --pretty=format:"%H^%an^%cn^%s^%cd"`

这是上面所说过的为了进行每一次提交的比对

开始进行真正的获取diff

`git fetch && git diff ${masterCommitId} ${branchTag} --stat-name-width=800 --stat-width=1000`

这段是为了获取diff内容，但是我还要知道更改了多少，是增删改的哪一类？例如：
index.jsx -------- +23,-2,M（这个文件是更改M，增加了23行删除了2行）
所以还需要执行下面的命令：

`git fetch && git diff ${masterCommitId} ${branchTag} --name-status`

最终组合后将diff文件渲染成tree树的结构返回给前端，这时候diff内容就已经好了

四 获取diff后如何将diff呈现给前端将步骤三 的最后一步组合的信息返回给前端

点击diff文件后需要看到和祖先master的比对更改情况，这一步怎么实现呢？首先比如点击上一步说的index.jsx文件，那就需要将此文件对应拉取时候的masterCommitId节点的文件内容（oldFile）和这个分支0.0.1最新的文件内容（nowFile），并输出给前端，执行以下shell命令就可
git show ${commitId}:${filePath}
是不是很简单，这就获取到了对应commitId的filePath文件内容

五 点击diff文件后和“谁”比对，怎么比对和呈现之前都是和分支拉取时候那个节点的masterCommit进行比对，这样的话，如果主干分支进行了其他分支合并，那这些合并就不会体现在你的这个diff上面，所以还可以通过shell把最新的当前masterID获取一并返回给前端，这样用户就可以根据实际情况选择是比对祖先分支还是当前最新master

`git log remotes/origin/${branchTag} --pretty=format:"%H^%an^%cn^%s^%cd" -1`

下面就到了如何把两份文件进行比对了oldFile，nowFile，其实也很简单如果时间成本允许可以自行npm diff 进行自建渲染，图方便就直接使用比对类的开源库

import { MonacoDiffEditor } from 'react-monaco-editor';

到此整个实现方式就已经说完啦，希望大家都能严谨进行代码cr做到线上少出bug
这里再说下其中遇到的问题等：

使用node child_process.exec和child_process.spawn两个子进程的方式评论信息如何通知给相应的人如果点击了通过，此分支又有了新的提交那么就要重置这个为不通过

Tags 标签

javascriptnode.jsgitmysql

扩展阅读