关于javascript:从0到1自建一个代码cr-diff平台

自建 diff 平台基于 git（其余相似

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

1. 利用公布卡点触发代码 cr
2. diff 过程中的评论和留言和提交记录等信息的存储记录
3. 如何更快更轻量级的实现分支 diff
4. 获取 diff 后如何将 diff 出现给前端
5. 点击 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
这里再说下其中遇到的问题等：

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