你也可以实现husky这样的githooks工具

在我们的日常工作中,git可以说是天天被打交道,好的commit信息会让工作效率事半功倍,尤其是团队遇到某些失败的操作,回滚是不可避免的事情,那么commit信息在这里也尤为重要了,所以有些团队给代码上了husky、lint-staged等一些githooks工具。

这个时候问题来了,如果要实现git操作的检查,是否一定要下载第三方库?

什么是githooks

也叫git钩子,其实就是一类在特定时机被执行的脚本。既然是可执行,也就无所谓语言了,shell脚本、js脚本等都可以被计算进去。

官方根据 操作是否可在没有网络时成功对githooks又进行了细分,分为 客户端hooks、服务端hooks。

以下是客户端hooks的种类与描述:

钩子 描述
pre-commit 执行git commit 时被触发
pre-push 执行git push 时被触发

以下是服务端钩子的种类与描述:

钩子 描述
pre-receive 远程仓库接收到推送时触发

有些小伙伴可能还听过 commit-msg 这个钩子,它与 pre-commit 的关系如下:

当我们执行以下命令:

git 复制代码
git commit -m "测试githooks";

pre-commit 会比 commit-msg 更早的触发。

那么接下来,就该进入正题了,我们不用这些工具,是否可以实现git操作检查?

第三方的githooks工具是否一定要用?

答案是肯定的,一定要用第三方库

假设我们不使用第三方库,我们要实现git commit信息的检查,首先我们肯定要先去官网上看看,git是否支持这样做。经过查找,我们发现githooks可以帮我们做到。

我们这里初始化一个名为 husky-prj的项目,依次执行以下命令:

javascript 复制代码
mkdir husky-prj
git init
npm init -y

此时我们会在.git/hooks目录下看到git官方预制的githooks脚本。

此时我们去掉 pre-commit.samplecommit-msg.sample文件的后缀,并且向这两个文件分别新写入如下内容:

text 复制代码
# pre-commit文件写入
echo "pre-commit钩子被触发";

# commit-msg文件写入
echo "commit-msg钩子被触发";

此时当我们再执行 git commit -m "测试githooks"命令时,我们会发现这2个钩子函数生效了。这也是标准做法,官方预制了一些githooks脚本,想要他们生效的方式是去掉.sample后缀。

那这个时候问题也来了,当我们修改钩子函数的脚本时,我们会发现git并没有追踪.git目录的修改,也就是说,你的这些改动并不会被提交到远程仓库里,那你的团队就会出现不统一的现象(特别是对那些pr的人特别不友好)。为了解决这种不统一的问题,husky这样的第三方库给出了解决方案。

husky的使用

在下载husky前,我们先来看下.git目录下的config文件里的内容:

安装husky

javascript 复制代码
npm install husky --save-dev

下载依赖成功后,记住一定要新建一个.husk目录\

新增script命令

修改package.json文件内容如下:

向.husky目录下新增钩子函数

执行下面的命令:

javascript 复制代码
npx husky add .husky/pre-commit "npm test"

上面这句命令的意思是:向.husky目录下新增 pre-commit钩子,并且向这个脚本里写入 npm test

我们修改下项目根目录下的index.js文件如下:

javascript 复制代码
console.log('husky成功的执行了');

此时我们执行 git commit -m "测试husky是否成功" 这个命令时 ,我们会发现,husky失败了,因为程序并没有执行npm test命令。如果husky成功的话,根据官网提示,它应该会执行.husky目录下的pre-commit脚本才对。

经过阅读husky官网我们发现,husky失败的原因是因为我们并没有指定githooks的工作路径。那官网也给出了解决方案,请运行如下命令:

javascript 复制代码
npx husky install

上面的命令运行成功后,当我们再次进行git commit操作的时候,我们发现husky运行成功了。

修改githooks的工作路径

大家肯定好奇为什么执行npx husky install这个命令后,husky生效了。根据官网与源码来看,这个命令主要是执行了git config core.hooksPath $[value]

上面的这个git命令是git官方最新推出的一个方法,存在兼容性问题。用于为 Git 仓库配置钩子路径的,它可以使该仓库下所有的 Git 仓库钩子都指向同一路径。

默认情况下,Git 会在仓库的 .git/hooks 目录下查找钩子。如果想要指定钩子路径,可以使用 git config core.hooksPath 命令来进行配置。其中,core.hooksPath 参数指定的是 Git 钩子的路径,可以是任意路径。

配置成功后,.git目录下的config文件会新增一条hooksPath内容:

需要注意的是,core.hooksPath 参数生效的前提是该路径下存在相应的钩子脚本,否则 Git 仍会在 .git/hooks 目录下执行预设的钩子脚本。

新增prepare命令是干啥的?

了解npm的朋友肯定都知道,npm也预制了一些hooks钩子,通过在命令前面增加pre前缀、post后缀来实现前置操作、后置操作。但prepare是比较特殊的钩子函数。它的执行时机是在 npm install完成后自动触发。

所以配置这个命令后,团队里的人再pull代码,重新安装依赖以后,整个团队在git校验这块就达成了共识。所以husky这样的第三方库还是很方便的,因为它解决了.git目录下hooks钩子无法被跟踪的问题

最后

再来一张husky流程图吧:

好啦,本期的分享到这里就结束啦,如果上述过程中有讲解的不对的地方,欢迎各路大神指正,那么我们下期再见~~

相关推荐
Cachel wood5 分钟前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端6 分钟前
0基础学前端-----CSS DAY9
前端·css
joan_8510 分钟前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
还是大剑师兰特33 分钟前
什么是尾调用,使用尾调用有什么好处?
javascript·大剑师·尾调用
m0_7482361141 分钟前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
Watermelo6171 小时前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_748248941 小时前
HTML5系列(11)-- Web 无障碍开发指南
前端·html·html5
m0_748235611 小时前
从零开始学前端之HTML(三)
前端·html
一个处女座的程序猿O(∩_∩)O3 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
hackeroink6 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss