介绍
@moyuyc/husky
是一个 npm
包,提供了一种简便的方式来管理你的项目的 Git Hooks
,通过它你可以避免手动创建、删除 Git Hooks
,并且很容易地在项目中应用一些 pre-commit
或者 pre-push
等钩子功能。
安装
使用 npm
快速安装 @moyuyc/husky
:
npm i @moyuyc/husky --save-dev
它会同时安装 husky
和 lint-staged
两个包。
使用
- 在你的
package.json
文件中配置husky
版本,如下所示:
{ "husky": { "hooks": { "<git-hook>": "husky run <script-name>" } } }
<git-hook>
:需要配置的Git Hook
名称<script-name>
:需要执行的npm script
名称
例如:在 pre-commit
钩子中运行 lint
和 test
:
{ "husky": { "hooks": { "pre-commit": "npm run lint && npm run test" } } }
- 在
package.json
文件中,添加需要进行pre-commit
或者pre-push
的文件列表。
例如:在 pre-commit
钩子中仅仅对 src
目录下的文件进行修正:
-- -------------------- ---- ------- - -------- - -------- - ------------- ------------- - -- -------------- - ------------------------------- - ---- --- -------- ---- --- ----- - - -
当然,你可以添加更多的这样的 pre-commit
的规则,husky
会自动嵌套执行这些规则;在 pre-push
钩子中也可以使用相似的式子来进行配置。
注意:钩子之间是按照字母排序的。
示例代码
项目前端部分经常会涉及到 Git Hooks
的使用,例如在代码提交前、打包前、测试前等等需要对项目进行一定的检测,这时 husky
就可以达到我们所想要的效果。
例如,在我们的 Vue 项目中,我们希望在代码提交之前进行代码规范化检查,并且同时进行单元测试。这时,我们只需要使用 husky
配置如下即可:
-- -------------------- ---- ------- - ---------- - ------- ---------------- ----------- ------- ---------------- ------ ------------ ------------- -- -------------- - ----------------- - ---- --- ------ ---- --- ----- - -- ------------------ - ---------------------------- ---------- ------------------ ----------- ------------------------- --------- ------------------------------ --------- -------------------- ---------------- -------- --------- -------------- ---------- ----------------------- --------- ------- ---------- ------------- ---------- ----------- -------- -- -------- - -------- - ------------- ---- --- ---------- - - -
这样,每次在我们提交代码时,husky
会自动检查我们更改的文件,并在检查完成后,自动执行 pre-commit
任务,本例中 pre-commit
任务目标为 lint-staged
。最后,lint-staged
会根据我们的配置去处理我们需要提交的文件,从而达到我们所预期的效果。
总结
通过 @moyuyc/husky
的使用,我们将大大节约我们的开发时间,也增加了代码的可维护性。在项目中,它可以帮助我们进行代码规范检查、单元测试、代码格式化等制定的流程,进一步符合团队开发的标准。通过本篇教程,希望可以帮助大家更加深入地理解 husky
的使用方法及其价值,助力大家开发更为高效的项目。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5f6e78caa9b7065299ccb9eb