前端程式碼庫裡的 git hooks

混子的日常發表於2021-10-29
前端GitHook

本篇文章收穫什麼：

  • 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 外掛。新增對應程式碼庫。

image.png
使用本地 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

相關文章