npm 包 @moyuyc/husky 使用教程

阅读时长 4 分钟读完

介绍

@moyuyc/husky 是一个 npm 包,提供了一种简便的方式来管理你的项目的 Git Hooks,通过它你可以避免手动创建、删除 Git Hooks,并且很容易地在项目中应用一些 pre-commit 或者 pre-push 等钩子功能。

安装

使用 npm 快速安装 @moyuyc/husky

它会同时安装 huskylint-staged 两个包。

使用

  • 在你的 package.json 文件中配置 husky 版本,如下所示:

<git-hook>:需要配置的 Git Hook 名称 <script-name>:需要执行的 npm script 名称

例如:在 pre-commit 钩子中运行 linttest

  • 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

纠错
反馈