Git Hooks

如果您有以下需求，那么你可以了解下 Git Hooks，也许能解决您的问题。

• 开发完项目，在提交到仓库前，需要先跑一下测试用例，格式化下代码，ESLint 检查一下… 你希望所有人在每次提交前都要执行这些操作。可是人为往往会有批漏，所以这种事情还是交给程序比较好。

  什么是Hooks？

前端开发的同学应该就很清楚，hooks 就是生命周期钩子

• Hook 就是在执行某个事件之前或之后进行一些其他额外的操作

如果把一天看成是一个生命周期，一天会做的事有，起床-吃饭-学习-睡觉

• 起床前、起床后、吃饭前、吃饭后、学习前、学习后、睡觉前…
  • 在起床后需要执行一个动作：刷牙洗脸
  • 吃饭前要执行一个动作：洗手
• 钩子就会在规定时间执行，防止我们遗漏

作用

需求：提交到仓库的代码都要通过 ESLint 的检查

实现：在 git commit 之前进行 ESLint 检查

很显然，人为去执行 ESLint 检查总有一天会忘记，所以这件事就需要交给 CI 去做

• 在 git 的 hooks 中添加 ESLint 检查，则会在每次 commit 时候都会自动进行检查

生命周期图片

注意

1..git文件不会上传到仓库，所以写的hook函数只是在本地无法贡献给队友，最笨方法只能一份份复制，显然这不现实，husky应运而生

• webpack、babel等都用到husky

2..git/hooks下的文件都是示例文件且默认不生效，去掉后缀.sample后才会生效

官网

Husky

安装

-D 参数：添加到项目的开发依赖中

// 注意 Node.js 版本要 >=10
npm install husky -D

配置文件

4.2.5 版本的 Husky 共支持以下几种格式的配置文件：

• .huskyrc
• .huskyrc.json
• .huskyrc.yaml
• .huskyrc.yml
• .huskyrc.js
• husky.config.js

推荐：.huskyrc.json

key：钩子名

value：执行的shell命令

应用

完成一开始提到的需求：提交到仓库的代码都要通过 ESLint 的检查

{
  "hooks": {
    "pre-commit": "npm run eslint"
  }
}

假设package.json有以下配置

• 且目录下有.eslintrc.js文件

"scripts": {
    "eslint": "eslint src" // 检查src文件夹下所有js文件
}

.huskyrc.json 配置

{
  "hooks": {
    "pre-commit": "npm run eslint"
  }
}

也可以写一些可执行脚本去满足项目的一些需求