前端代码库里的 git hooks

571 阅读3分钟

本篇文章收获什么:

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

故事是这样的:

我:在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 commitgit 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

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

image.png