优化前端工作流:一、使用husky对commit日志校验

JavaScript016

优化前端工作流:一、使用husky对commit日志校验,第1张

在了解husky之前,我们需要先了解一下Git Hooks。Git Hooks是git提供的一些回调,在对应的git阶段,执行配置的脚本。

工作流钩子主要为以下4个,执行顺序 pre-commit >prepare-commit-msg >commit-msg >post-commit :

husky 的原理是在 .git/hooks/ 目录下各个钩子文件中添加以下脚本,并读取package.json中的配置,放在对应的钩子中执行:

npm安装完husky后,我们通过在 package.json 中配置,使git在 commit-msg 钩子后执行 bin/check-commit-msg.js :

bin/check-commit-msg.js 内容如下,非0值退出,Git将放弃提交:

依次在项目根目录执行如下两条命令

此时 husky 安装完成 ,根目录下生成了 .husky 文件夹

npm install -g @commitlint/cli @commitlint/config-conventional

至此,依赖安装完成

2在 .husky 文件夹下找到刚刚安装依赖生成好的 pre-commit 文件,添加 npx lint-staged

如果没有pre-commit 文件可以执行

3.在 .husky 文件夹下新建 commit-msg 文件,填入如下信息

如果没有commit-msg 文件可以执行

4.在项目根目录下新建 commitlint.config.js 文件 ,写入如下内容

至此,所有配置完成

新建一个不符合 Eslint 规则的文件,在进行 commit提交时,会拒绝本次 commit

执行 npm run lint --fix 修复文件后 ,执行一条不符合规范的提交 git commit -m 'cesssss' ,同样会被拒绝提交,终端会显示错误信息

这篇文章讲述自定义命令行的声明,NPM依赖包请查看 链接:自定义NPM包 。

使用的是husky6+,配置与旧版本不同,跟随文章操作时,请注意版本

Note: 这里不要使用 prepublish 钩子,该钩子在 npm i 时运行 ,而不是 npm publish 时运行。

NPM 包是 commonJS 语法,使用 require() ,而非 import...from... 引入依赖。

而,若 NPM 包语法使用 ES6+ 语法书写,必须使用 ES Module 的 import 、 export default 导出方式,不要混用

推荐几个常用的命令行辅助工具:

入口文件示例:

其中, #!/usr/bin/env node 是必填行,在安装命令行后,依据该行指定 node 环境执行该命令行。

vs. 缺失 #!/usr/bin/env node

借助 commander 第三方工具包

借助 commander 第三方工具包

use 命令定义