前端代码库里的 git hooks

本篇文章收获什么：

• git hooks 的基本知识
• yorkie 的原理浅析
• 如何使用 本地 vscode 打开 github 项目

故事是这样的：

我：在npm run lint脚本里面加了vue-tsc --noEmit --skipLibCheck && ....这个命令后，-- no-verify可能就无法生效

同事：一脸黑线，肯定还能继续使用-- no-verify越过检查的

我：... 出糗了

难道-- no-verify不是用来跳过lint检查的吗？

上述对话反应几个问题：

1. 我不知道-- no-verify本质上对什么生效
2. 我不太懂 git hooks
3. 我也不太懂 eslint
4. 我很菜 。。。

git hooks 作用

在代码commit前做些 eslint 校验，代码格式化，在推代码前做分支名检查、文件目录规范、yarn.lock文件强制提交等

package.json文件

"devDependencies": {
  "yorkie": "2.0.0"
},
"gitHooks": {
    "pre-commit": "npm run lint-staged",
    "pre-push": "npm run doctor"
  }

前端视角，代码库安装了 yorkie包，当执行git commit和git push之前会执行对应的npm 命令，偶尔遇到些 lint error 且不想修时我们可以通过git commit --no-verify快速绕过检查。就这些了，在有其他的我也不懂了

git hooks 本质

git 能在特定的预设动作发生时触发自定义脚本。hooks 通常放在代码库的.git/hooks目录下

no-verify 作用给谁了

-- no-verify 是 git 命令的长选项。

yorkie

yorkie 可以是仓库配置 git hooks 动作更容易。它是 fork 至 husky 库，做了微调。

1. 更好地支持 monorepo 库
2. 更改在 package.json 中 hooks 配置的位置

husky:

{
  "scripts": {
    "precommit": "foo"
  }
}

yorkie:

{
  "gitHooks": {
    "pre-commit": "foo"
  }
}

学习了 git hooks 和 yorkie， 我现在可以清楚的描述 git commit 触发 eslint校验，和 git push 前卡控的原理了。

以 git commit 为例：

1. 执行git commit 命令，触发 git hooks的钩子 pre-commit
2. 执行.git/hooks下的git-commit文件
3. 打开文件可以看到脚本中执行了 yokie文件的 runner.js
4. 再追踪下去发现 runner.js 文件读取了 package.json 文件的 gitHooks 配置

我是怎么阅读 yorkie 代码的

安装 GitHub Repositories 插件。添加对应代码库。

使用本地 vscode 直接打开 github 代码，好处多多。

优点：

1. 保持使用习惯，跳转比较方便
2. 下载到本地是最方便的，但是容易造成本地文件夹混乱
3. 摸鱼没人发现，这是网页浏览无法代替的

缺点：

1. 无法本地执行调试
2. 受网速限制，偶尔文件跳转会卡住

环境都准备好了，开始读代码。

初次接触代码库我们首先看它的 package.json 文件。两个关键的入口 install 和 uninstall ， 可以推断包安装时进行了 git hooks 文件的写入，卸载时做了写清理操作。

我们可以进一步阅读 bin/install.js 文件，发现关键代码均在 src/install.js 文件中。只要进一步阅读即可，仔细阅读发现主要做了一些文件的校验和写入操作，恰好符合我们的推断。时间原因不深入讲了，讲真我也没继续深入阅读了。大概的原理，也介绍完毕了。

tips

install 和 postinstall 钩子应该是等价的。

首次阅读 yorkie 源码对scripts -> install 钩子十分费解。反复查阅文档才知道 install == postinstall

我很菜，很焦虑，但我还没有放弃