husky实践
2022/4/9 大约 3 分钟
在做前端工程化时husky可以说是一个必不可少的工具，husky可以让我们向项目中方便添加git hooks。
# 项目背景
公司项目是基于飞冰的微前端项目，但是由于项目中老代码较多、风格多样化、codeReview又比较耗时，所以就希望通过
pre-commit做一些提交前的校验，以此来使团队中的代码格式统一，同时也利于后期代码的维护。
开发环境：
- 项目：
@ice/stark-app@v1.4.1 - husky版本：
@v7.0.4
# 安装
下载
npm install husky --save-dev1
# 使用
# 添加prepare脚本
npm set-script prepare "husky install"
npm run prepare
1
2
2
或直接在package.json中添加如下脚本
{
"scripts": {
"prepare": "husky install"
}
}
1
2
3
4
5
2
3
4
5
prepare脚本会在
npm install（不带参数）之后自动执行。也就是说当我们执行npm install安装完项目依赖后会执行husky install命令，该命令会创建.husky/目录并指定该目录为git hooks所在的目录。
# 添加pre-commit
npx husky add .husky/pre-commit "npm run lint"
// or
husky add .husky/pre-commit "npm run lint"
git add .husky/pre-commit
1
2
3
4
5
6
2
3
4
5
6
执行完上述代码后，会在你的项目根目录中.husky文件夹下新增一个名为pre-commit的shell脚本。pre-commit脚本内容如下：
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run lint
1
2
3
4
2
3
4
当我们执行
git commit命令时会先执行pre-commit这个脚本，注意：npm run lint脚本需要先配置好
# 添加commit-msg
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
// or
husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
1
2
3
4
5
2
3
4
5
执行完上述代码后，会在你的项目根目录中生成.husky文件夹，目录下新增了一个名为pre-commit的shell脚本。pre-commit脚本内容如下：
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install commitlint --edit "$1"
1
2
3
4
2
3
4
--no-install 参数表示强制npx使用项目中node_modules目录中的commitlint包
相关信息
commit-msg会在pre-commit钩子之后执行。
# 示例
commit-msg会在pre-commit之后执行
# pre-commit
此时会执行
pre-commitshell文件，然后调用npm run lint脚本。
$ git commit -m "fix: asfsdf"
> kylin-operation@3.0.52 lint C:\Users\hp\Desktop\kylin-operation
> npm run eslint && npm run stylelint
> kylin-operation@3.0.52 eslint C:\Users\hp\Desktop\kylin-operation
> eslint --cache --ext .js,.jsx,.ts,.tsx ./
...省略
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# commit-msg
pre-commit执行完后会执行commit-msgshell文件。
$ git commit -m "asfsdf"
⧗ input: asfsdf
✖ subject may not be empty [subject-empty]
✖ type may not be empty [type-empty]
✖ found 2 problems, 0 warnings
ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint
husky - commit-msg hook exited with code 1 (error)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
错误原因是没有提交类型、没有主体内容。
$ git commit -m "asd: asfsdf"
⧗ input: asd: asfsdf
✖ type must be one of [feat, fix, docs, style, test, refactor, chore, revert] [type-enum]
✖ found 1 problems, 0 warnings
ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint
husky - commit-msg hook exited with code 1 (error)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
错误原因是提交的类型不对，只能是: [feat, fix, docs, style, test, refactor, chore, revert] [type-enum]
$ git commit -m "fix: asfsdf"
[dev 300f27f] fix: asfsdf
3 files changed, 7 insertions(+), 7 deletions(-)
create mode 100644 .commitlintrc.js
delete mode 100644 commitlint.config.js
1
2
3
4
5
2
3
4
5
提交成功
相关信息
新版的husky使用了从git 2.9开始引入的一个新功能core.hooksPath。core.hooksPath可以让你指定git hooks所在的目录而不是使用默认的.git/hooks/。这样husky可以使用husky install将git hooks的目录指定为.husky/，然后使用husky add命令向.husky/中添加hook。通过这种方式我们就可以只添加我们需要的git hook，而且所有的脚本都保存在了一个地方（.husky/目录下）因此也就不存在同步文件的问题了。
# 注意事项
- 这里介绍的是
husky@v.7.0.4版本，v7之前的版本配置方式与这里介绍的有差异，请自行查阅官方文档进行实践。 commit-msg的配置需要依赖其他的包及配置，请移步至 @commitlint/cli制定提交规范