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

2018-10-23 admin

先丢出最终版的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 更智能(摸索中)

原文链接:openmediavault 4.1.3 插件开发 iis7站长之家

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-43460.html

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

相关文章
从2014年的发展来展望JS的未来将会如何
<font face="寰杞, Arial, sans-serif ">2014骞达杞浠惰杩瑷灞涓┓锛互婊¤冻ㄦ涓姹浜...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
typeof、instanceof和contructor的区别
typeof:以字符串的形式返回变量的原始类型,typeof在两种情况下会返回"undefined":一个变量没有被声明的时候,和一个变量的值是undefined的时候,注意,typeof null也会返回object,...
2015-11-12
必须记住的 30 类 CSS 选择器
开篇 有 30 个 CSS 选择器你必须烂熟于心,它们适应于当今各大主流浏览器。 1.* * { margin: 0; padding: 0; } *选择器选择的是每一个单一元素。很多程序员用上面的 CSS 将所有元素的 ma...
2015-11-16
回到顶部