背景介紹

我們在使用一個比較厲害的框架或者庫的時候，經常可以看到 CHANGELOG.md，維護版本更新內容。

很多時候，特別是在你開源自己的一個工具或庫時，這種版本更新內容是非常有必要的，如果用戶使用了你的輪子，連更新內容都不知道，試問你敢用嗎？ 那么這些都是怎么寫的呢？每次發版都要手動記錄嗎？顯然不是，這些都是靠提條記錄生成的。

比如我們在 github 上隨便找一個庫：https://github.com/vuepress/vuepress-next，可以看到它就有這個文件

點進去可以查看具體內容：注意我畫紅線的這 2 個，我們是可以跳到對應 issue 和對應代碼提交記錄的。

Commitizen 介紹

1、團隊約束

生成這種 CHANGELOG 有一個前提，就是團隊成員都按規矩提交。人不是機器，習慣不養成往往會忽略，這種約束還是讓工具來做吧。

2、Commitizen 是一個撰寫符合 Commit Message 格式標準的一款工具，至于標準 Commit Message 格式標準，可以百度一下或者一會提交示例介紹。

3、局部安裝 commitizen：npm install commitizen -D

4、執行腳本設置 package.json

在項目根目錄下運行下面命令，使其支持angular的 Commit message 格式

// 如果你使用npm執行下面命令：
commitizen init cz-conventional-changelog --save-dev --save-exact
// 如果使用yarn，則執行下面：
commitizen init cz-conventional-changelog --yarn --dev --exact

注意，–save-exact 相當于鎖定版本號

此時 package.json 新增了這部分內容

{
  "scripts": {
    "commit": "cz"
  },
  "devDependencies": {
    "commitizen": "^4.2.4",
    "conventional-changelog-cli": "^2.2.2"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}

5、修改代碼提交過程介紹

這時候就可以提交嘗試下，提交的時候直接執行剛才添加的腳本：yarn commit 或者 npm run commit，然后就會看到讓你選擇的各種頁面，選擇即可

第一步： 選擇這次提交的內容類型：提交類型是以后生成 CHANGELOG 分類題目

第二步： 這次提交影響范圍

第三步：簡短描述：如果你使用 gitlab 或者 github 進行遠程分支 Merge requset 的時候，這個就是默認的title

第四步：詳細描述

第五步：是否重大更新（改變）：一般具有重要的大版本或者破壞原來代碼的時候需要標記一下

第六步：這次提交對哪些打開的 issue 有影響：類似于 github 開源模式，代碼的維護不論需求還是 fix都有對應的issue討論進行code的支撐。git message 這一步就是為了關聯issue。如果選擇是，可寫上相關issue 對應號碼。（也就是上面的那 2 個可以跳轉的地方）

自動產生CHANGELOG

那么正規的寫提交記錄最后就是為了讓團隊其他人看懂，還有一個目的是為了更規范的產生CHANGELOG，下面看看自動產生CHANGELOG的步驟。

1、安裝產生 changelog 插件 conventional-changelog-cli：

npm install -D conventional-changelog-cli

2、在 package.json 添加腳本

"changelog": "conventional-changelog -p angular -u -i CHANGELOG.md -s -r 0"

3、執行腳本，查看結果：yarn changeLog 或 npm run changeLog

最后即可生成一個提交日志文件

我這里測試了下：

feat 是 npm run commit 按步驟提交的

fix 是直接 git commit -m "fix: test 符號" 提交的

可以看到都生成了日志文件，所以如果團隊每個人都能按 Commit 規范提交的話，第一步 Commitizen 約束是可以不需要的（但是會存在一個問題就是不能實現 issue 與 commitId 的代碼提交記錄的聯動了）。