husky 工程化简单使用

Apr 06, 2024 ·

3 Min Read

在前端工程化时，husky 是必不可少的工具，它可以方便地处理 git hooks 并执行特定的脚本。

钩子都被存储在 .git 目录下的 hooks 目录。

❗ 本章命令适用于 V8 版本，若使用 V9 版本，请看文章最后兼容方法。

安装

可以查阅官方文档或直接看下面👇🏻

# 全局安装
npm install -g husky

# 或 局部安装(我更推荐这种)
npm install -S husky

# 在项目中添加 srcipts 命令
npm pkg set scripts.prepare="husky install"
# 等价于在 package.json 文件 scripts 属性下添加 prepare: "husky install"

使用

# 首次安装完毕需执行，这时会在你项目中创建了一个 .husky 文件夹
npm run prepare

常用 Git Hooks

applypatch-msg : 应用补丁，通过 git am 触发。
pre-applypatch : 提交补丁前，运行 git am 期间触发。
post-applypatch : 提交产生后，运行 git am 期间最后触发。
pre-commit : 用于检查即将提交的快照，git commit 触发（可通过 --no-verify 绕过）。
commit-msg : 用来在提交通过前验证项目状态或提交信息，git commit 和 git merge 触发（可通过 --no-verify 绕过）。
post-commit : 主要用于通知，git commit 触发，但不会影响结果。
post-receive : 推送完成后执行，可以用来更新其他系统服务或者通知用户。

# 创建一个钩子，此时在 .husky 文件夹下多了一个 pre-commit 的文件
npm husky add .husky/pre-commit "npm run test"
git add .husky/pre-commit

# 当你提交的时候，就会执行 `pre-commit` 这个钩子下对应的脚步 npm run test
# 若 脚步执行失败，则会中止提交
npm commit -m "test"

例子

提交前，进行代码检测，不通过则不允许提交。

# 前提已经安装了 eslint
npx husky add .husky/pre-commit "npm run lint"
# 或者
npx husky add .husky/pre-commit "eslint . --ext .js,.jsx,.ts,.tsx"

git add .husky/pre-commit

提交时，进行提交信息验证，是否符合规范。 这里使用到一个 commitlint 的包 👉🏻 官方文档

npm install --save-dev @commitlint/cli @commitlint/config-angular

可以全局安装，也可以单独安装到项目中

@commitlint/cli : commit 消息校验工具。
@commitlint/config-angular : Angular提交信息规范。
@commitlint/config-conventional : 传统规范。

# 使用 angular 规范
echo "module.exports = {extends: ['@commitlint/config-angular']};" > commitlint.config.cjs
# commitlint.config 支持多种文件格式，这里使用 cjs 是一开始使用 js 报一个模块的错误，原 issues：https://github.com/conventional-changelog/commitlint/issues/902

# 添加钩子，提交时自动检测
npx husky add .husky/commit-msg 'npx --no -- commitlint --config commitlint.config.cjs --edit $1'

# git commit -m 'feat(demo): 测试' ✅
# git commit -m 'feat(Demo): 测试' ❎

2024.04.06 更新 🆙

据 v9 版本更新：

已删除 husky install，改为使用 husky 或者直接使用 husky init （它相当于完成了安装和使用步骤）。
在v9 版本后添加钩子，只需 echo "npm test" > .husky/pre-commit，无需使用 husky add。

Last edited Feb 15