npm 包 git-guppy 使用教程

阅读时长 7 分钟读完

介绍

在前端开发中,Git 是我们必不可少的工具。在 Git 的使用过程中,我们经常需要进行一些约束和规范以保证代码的质量和可维护性。而 git-guppy 就是一个可以帮助我们实现这些约束和规范的 npm 包。

git-guppy 是一个 git 钩子模板,它是一个小型的 JavaScript 库,用于通过 git 钩子在 git 操作前和操作后注入代码。简单来说,就是它能够在 Git 命令执行时,自动执行你写好的 JS 函数。

安装

通过 npm 安装 git-guppy,执行如下命令:

使用

安装完 git-guppy 后,我们需要调用工具的几个 API,挂在 git 钩子上。

初始化

在你项目的根目录下,新建一个文件夹叫 .guppy,并且在该目录下创建两个 JS 文件,分别为 pre-commit.jscommit-msg.js。例如:

然后在 pre-commit.js 文件中编写自己想要执行的代码,例如:

-- -------------------- ---- -------
----- - ----------- - - ---------------------------------

-------------- - ----- -------- -- -
  ----- --------------

  -- -- --------- ------ --
  -- -- -------- ------ --
  ------ -----
--

pre-commit

pre-commit 是在 Git 执行 git commit 命令时调用的钩子。它会在 commit 数据写入磁盘之前被调用。

pre-commit.js 文件中,你可以写上你需要执行的某些操作,例如:

  • 格式化代码
  • 提交规范检查
  • 单元测试
  • 静态代码检查、语法检查等等
-- -------------------- ---- -------
----- - ---- - - -------------------------

-------------- - ----- -------- -- -
  ----------------------- ---- ----------

  -- ------
  ----- ---------------------- --- -------

  ----------------------- ---- -----------

  -- -- --------- ------ --
  -- -- -------- ------ --
  ------ -----
--

-------- -------------------------- -
  ------ --- ----------------- ------- -- -
    ------------- ----- ------- ------- -- -
      -- ----- -
        -------------------------------- ---- ---- ------- ---------
        -------------------- ------------
        ------------
      - ---- -
        ---------------- ---- ------------
        -------------------- ------------
        ----------
      -
    ---
  ---
-

在执行 git commit 操作时,pre-commit.js 里的代码就会在 commit 操作前被执行。

commit-msg

commit-msg 钩子是在 git commit 命令执行后,commit 数据写入磁盘前被调用。

commit-msg.js 文件中,你可以对 commit message 进行格式规范检查,例如:

-- -------------------- ---- -------
-------------- - ----- -------- ----------- -
  ----- ------- - -------------------------- ---------- -------

  -- -------------------------- -
    -------------------------------- -------- ------ ------- -------

  ---
  ------------
  ---

  ------ ------ ------- ------ -- ----------------- -----------

  --------
      ----------- --- ----- -------- -----
---

    ------ ------
  -
  
  ------ -----
--

示例代码

我们可以新建一个 NPM 项目,通过书写 pre-commit 和 commit-msg 的代码来学习 git-guppy。

初始化项目

接下来,我们需要安装 git-guppy:

然后,我们新增 .guppy 文件夹,并在这个文件夹下创建 pre-commit.jscommit-msg.js 文件。

接下来,我们分别书写一下两个文件的代码。

pre-commit.js

-- -------------------- ---- -------
----- - ---- - - -------------------------

-------------- - ----- -------- -- -
  ----------------------- ---- ----------

  ----- ---------------------- --- -------

  ----------------------- ---- -----------
  
  ------ -----
--

-------- -------------------------- -
  ------ --- ----------------- ------- -- -
    ------------- ----- ------- ------- -- -
      -- ----- -
        -------------------------------- ---- ---- ------- ---------
        -------------------- ------------
        ------------
      - ---- -
        ---------------- ---- ------------
        -------------------- ------------
        ----------
      -
    ---
  ---
-

commit-msg.js

-- -------------------- ---- -------
-------------- - ----- -------- ----------- -
  ----- ------- - -------------------------- ---------- -------

  -- -------------------------- -
    -------------------------------- -------- ------ ------- -------

  ---
  ------------
  ---

  ------ ------ ------- ------ -- ----------------- -----------

  --------
      ----------- --- ----- -------- -----
---

    ------ ------
  -
  
  ------ -----
--

最后,我们执行 git commit 命令,就可以看到 pre-commit.js 执行结果了。

总结

本文介绍了 npm 包 git-guppy 的使用教程,学习了 git-guppy 的基本使用步骤,对一个完整的 Git 钩子进行了简单的实现。通过实现了一个 pre-commit 的钩子,我们可以在 commit 操作前完成一些检查和规范,提高代码质量和可维护性。通过实现了一个 commit-msg 的钩子,我们可以对 commit message 进行格式规范检查,提高 commit message 的规范度。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/185451