vue-cli创建的项目中的gitHooks原理解析
前言
在使用vuecreatemy-app创建项目的时候，Vue会自动帮我们做好一些预配置，你可以不使用它，但是一旦需要的时候，突然发现，咦~原来它已经帮我做好准备工作了，只需要按自己的需求配置一下就可以了，就会觉得vue-cli很贴心啊，帮我们节省了很多时间。
在package.json文件中会发现gitHooks、lint-staged等字段，不难看出它是在我们执行git命令的时候会自动执行的一些额外的操作，比如语法提示、错误提示等。
这个完整的过程是怎样的呢？
流程解析
yorkie包
执行vuecreate命令的时候，会安装一个包，叫：yorkie，这个包是尤大fork自husky的，它俩功能是一样的，都是生成一些githooks文件，读取项目中package.json的相关配置项去执行一些命令，区别是尤大做了一些逻辑和配置上的改动。
安装完这个包以后，会自动执行yorkie包里面的一个脚本：bin/install.js：
这个脚本会在你项目下的.git/hooks目录中生成很多githooks文件：
当你执行一些git命令的时候，比如：gitpush,gitcommit等，git就会执行相应的hook。
package.json
以gitcommit-a-m'123'这个命令为例子，执行这个命令的时候，git会去执行pre-commit这个hook。
先把package.json的相关内容贴出来，让大家先有个印象：
"gitHooks":{
"pre-commit":"lint-staged",
},
"lint-staged":{
"*.{js,jsx,vue}":[
"vue-cli-servicelint",
"gitadd"
]
}
pre-commithook
接下来我们看pre-commit的文件内容：
##...
has_hook_script(){
[-fpackage.json]&&catpackage.json|grep-q"\"$1\"[[:space:]]*:"
}
#检查package.json文件中是否定义了pre-commit
has_hook_scriptpre-commit||exit0
#运行hook
node"./node_modules/yorkie/src/runner.js"pre-commit||{
echo
echo"pre-commithookfailed(add--no-verifytobypass)"
exit1
}
可以看到pre-commit文件去检查了一下package.json文件中是否定义了pre-commit，如果定义了，就执行yorkie的runner.js脚本。
yorkie的runner.js脚本
我们继续看runner.js脚本的内容：
//...
constcwd=process.cwd()
constpkg=fs.readFileSync(path.join(cwd,'package.json'))
//取到package.json里面定义的gitHooks内容
consthooks=JSON.parse(pkg).gitHooks
if(!hooks){
process.exit(0)
}
//从上文得知，这个值是pre-commit
consthook=process.argv[2]
//取gitHooks里面定义的pre-commit的内容，也就取到：lint-staged
constcommand=hooks[hook]
if(!command)process.exit(0)
//执行lint-staged命令
execa.shellSync(command,{stdio:'inherit'})
从这个过程中可以看到，当我们执行gitcommit-a-m'123'这个git命令的时候，githook执行了yorkie的一个脚本去读取了package.json文件中的内容，取到相关的配置项，然后执行配置项中的命令。
在上述例子中，因为执行了lint-staged命令，它会读取package.json中的"lint-staged"配置项，进而又继续执行了vue-cli-servicelint这个命令，整个执行的过程就像像链条一样一环连着一环，直到所有命令都执行完毕。
实践
明白了这个流程后，在项目中就可以根据需求灵活地做一些配置了，比如在执行commit-msghook的时候加上commitlint，规范协作者提交的git信息，加上这个以后，执行之前的示例命令：gitcommit-a-m'123'就会有提交信息不规范的错误提示，根据提示改成：gitcommit-a-m'feat:123'就可以提交了。
同样的，与pre-commit搭配使用的lint-staged，也可以加上一些命令，比如这里加了pretty-quick用来统一代码格式。
示例：
"gitHooks":{
"pre-commit":"lint-staged",
"commit-msg":"commitlint-EGIT_PARAMS"
},
"lint-staged":{
"*.{js,jsx,vue}":[
"pretty-quick--staged",
"vue-cli-servicelint",
"gitadd"
]
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。