前端代码库里的git|前端代码库里的git hooks

【前端代码库里的git|前端代码库里的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 commitgit push之前会执行对应的npm 命令,偶尔遇到些 lint error 且不想修时我们可以通过git commit --no-verify快速绕过检查。就这些了,在有其他的我也不懂了
git hooks 本质 git 能在特定的预设动作发生时触发自定义脚本。hooks 通常放在代码库的.git/hooks目录下
前端代码库里的git|前端代码库里的git hooks
文章图片

-- no-verify 作用给谁了 -- no-verify 是 git 命令的长选项。
前端代码库里的git|前端代码库里的git hooks
文章图片

前端代码库里的git|前端代码库里的git hooks
文章图片

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 配置
前端代码库里的git|前端代码库里的git hooks
文章图片

我是怎么阅读 yorkie 代码的 安装 GitHub Repositories 插件。添加对应代码库。
前端代码库里的git|前端代码库里的git hooks
文章图片

使用本地 vscode 直接打开 github 代码,好处多多。
优点:
  1. 保持使用习惯,跳转比较方便
  2. 下载到本地是最方便的,但是容易造成本地文件夹混乱
  3. 摸鱼没人发现,这是网页浏览无法代替的
缺点:
  1. 无法本地执行调试
  2. 受网速限制,偶尔文件跳转会卡住
环境都准备好了,开始读代码。
初次接触代码库我们首先看它的 package.json 文件。两个关键的入口 install 和 uninstall , 可以推断包安装时进行了 git hooks 文件的写入,卸载时做了写清理操作。
前端代码库里的git|前端代码库里的git hooks
文章图片

我们可以进一步阅读 bin/install.js 文件,发现关键代码均在 src/install.js 文件中。只要进一步阅读即可,仔细阅读发现主要做了一些文件的校验和写入操作,恰好符合我们的推断。时间原因不深入讲了,讲真我也没继续深入阅读了。大概的原理,也介绍完毕了。
tips install 和 postinstall 钩子应该是等价的。
前端代码库里的git|前端代码库里的git hooks
文章图片

首次阅读 yorkie 源码对scripts -> install 钩子十分费解。反复查阅文档才知道 install == postinstall
前端代码库里的git|前端代码库里的git hooks
文章图片

我很菜,很焦虑,但我还没有放弃
前端代码库里的git|前端代码库里的git hooks
文章图片

    推荐阅读