前端快速生成CHANGELOG文件

前端_wei
1,021 阅读4分钟

一、changeLog文件生成的意义

  1. changeLog文件是用来记录每个版本维护更的内容。
  2. changeLog文件的记录的提交可以直接通过后面的链接去定位到git中提交的记录
  3. changeLog文件的生成是建立在一个团队提交规则完善的基础上的。比如每次提交的类型（bug、新需求、CI文件改动...）

二、前端生成changeLog文件依赖插件。

需要安装的插件：

  1. commitizen 用来管理commit message 的格式的，后面会详细说明。
  2. cz-conventional-changelog 适配器。和 commitizen 配合生成符合AngularJS 规范的提交说明
  3. conventional-changelog-cli 通过提交记录生成changeLog文件
  4. standard-version 版本号生成控制插件

三、配置流程

  1. 安装依赖包。复制下面的yarn或者npm安装插件的四行代码,运行安装。

    // yarn 配置 
yarn global add commitizen    
yarn global add conventional-changelog-cli 
yarn global add standard-version 
commitizen init cz-conventional-changelog --yarn --dev --exact
​
// npm 配置
npm install -g commitizen 
npm install -g conventional-changelog-cli
npm install -g standard-version 
commitizen init cz-conventional-changelog --save-dev --save-exact
​
//  复制上面的yarn或者npm安装插件的四行代码,运行安装。
// 如果全局安装过 commitizen、conventional-changelog-cli、standard-version , 只需要运行第四行代码
​

Snipaste_2022-06-13_14-20-44.jpg

  1. 在package.json文件内script标签下配置脚本运行命令行

    // package.json 中添加生成changeLog的脚本
"changeLog":"conventional-changelog -p angular -i CHANGELOG.md -s

image-20220613113930599.png

四、使用方式

有代码修改后，开始git提交，与平常差不多。

  1. git add . 提交全部改动
  2. git cz 提交message格式
  3. git push
  4. 安装了standard-version，通过 standard-version 运行生成CHANGELOG文档。
  5. 没有安装 standard-version ，通过 yarn changeLog 运行生成CHANGELOG文档。

运行git cz后出现下面要选择信息，表示本次提交修改的类型。

image-20220613114340226.png

typetype含义
feat本次提交了一个新需求 、功能。
fix本次修复了一个bug 。
docs本次修改了文档方面的内容
style本次只是修改了代码的格式
refactor重构代码，不是bug和新功能
perf本次修改提高了性能
test新增测试或者修改测试
build修改了外部依赖，包括系统构建
ci修改了CI文件
chore辅助工具修改 src、docs、test文件之外的改动
revert回退提交

我本次配置了CHANGE.log的生成，所以选择了 build ，表示修改了外部依赖，接着弹出如下：

image-20220613115930176.png

image-20220613140703493.png

image-20220613120100352.png

image-20220613133947914.png

image-20220613134345501.png

image-20220613135005195.png

以上依次选择完毕后，commit 完成，再次push一下就完成了。

push完成后，本次开发任务完成并且通过测试后，生成 CHANGELOG 文件。但是没有生成记录，原因是只有 feat 和 fix 类型的提交才会记录到 CHANGELOG 文件中。解决方式后面会有。

yarn changeLog 
# or
npm run changeLog

五、测试CHANGELOG文档生成

由于上面build类型提交，不会在CHANGELOG文档种生成记录，所在我在修改部分代码后，本次配置选择了 feat,只填了简单的title。此时注意，如果配置了standard-version插件，运行standard-version才能在CHANGELOG文档中生成记录，如果没有安装standard-version运行yarn changeLog如下图：

  1. git cz 提交 image-20220613140406427.png

  2. 文档生成 standard-version Snipaste_2022-06-14_11-42-38.jpg image-20220613140601962.png

六、版本控制

版本号的结构为 major.minor.patch => 1.2.3

  1. patch的提升。例如 2.0.1 => 2.0.2

    standard-version --release-as patch

  2. minor的提升。例如 1.0.0 => 1.1.0 

    standard-version --release-as minor

  3. major的提升。例如 1.0.0 => 2.0.0 

    standard-version -- --release-as major

  4. 指定版本。例如 1.0.2 => 1.2.3 

    standard-version -- --release-as 1.2.3

  5. 默认规则提升。 

    standard-version
    • feature 会更新 minor,
    • bug fix 会更新 patch,
    • BREAKING CHANGES 会更新 major 注意点：

  6. 只有 feat / fix 类型的提交才会记录到 CHANGELOG 文件中。如果想要让其他type也展现在CHANGELOG文档中，需要在根目录配置一个 .versionrc 配置文档。

{
    "types": [
      {"type":"feat","section":"Features"},
      {"type":"fix","section":"Bug Fixes"},
      {"type":"test","section":"Tests", "hidden": true},
      {"type":"build","section":"Build System", "hidden": true},
      {"type":"ci","hidden":true}
    ]
}
  • type : 提交的类型
  • section：该类型在changelog文档中的划分归类。例如提交类型为fix可以归类为Features列表中
  • hidden : 是否显示在 CHANGELOG.md 文档中，不配默认false。true:不显示，false：显示。
  1. 如果每次提交都会在代码仓库生生成一个tag,我们通过配置可以直接跳过生成tag。在package.json文件中配置如下。同样可以配置跳过的有：bump, changelog, commit
{
 "standard-version":{ 
     "skip": { 
        "tag": true 
    } 
  } 
}
  1. 如果配置完 standard-version 版本号生成插件后。后面CHANGELOG文档的更新使用 yarn changeLog 不会生成提交记录，只有通过版本控制才能生成记录。所以提交完更新内容后，需要运行standard-version版本控制指定提升 major/minor/patch 后，会自动更新CHANGELOG.md文档。

七、问题

如果git add 的时候遇到下列问题

image-20220613140703493.png

解决方案，找到对应报错文档，在vscode页脚，点击LF,选择CRLF,重新git add .

image-20220613140731220.png

image-20220613140740973.png

avatar
文章
阅读
粉丝