还在用git commit -m 吗？Git 提交规范和自动产生changelog手摸手教程。

前言

我们在使用一个比较厉害的框架或者库的时候，经常可以看到CHANGELOG.md，维护版本更新内容。

比如vue-next：

在这里插入图片描述

这种版本更新内容是非常必要的，如果用户使用了你的轮子，连更新内容都不知道，试问你敢用吗？

那么这些都是怎么写的呢？每次发版都要手动记录吗？显然不是，这些都是靠提条记录生成的。下面一起他探索一下吧。

正文

生成这种CHANGELOG 有一个前提，就是团队成员都按规矩提交。

人不是机器，习惯不养成往往会忽略，这种约束还是工具来吧。

下面起一个例子，一步一步安装这个规范，并产生changelog.md

一、 新建工程

使用npm 或者 yarn init 命令创建即可，这个就不多说了。

结构如下：

在这里插入图片描述

二、 提交过程

Commitizen 是一个撰写符合 Commit Message 格式标准的一款工具，至于标准Commit Message格式标准，可以百度一下或者一会提交示例介绍。

1、全局安装commitizen

 npm install commitizen -g

2、执行脚本

如果你使用npm执行下面 命令：

commitizen init cz-conventional-changelog --save-dev --save-exact

如果使用yarn，则执行下面：

commitizen init cz-conventional-changelog --yarn --dev --exact

执行完之后，你的package.json应该是这样的：

{
  "name": "commitzenDemo",
  "version": "1.0.0",
  "main": "index.js",
  "author": "ZY <776210576@qq.com>",
  "license": "MIT",
  "scripts": {
    "commit": "cz"
  },
  "devDependencies": {
    "cz-conventional-changelog": "3.3.0"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}

3、修改代码提交过程介绍

这时候就可以提交尝试下，提交的时候直接执行刚才添加的脚本：

yarn commit 或者 npm run commit

执行完之后完看到这样的画面就对了：

在这里插入图片描述

下面介绍每步意思

第一步： 选择这次提交的内容类型

提交类型是以后生成CHANGELOG分类题目

在这里插入图片描述

按需选择一个类型，进入下一步，我这里选个新功能feat。

第二步： 这次提交影响范围

? What is the scope of this change (e.g. component or file name): (press enter to ski
p) 

提交影响范围，例如一个组件，或者影响到的文件，比如我修改了Index.js文件，如实填写。

在这里插入图片描述

第三步：简短描述

这个简短描述，如果你使用gitlab 或者github 进行远程分支Merge requset 的时候，这个就是默认的title。

在这里插入图片描述

这里如实填写新增入口文件：

在这里插入图片描述

第四步：详细描述

同理合并的时候对应这一块：

在这里插入图片描述

填写如下内容：

在这里插入图片描述

第五步：是否重大更新（改变）

一般具有重要的大版本或者破坏原来代码的时候需要标记一下。

这个选择y/n 即可。

在这里插入图片描述

第六步：这次提交对哪些打开的issue 有影响

类似于github 开源模式，代码的维护不论需求还是fix都有对应的issue 讨论进行code的支撑。

git message 这一步就是为了关联issue。如果选择是，可写上相关issue 对应号码。

总体提交记录

在这里插入图片描述

三、 自动产生CHANGELOG

那么正规的写提交记录最后就是为了让团队其他人看懂，还有一个目的是为了更规范的产生CHANGELOG，下面看看自动产生CHANGELOG的步骤。

1、安装conventional-changelog-cli 插件

安装产生changelog插件conventional-changelog-cli，可以选择安装全局或者项目，为了方便我这里安装全局。

npm install -g conventional-changelog-cli

2、在package.json 添加脚本

添加的脚本图例：

在这里插入图片描述

可复制语句：

    "genChangeLog":"conventional-changelog -p angular -i CHANGELOG.md -s"

3、执行脚本，查看结果

执行你添加的脚本名称（genChangeLog是我上面定义的名称）：

yarn genChangeLog 或则 npm run genChangeLog

结果成功产生：

在这里插入图片描述

单个应用的就完成了，那么monorepo 项目怎么弄呢？太晚了，该睡了，下篇再见。

星宇大前端，热爱开源，热爱造轮子，专注于大前端技术。