手把手教你结合commitizen 搭建属于自己的项目git commit 校验工具

先丢出最终版的index.js文件内容

#!/usr/bin/env node
"use strict";
const path = require('path');
const editJsonFile = require("edit-json-file");
const arg = process.argv
// 初始化my-commit ,将部分脚本写入到package.json中
if (arg[2] && arg[2] === 'init') {
  // If the file doesn't exist, the content will be an empty object by default.
  let file = editJsonFile(`${process.cwd()}/package.json`);
  // Set a couple of fields
  file.set("husky", {"hooks": {
    "pre-commit": "lint-staged"
  }});
  file.set("lint-staged", {
    "src/*.js": "['eslint --fix']"
  });
  // 询问是否全部使用git add .
  var List = require('prompt-list');
  var list = new List({
    name: 'order',
    message: '是否默认使用git add .',
    // choices may be defined as an array or a function that returns an array
    choices: [
      'yes',
      'no'
    ]
  })
  // async
  list.ask(function(answer) {
    file.set("scripts", {
      "my-ci": answer === 'yes' ? 'git add . && cross-env ./node_modules/.bin/my-commit' : 'cross-env ./node_modules/.bin/my-commit'
    });
    // Output the content
    file.save();
    var shell = require('shelljs');
    console.log('开始安装依赖');
    shell.exec('npm i husky --save-dev', {async: true})
    console.log('正在安装 husky---- ');
    shell.exec('npm i cross-env --save-dev', {async: true})
    console.log('正在安装cross-env ---- ');
    shell.exec('npm i lint-staged --save-dev', {async: true})
  })
} else {
  const bootstrap = require('commitizen/dist/cli/git-cz').bootstrap;
  bootstrap({
    cliPath: path.join(__dirname, '../../node_modules/commitizen'),
    // this is new
    config: {
      "path": "cz-conventional-changelog",
      "path": "cz-emoji"
    }
  });
}

步骤

一、创建工具项目

1.使用git/gitlab创建一个空的仓库
2.在空仓库中添加index.js 内容如下
// index.js

#!/usr/bin/env node
"use strict";
const bootstrap = require('commitizen/dist/cli/git-cz').bootstrap;
  bootstrap({
    cliPath: path.join(__dirname, '../../node_modules/commitizen'),
    // this is new
    config: {
      "path": "cz-conventional-changelog"
    }
  });

使用工具到相应的项目(假设插件名称my-commit

1.先发布你的工具项目到npm,相当于创建一个npm包、具体怎么发布 这里不做赘述,网上很多教程
2.安装工具(假设插件名称my-commit
npm install my-commit --save-dev
3.配置

需要在package.jsonscript中添加如下

// my-ci 是自己定义的写成什么都可以

"my-ci": "./node_modules/.bin/my-commit"
4.配置之后 执行了git add .之后 执行npm run my-ci 将会出现选填补充信息的选项

如果觉得git add.之后再执行 npm run my-ci 有点麻烦,可以直接改成

// my-ci 是自己定义的写成什么都可以

"my-ci": "git add. && ./node_modules/.bin/my-commit"
5 因为以上命令存在不同系统路径不兼容问题 需要加入 cross-env
npm install cross-env --save-dev 
6 再次修改package.json
// my-ci 是自己定义的写成什么都可以

"my-ci": "git add. && cross-env ./node_modules/.bin/my-commit"

当需要提交代码的时候,不用执行git add . 直接执行npm run my-ci即可

7 提示信息加上可爱的表情

需要在index.js文件中添加 cz-emoji 如下

// index.js

#!/usr/bin/env node
"use strict";

const bootstrap = require('commitizen/dist/cli/git-cz').bootstrap;
  bootstrap({
    cliPath: path.join(__dirname, '../../node_modules/commitizen'),
    // this is new
    config: {
      "path": "cz-conventional-changelog",
      "path": "cz-emoji"
    }
  });

这个时候 重新发npm包之后再安装到自己的项目下,执行提交的时候

8 为了增强校验功能,加入eslint对文件进行

这个有点复杂,需要通过lint-staged来判断

所以先安装以下依赖

npm i husky --save-dev
npm i lint-stage --save-dev

配置package.json

// 增加属性
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/*.js": [
      "eslint --fix"
    ]
  },
// 其中src的具体路径是可以自己配置
// 校验规则是基于当前目录的.eslintrc.js 文件,如果有些规则不想要,就配置这个文件

这个时候我们提交代码的时候再输入基本的信息之后会执行一个eslint的代码规则

总结以上配置文件 我们需要

安装的库有

npm i my-commit --save-dev
npm i cross --save-dev
npm i husky --save-dev
npm i lint-stage --save-dev

需要配置package.json属性有

  "script": {
      ...
      "my-ci": "git add. && cross-env ./node_modules/.bin/my-commit"
    },

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/*.js": [
      "eslint --fix"
    ]
  },

如果每个项目都这么玩。其实有点耗时间,所以我们做了一下自动化

10 初步自动化

修改my-commit中的 index.js

#!/usr/bin/env node
"use strict";
const path = require('path');
const editJsonFile = require("edit-json-file");
const arg = process.argv
// 初始化my-commit ,将部分脚本写入到package.json中
if (arg[2] && arg[2] === 'init') {
  // If the file doesn't exist, the content will be an empty object by default.
  let file = editJsonFile(`${process.cwd()}/package.json`);
  // Set a couple of fields
  file.set("husky", {"hooks": {
    "pre-commit": "lint-staged"
  }});
  file.set("lint-staged", {
    "src/*.js": "['eslint --fix']"
  });
  // 询问是否全部使用git add .
  var List = require('prompt-list');
  var list = new List({
    name: 'order',
    message: '是否默认使用git add .',
    // choices may be defined as an array or a function that returns an array
    choices: [
      'yes',
      'no'
    ]
  })
  // async
  list.ask(function(answer) {
    file.set("scripts", {
      "my-ci": answer === 'yes' ? 'git add . && cross-env ./node_modules/.bin/my-commit' : 'cross-env ./node_modules/.bin/my-commit'
    });
    // Output the content
    file.save();
    var shell = require('shelljs');
    console.log('开始安装依赖');
    shell.exec('npm i husky --save-dev', {async: true})
    console.log('正在安装 husky---- ');
    shell.exec('npm i cross-env --save-dev', {async: true})
    console.log('正在安装cross-env ---- ');
    shell.exec('npm i lint-staged --save-dev', {async: true})
  })
} else {
  const bootstrap = require('commitizen/dist/cli/git-cz').bootstrap;
  bootstrap({
    cliPath: path.join(__dirname, '../../node_modules/commitizen'),
    // this is new
    config: {
      "path": "cz-conventional-changelog",
      "path": "cz-emoji"
    }
  });
}
 

清除掉以前配置的package.json

只要两部安装即可

npm i my-commit
npx my-commit init

提交代码的时候直接执行 npm run my-ci 即可

11 更智能(摸索中)

前端打小怪升级笔记
主要是我开发过程当中遇到的问题记录

被偏爱的,有恃无恐吧了

4.7k 声望
156 粉丝
0 条评论
推荐阅读
vue-cli3+babel7项目兼容IE
默认忽略node_moudules,但是有些包可能并没有做好转化,所以需要我们转化vue官方也提供了比较好的属性transpileDependencies来将node_modules里面的部分包加到babel的转化如下配置,在vue.config.js中添加

fashen0071阅读 2.4k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木141阅读 11.9k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7.1k评论 6

【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6k评论 9

被偏爱的,有恃无恐吧了

4.7k 声望
156 粉丝
宣传栏