vue-cliで作成されたプロジェクトのgit Hook sの原理解析

前言vue create my-appを使ってプロジェクトを創建する時、Vueは自動的にいくつかの事前配置を作ってくれます。使わなくてもいいです。でも、必要な時に、突然発見しました。えっと、もう準備をしてくれました。自分の需要に応じて配置すればいいです。package.jsonファイルではgitHooks、lint-stagedなどのフィールドが発見されます。ここでは、gitコマンドを実行する時に自動的に実行される追加の動作です。例えば、文法ヒント、エラーメッセージなど。
この完全な過程はどうなりますか？
プロセス解析
yorkieバッグvue createコマンドを実行すると、YOrkieというパッケージがインストールされます。このパッケージは、尤大fork huskyから構成されています。この二つの機能は同じです。いくつかのgit hookファイルを生成して、プロジェクトのpackage.jsonの関連する構成項目を読み取って、いくつかのコマンドを実行します。
このパッケージをインストールしたら、自動的にyorkieパッケージのスクリプトを実行します。bin/install.js：

このスクリプトはあなたのプロジェクトの.git/hooksディレクトリの中で多くのgit Hook sファイルを生成します。

いくつかのgitコマンドを実行すると、例えばgit push, git commitなどのように、gitは対応するhookを実行します。
package.jsongit commit -a -m'123'このコマンドを例にとって、このコマンドを実行すると、gitはpre-comitというHookを実行します。
まずpackage.jsonの関連内容を貼り付けて、まず印象があります。

"gitHooks": {
 "pre-commit": "lint-staged",
},
"lint-staged": {
 "*.{js,jsx,vue}": [
 "vue-cli-service lint",
 "git add"
 ]
}

pre-comit hook
次にpre-comitのファイルの内容を見ます。

##...
has_hook_script () {
 [ -f package.json ] && cat package.json | grep -q "\"$1\"[[:space:]]*:"
}
#    package.json          pre-commit
has_hook_script pre-commit || exit 0

#    hook 
node "./node_modules/yorkie/src/runner.js" pre-commit || {
 echo
 echo "pre-commit hook failed (add --no-verify to bypass)"
 exit 1
}

pre-comitファイルを見て、package.jsonファイルにpre-comitが定義されているかどうか確認してください。もし定義されたら、yorkieのrunner.jsスクリプトを実行します。
yorkieのrunner.js脚本
私たちはrunner.js脚本の内容を引き続き見ます。

//...
const cwd = process.cwd()
const pkg = fs.readFileSync(path.join(cwd, 'package.json'))
//    package.json       gitHooks   
const hooks = JSON.parse(pkg).gitHooks
if (!hooks) {
 process.exit(0)
}
//      ，     pre-commit
const hook = process.argv[2]
//   gitHooks       pre-commit    ，    ：lint-staged
const command = hooks[hook]
if (!command) process.exit(0)
//    lint-staged   
execa.shellSync(command, { stdio: 'inherit' })

このプロセスから、git commit -a -m'123'というgitコマンドを実行するとき、git hookはyorkieのスクリプトを実行してpackage.jsonファイルの内容を読み出し、関連する構成項目を取ってから、構成項目のコマンドを実行することが見える。
上記の例では、lint-stagedコマンドが実行されたので、package.jsonの中の"lint-staged"の構成項目を読み出し、さらにvue-cli-service lintのこのコマンドを実行し続け、実行されているプロセス全体は、チェーンのようにループされ、すべてのコマンドが実行されるまで続きます。
実践
この流れが分かると、プロジェクトでは必要に応じて柔軟にいくつかの構成を行うことができます。例えば、commit-msg hookを実行するときにcommitlintを追加して、協力者が提出したgit情報を規範化して、これに加えて、実行前のコマンド例：git commit -a -m'123'は、情報の不適切なエラーメッセージを提出します。ヒントによって、git commit -a -m'feat: 123'に変更したら提出できます。
同様に、pre-commitと組み合わせて使用されるlint-stagedには、コードフォーマットを統一するためにここにpretty-quickを追加するコマンドが追加されてもよい。
例:

"gitHooks": {
 "pre-commit": "lint-staged",
 "commit-msg": "commitlint -E GIT_PARAMS"
},
"lint-staged": {
 "*.{js,jsx,vue}": [
 "pretty-quick --staged",
 "vue-cli-service lint",
 "git add"
 ]
}

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。