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


Posted in Javascript onFebruary 14, 2020

前言

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

package.json 文件中会发现 gitHookslint-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"
 ]
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 #Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 #Javascript
JavaScript实现Tab选项卡切换
Feb 13 #Javascript
Angular 多模块项目构建过程
Feb 13 #Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 #Javascript
JavaScript实现省市区三级联动
Feb 13 #Javascript
jquery传参及获取方式(两种方式)
Feb 13 #jQuery
You might like
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
javascript 面向对象 function类
2010/05/13 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
python常见排序算法基础教程
2017/04/13 Python
Django 实现下载文件功能的示例
2018/03/06 Python
python事件驱动event实现详解
2018/11/21 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
Python进程池Pool应用实例分析
2019/11/27 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
优秀党员主要事迹
2014/01/19 职场文书
党的群众路线学习材料
2014/05/16 职场文书
五年级学生评语大全
2014/12/26 职场文书
签证工作证明模板
2015/06/15 职场文书
理想国读书笔记
2015/06/25 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书