vue-cli如何创建的项目中的gitHooks - 行业资讯 - 肥雀云

　　介绍

这篇文章主要介绍了vue-cli如何创建的项目中的gitHooks,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

在<代码>包。json代码文件中会发现<代码> gitHooks ,<代码> lint-staged>

这个完整的过程是怎样的呢?

<>强流程解析

<强>约克夏包

执行vue创建<代码> 命令的时候,会安装一个包,叫:约克夏,这个包是尤大叉自沙哑的,它俩功能是一样的,都是生成一些git钩子文件,读取项目中<代码>包。json>

安装完这个包以后,会自动执行约克夏包里面的一个脚本:<代码> bin/安装。js代码:

这个脚本会在你项目下的<代码>。git/钩子目录中生成很多git钩子文件:

当你执行一些git命令的时候,比如:<代码> git push, git提交等,git就会执行相应的钩子上。

<强>包。json

以<代码> git commit - m # 39; 123 & # 39; 这个命令为例子,执行这个命令的时候,git会去执行导向这个钩。

先把<代码>包。json> “gitHooks":, { 　　,“pre-commit":,“lint-staged" 　　}, 　　“lint-staged": { 　　,“*。{js、jsx vue}“:, 　　,“vue-cli-service lint" 　　,“git add" 　　,) 　　}

<强>导向钩

接下来我们看未雨绸缪的文件内容:

# #…… 　　has_hook_script (), { 　　,[-f package.json ),,,, cat package.json |, grep -q “\“1美元\“[[:空间:]]*:“ 　　} 　　#,检查,package.json 文件中是否定义了,未雨绸缪　　has_hook_script pre-commit | |, exit 0 　　　　#,运行,hook 　　node “。/node_modules/约克夏/src/runner.js", pre-commit | |, { 　　,回声　　,echo “pre-commit hook failed (add ——no-verify 用旁路)“; 　　exit 1 　　}

可以看到导向文件去检查了一下<代码>包。json代码文件中是否定义了未雨绸缪,如果定义了,就执行约克夏的<代码>跑步者。js代码脚本。

<强>约克夏的跑步者。js脚本

我们继续看<代码>跑步者。js代码脚本的内容:

//? 　　const cwd =, process.cwd () 　　const pkg =, fs.readFileSync (path.join(慢性消耗病,& # 39;package.json& # 39;))//,取到,package.json 里面定义的,gitHooks 内容　　const hooks =, JSON.parse .gitHooks (pkg) 　　if (!挂钩),{ 　　,process.exit (0) 　　}//,从上文得知,这个值是,未雨绸缪　　const hook =, process.argv [2]//时间取大敌;;gitHooks 里面定义的,pre-commit 的内容,也就取到:lint-staged 　　const command =,钩(钩) 　　if (命令),process.exit (0)//,执行,lint-staged 命令　　execa.shellSync(命令,,{,stdio: & # 39;继承# 39;,})

从这个过程中可以看的到,当我们执行<代码> git commit - m # 39; 123 & # 39; 这个git命令的时候,git钩子执行了约克夏的一个脚本去读取了<代码>包。json代码文件中的内容,取到相关的配置项,然后执行配置项中的命令。

在上述例子中,因为执行了<代码> lint-staged 命令,它会读取<代码>包。json代码中的<代码>“lint-staged" 配置项,进而又继续执行了<代码> vue-cli-service线头这个命令,整个执行的过程就像像链条一样一环连着一环,直到所有命令都执行完毕。

<强>实践

明白了这个流程后,在项目中就可以根据需求灵活地做一些配置了,比如在执行<代码> commit-msg> commitlint> git commit - m # 39; 123 & # 39;> git commit - m # 39;壮举:123 & # 39;>

同样的,与