DDR爱好者之家

vue-cli创建的项目中的gitHooks原理解析
站长资源 2024/11/24 佚名
36 1538
DDR爱好者之家 Design By 杰米

前言

在使用 vue create my-app 创建项目的时候，Vue 会自动帮我们做好一些预配置，你可以不使用它，但是一旦需要的时候，突然发现，咦~原来它已经帮我做好准备工作了，只需要按自己的需求配置一下就可以了，就会觉得 vue-cli 很贴心啊，帮我们节省了很多时间。

在 package.json 文件中会发现 gitHooks 、 lint-staged 等字段，不难看出它是在我们执行 git 命令的时候会自动执行的一些额外的操作，比如语法提示、错误提示等。

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

流程解析

yorkie 包

执行 vue create 命令的时候，会安装一个包，叫： yorkie ，这个包是尤大 fork 自 husky 的，它俩功能是一样的，都是生成一些 git hooks 文件，读取项目中 package.json 的相关配置项去执行一些命令，区别是尤大做了一些逻辑和配置上的改动。

安装完这个包以后，会自动执行 yorkie 包里面的一个脚本： bin/install.js ：

vue-cli创建的项目中的gitHooks原理解析

这个脚本会在你项目下的 .git/hooks 目录中生成很多 git hooks 文件：

vue-cli创建的项目中的gitHooks原理解析

当你执行一些 git 命令的时候，比如： git push, git commit 等，git 就会执行相应的 hook。

package.json

以 git commit -a -m'123' 这个命令为例子，执行这个命令的时候，git 会去执行 pre-commit 这个 hook。

先把 package.json 的相关内容贴出来，让大家先有个印象：

"gitHooks": {
 "pre-commit": "lint-staged",
},
"lint-staged": {
 "*.{js,jsx,vue}": [
 "vue-cli-service lint",
 "git add"
 ]
}

pre-commit hook

接下来我们看 pre-commit 的文件内容：

##...
has_hook_script () {
 [ -f package.json ] && cat package.json | grep -q "\"$1\"[[:space:]]*:"
}
# 检查 package.json 文件中是否定义了 pre-commit
has_hook_script pre-commit || exit 0

# 运行 hook 
node "./node_modules/yorkie/src/runner.js" pre-commit || {
 echo
 echo "pre-commit hook failed (add --no-verify to bypass)"
 exit 1
}

可以看到 pre-commit 文件去检查了一下 package.json 文件中是否定义了pre-commit，如果定义了，就执行 yorkie 的 runner.js 脚本。

yorkie 的 runner.js 脚本

我们继续看 runner.js 脚本的内容：

//...
const cwd = process.cwd()
const pkg = fs.readFileSync(path.join(cwd, 'package.json'))
// 取到 package.json 里面定义的 gitHooks 内容
const hooks = JSON.parse(pkg).gitHooks
if (!hooks) {
 process.exit(0)
}
// 从上文得知，这个值是 pre-commit
const hook = process.argv[2]
// 取 gitHooks 里面定义的 pre-commit 的内容，也就取到：lint-staged
const command = hooks[hook]
if (!command) process.exit(0)
// 执行 lint-staged 命令
execa.shellSync(command, { stdio: 'inherit' })

从这个过程中可以看到，当我们执行 git commit -a -m'123' 这个 git 命令的时候，git hook 执行了 yorkie 的一个脚本去读取了 package.json 文件中的内容，取到相关的配置项，然后执行配置项中的命令。

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

实践

明白了这个流程后，在项目中就可以根据需求灵活地做一些配置了，比如在执行 commit-msg hook 的时候加上 commitlint ，规范协作者提交的git 信息，加上这个以后，执行之前的示例命令： git commit -a -m'123' 就会有提交信息不规范的错误提示，根据提示改成： git commit -a -m'feat: 123' 就可以提交了。

同样的，与 pre-commit 搭配使用的 lint-staged ，也可以加上一些命令，比如这里加了 pretty-quick 用来统一代码格式。

示例：

"gitHooks": {
 "pre-commit": "lint-staged",
 "commit-msg": "commitlint -E GIT_PARAMS"
},
"lint-staged": {
 "*.{js,jsx,vue}": [
 "pretty-quick --staged",
 "vue-cli-service lint",
 "git add"
 ]
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米