前端代码库里的git|前端代码库里的git hooks
【前端代码库里的git|前端代码库里的git hooks】本篇文章收获什么:
- git hooks 的基本知识
- yorkie 的原理浅析
- 如何使用 本地 vscode 打开 github 项目
我:在
npm run lint
脚本里面加了vue-tsc --noEmit --skipLibCheck && ....
这个命令后,-- no-verify
可能就无法生效同事:一脸黑线,肯定还能继续使用
-- no-verify
越过检查的我:... 出糗了
难道
-- no-verify
不是用来跳过lint检查的吗?上述对话反应几个问题:
- 我不知道
-- no-verify
本质上对什么生效 - 我不太懂 git hooks
- 我也不太懂 eslint
- 我很菜 。。。
package.json文件
"devDependencies": {
"yorkie": "2.0.0"
},
"gitHooks": {
"pre-commit": "npm run lint-staged",
"pre-push": "npm run doctor"
}
前端视角,代码库安装了
yorkie
包,当执行git commit
和git push
之前会执行对应的npm 命令,偶尔遇到些 lint error 且不想修时我们可以通过git commit --no-verify
快速绕过检查。就这些了,在有其他的我也不懂了git hooks 本质 git 能在特定的预设动作发生时触发自定义脚本。hooks 通常放在代码库的
.git/hooks
目录下文章图片
-- no-verify 作用给谁了
-- no-verify
是 git 命令的长选项。文章图片
文章图片
yorkie yorkie 可以是仓库配置 git hooks 动作更容易。它是 fork 至 husky 库,做了微调。
- 更好地支持 monorepo 库
- 更改在 package.json 中 hooks 配置的位置
{
"scripts": {
"precommit": "foo"
}
}
yorkie:
{
"gitHooks": {
"pre-commit": "foo"
}
}
学习了 git hooks 和 yorkie, 我现在可以清楚的描述 git commit 触发 eslint校验,和 git push 前卡控的原理了。
以 git commit 为例:
- 执行git commit 命令,触发 git hooks的钩子 pre-commit
- 执行.git/hooks下的git-commit文件
- 打开文件可以看到脚本中执行了 yokie文件的 runner.js
- 再追踪下去发现 runner.js 文件读取了 package.json 文件的 gitHooks 配置
文章图片
我是怎么阅读 yorkie 代码的 安装 GitHub Repositories 插件。添加对应代码库。
文章图片
使用本地 vscode 直接打开 github 代码,好处多多。
优点:
- 保持使用习惯,跳转比较方便
- 下载到本地是最方便的,但是容易造成本地文件夹混乱
- 摸鱼没人发现,这是网页浏览无法代替的
- 无法本地执行调试
- 受网速限制,偶尔文件跳转会卡住
初次接触代码库我们首先看它的 package.json 文件。两个关键的入口 install 和 uninstall , 可以推断包安装时进行了 git hooks 文件的写入,卸载时做了写清理操作。
文章图片
我们可以进一步阅读 bin/install.js 文件,发现关键代码均在 src/install.js 文件中。只要进一步阅读即可,仔细阅读发现主要做了一些文件的校验和写入操作,恰好符合我们的推断。时间原因不深入讲了,讲真我也没继续深入阅读了。大概的原理,也介绍完毕了。
tips install 和 postinstall 钩子应该是等价的。
文章图片
首次阅读 yorkie 源码对scripts -> install 钩子十分费解。反复查阅文档才知道 install == postinstall
文章图片
我很菜,很焦虑,但我还没有放弃
文章图片
推荐阅读
- CVE-2020-16898|CVE-2020-16898 TCP/IP远程代码执行漏洞
- 不废话,代码实践带你掌握|不废话,代码实践带你掌握 强缓存、协商缓存!
- 工具|后天就是七夕节,你准备好了吗(送上几个七夕代码,展示你技能的时候到了!)
- Jsr303做前端数据校验
- 现役联盟前十怎么排(詹姆斯榜首无悬念!杜兰特库里位置不确定!)
- 《机器学习实战》高清中文版PDF英文版PDF+源代码下载
- 霍兰德职业代码对照表
- Hexo代码块前后空白行问题
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 前端代码|前端代码 返回顶部 backToTop