自動產出changelog-第一節：規範提交代碼

時間 2021-04-13

標籤 html webpack git github web npm element-ui json segmentfault 性能優化欄目 HTML 简体版

原文原文鏈接

背景

把項目管理流程與代碼管理流程打通後運做的這一年，發現產出Changelog這步就是佔據咱們團隊發佈環節中較多時間的一環，將這步交由CI/CD工具進行自動生成，從效率的角度來講把人手解放歷來投入其餘工做會更科學和合理。html

問題

自動產出Changelog內容有哪些工具能夠用？具體怎樣用？支持自定義嗎？自定義程度如何？都是本文探討的內容。討論自定義功能的前提是在CI/CD工具中只能處理已知問題，生成Changelog的工具須要在這種環境下穩定地工做。人機交互式的使用方式是比較浪漫，可是並非本文討論的重點。webpack

調研過程

一開始是在調研drone這個CI/CD工具如何在同一個分支下提交更新的changlog和版本號後不重複觸發構建腳本的問題。在翻查其官方文檔找到答案後，便開始解決下一個環節的問題：如何更新版本號和changelog？更新版本號的問題，在翻查npm官方文檔後找到答案，具體內容已經總結在這篇文章之中《使用npm命令行更新版本號》。因爲changelog的產出基本是圍繞着git log自己的數據來進行細化和處理的，因此產出changelog的問題講分爲兩個方向：一個是如何記錄，另外一個是如何產出。git

規範提交代碼

全網搜索相關內容時，大多圍繞着commitizen這個工具來講，而大多數文章都是基於angular.js提供的提交格式進行介紹，固然還有其餘規範在這裏就不一一討論了。因此記錄的格式暫使用angular.js的提交格式，這裏先簡單介紹一下。github

代碼提交的格式

angular的git提交內容格式規範以下：web

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

大體分爲三個塊：npm

header：<type>(<scope>): <subject>，實際是提交信息的歸納（summary）
body: <body>，實際是提交信息的描述中的內容（description）
footer: <footer>，實際是提交信息的描述中最末端的內容（description）

通常記錄時長這個樣子：element-ui

feat: 增長素材庫選擇功能

關閉 #323, #233

更詳細的內容能夠移步至阮一峯的這篇《Commit message 和 Change log 編寫指南》詳細瞭解。json

規範代碼提交格式的工具

代碼提交通常使用的是git commit命令，輸入的內容並無格式化處理。爲了更好地記錄log，就出現了commitizen工具幫助咱們規範錄入。segmentfault

安裝性能優化

npm install -g commitizen

初次化

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

配置

echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc

使用

# 下面三種方式均可行
git cz
npx cz
cz

# 就會顯示下面的選項
? Select the type of change that you're committing: (Use arrow keys)
> feat:     A new feature
  fix:      A bug fix
  docs:     Documentation only changes
  style:    Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
  refactor: A code change that neither fixes a bug nor adds a feature
  perf:     A code change that improves performance
  test:     Adding missing tests or correcting existing tests
(Move up and down to reveal more choices)

選項和解析是英文的，想要自定義內容能夠在配置的文檔中寫入規則，好比修改type選擇：

{
    "path": "cz-conventional-changelog",
    "disableEmoji": false,
    "types": {
        "feat": {
            "description": "一個新的特性",
            "value": "feat"
        },
        "fix": {
            "description": "修復bug",
            "value": "fix"
        },
        "perf": {
            "description": "優化了性能的代碼改動",
            "value": "perf"
        },
        "refactor": {
            "description": "一些代碼結構上優化，既不是新特性也不是修 Bug（好比函數改個名字）",
            "value": "refactor"
        },
        "release": {
            "description": "Create a release commit",
            "value": "release"
        },
        "style": {
            "description": "代碼的樣式美化，不涉及到功能修改（好比改了縮進）",
            "value": "style"
        },
        "test": {
            "description": "新增或者修改已有的測試代碼",
            "value": "test"
        },
        "chore": {
            "description": "跟倉庫主要業務無關的構建/工程依賴/工具等功能改動（好比新增一個文檔生成工具）",
            "value": "chore"
        },
        "ci": {
            "description": "CI related changes",
            "value": "ci"
        },
        "docs": {
            "description": "更新了文檔（好比改了 Readme）",
            "value": "docs"
        }
    }
}

運行後是這個樣子：

$ cz
cz-cli@4.2.3, cz-conventional-changelog@3.2.0

