介绍
在前端开发中,Git 是我们必不可少的工具。在 Git 的使用过程中,我们经常需要进行一些约束和规范以保证代码的质量和可维护性。而 git-guppy 就是一个可以帮助我们实现这些约束和规范的 npm 包。
git-guppy 是一个 git 钩子模板,它是一个小型的 JavaScript 库,用于通过 git 钩子在 git 操作前和操作后注入代码。简单来说,就是它能够在 Git 命令执行时,自动执行你写好的 JS 函数。
安装
通过 npm 安装 git-guppy,执行如下命令:
npm install git-guppy --save-dev
使用
安装完 git-guppy 后,我们需要调用工具的几个 API,挂在 git 钩子上。
初始化
在你项目的根目录下,新建一个文件夹叫 .guppy
,并且在该目录下创建两个 JS 文件,分别为 pre-commit.js
和 commit-msg.js
。例如:
mkdir .guppy touch .guppy/pre-commit.js touch .guppy/commit-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。
初始化项目
mkdir git-guppy-demo cd git-guppy-demo npm init
接下来,我们需要安装 git-guppy:
npm install git-guppy --save-dev
然后,我们新增 .guppy
文件夹,并在这个文件夹下创建 pre-commit.js
和 commit-msg.js
文件。
mkdir .guppy touch .guppy/pre-commit.js touch .guppy/commit-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