使用 Husky 在 Git Hooks中 执行任务

我们通常会利用一些工具去检查我们的代码。
例如用 ESLint 或者 TSLint 检查我们的语法问题以及 Prettier 去格式化我们的代码。

但是我们有可能会在开发过程中，有可能忘记使用这些工具。
这个时候 Husky 就可以发挥用途了，它主要利用了 Git Hooks 的机制。

什么是 Git Hooks?

可以看看 git 文档的相关解析: githhooks document

githooks 是在 git 事件发生前后执行的钩子，例如 commit，push 等。

我们可以在这些钩子中执行我们的任务。

什么是 Husky?

husky是一个工具，可以让我们更加方便地使用 Git Hooks?，去执行我们的任务。

如何在工程中使用

接下来通过 react-create-app 创建的一个示例去展示 husky 的使用。

第一步 创建一个新项目

使用 create-react-app 创建一个新的项目

npx create-react-app husky-demo
复制代码

第二步 安装 husky

安装 husky

yarn add husky -D
复制代码

添加以下命令到 package.json

"prepare": "husky install",
复制代码

执行

yarn prepare
复制代码

可以看到目录下面多了一个 .husky 文件

第三步 使用 husky

1. 添加测试

如果项目很大的时候，每一次 commit 都全量跑所有单测的话，效率很很低。所有我们只需要与修改文件相关的单测就好。这个时候可以利用 lint-staged 工具，对 staged 的文件进行检测，只跑修改后的文件就可以。修改一下
package.json

执行命令安装

yarn add lint-staged -D
复制代码

  "scripts": {
    "prepare": "husky install",
    "precommit": "lint-staged",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "test:ci": "cross-env CI=true react-scripts test",
    "test:staged": "yarn test:ci --bail --findRelatedTests",
    "eject": "react-scripts eject"
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "npm run test:staged"
    ]
  },
复制代码

执行命令新增一个 test 的 hook

npx husky add .husky/pre-commit "yarn precommit"
复制代码

可以看到项目下面多了一个 pre-commit 的 sh 脚本