? Select the type of change that you're committing: (Use arrow keys)
> feat:     一個新的特性
  fix:      修復bug
  perf:     優化了性能的代碼改動
  refactor: 一些代碼結構上優化，既不是新特性也不是修 Bug（好比函數改個名字）
  release:  Create a release commit
  style:    代碼的樣式美化，不涉及到功能修改（好比改了縮進）
  test:     新增或者修改已有的測試代碼
(Move up and down to reveal more choices)

其餘優化細節能夠參考 cz-conventional-changelog 的說明。對於完美達人來講可能以爲提問的內容也中文化的狀況，這時你可使用 leoforfree/cz-customizable 進行更細化的設置，這裏就不詳細描述了。

部份內容引用至《commit規範及自動生成changelog》

使用VSCode用戶能夠直接安裝 Visual Studio Code Commitizen Support 插件，在須要提交代碼時ctrl+shift+p輸入conventional commit，就能有commitizen的效果。而其還支持自定義配置的，配置的細節與一致。只須要在.cz-config.js寫入下面配置的內容就能夠了。

module.exports = {
    // type 類型
    types: [
      { value: 'feat', name: '✨ 新增產品功能' },
      { value: 'fix', name: '🐛 修復 bug' },
      { value: 'docs', name: '📝 文檔的變動' },
      {
        value: 'style',
        name:
          '💄 不改變代碼功能的變更(如刪除空格、格式化、去掉末尾分號等)',
      },
      {
        value: 'refactor',
        name: '♻ 重構代碼。不包括 bug 修復、功能新增',
      },
      {
        value: 'perf',
        name: '⚡ 性能優化',
      },
      { value: 'test', name: '✅ 添加、修改測試用例' },
      {
        value: 'build',
        name: '👷‍ 構建流程、外部依賴變動，好比升級 npm 包、修改 webpack 配置'
      },
      { value: 'ci', name: '🔧 修改了 CI 配置、腳本' },
      {
        value: 'chore',
        name: '對構建過程或輔助工具和庫的更改,不影響源文件、測試用例的其餘操做',
      },
      { value: 'revert', name: '⏪ 回滾 commit' },
  
    ],
  
    // scope 類型，針對 React 項目
    scopes: [
      ['components', '組件相關'],
      ['hooks', 'hook 相關'],
      ['hoc', 'HOC'],
      ['utils', 'utils 相關'],
      ['antd', '對 antd 主題的調整'],
      ['element-ui', '對 element-ui 主題的調整'],
      ['styles', '樣式相關'],
      ['deps', '項目依賴'],
      ['auth', '對 auth 修改'],
      ['other', '其餘修改'],
      // 若是選擇 custom ,後面會讓你再輸入一個自定義的 scope , 也能夠不設置此項， 把後面的 allowCustomScopes 設置爲 true
      ['custom', '以上都不是？我要自定義'],
    ].map(([value, description]) => {
      return {
        value,
        name: `${value.padEnd(30)} (${description})`
      };
    }),
  
    // allowTicketNumber: false,
    // isTicketNumberRequired: false,
    // ticketNumberPrefix: 'TICKET-',
    // ticketNumberRegExp: '\\d{1,5}',
  
    // 能夠設置 scope 的類型跟 type 的類型匹配項，例如: 'fix'
    /*
      scopeOverrides: {
        fix: [
          { name: 'merge' },
          { name: 'style' },
          { name: 'e2eTest' },
          { name: 'unitTest' }
        ]
      },
     */
    // 覆寫提示的信息
    messages: {
      type: "請確保你的提交遵循了原子提交規範！\n選擇你要提交的類型:",
      scope: '\n選擇一個 scope (可選):',
      // 選擇 scope: custom 時會出下面的提示
      customScope: '請輸入自定義的 scope:',
      subject: '填寫一個簡短精煉的描述語句:\n',
      body: '添加一個更加詳細的描述，能夠附上新增功能的描述或 bug 連接、截圖連接 (可選)。使用 "|" 換行:\n',
      breaking: '列舉非兼容性重大的變動 (可選):\n',
      footer: '列舉出全部變動的 ISSUES CLOSED  (可選)。 例如.: #31, #34:\n',
      confirmCommit: '確認提交?',
    },
  
    // 是否容許自定義填寫 scope ，設置爲 true ，會自動添加兩個 scope 類型 [{ name: 'empty', value: false },{ name: 'custom', value: 'custom' }]
    // allowCustomScopes: true,
    allowBreakingChanges: ['feat', 'fix'],
    // skip any questions you want
    // skipQuestions: [],
  
    // subject 限制長度
    subjectLimit: 100,
    // breaklineChar: '|', // 支持 body 和 footer
    // footerPrefix : 'ISSUES CLOSED:'
    // askForBreakingChangeFirst : true,
  };

配置完成後是長這個樣子：