git commit 規範校驗配置和版本發佈配置

1、 快速配置和版本發佈流程

該章節主要是對下文內容的概括方便日後的查閱，若是須要了解細節部分請從第二章節開始閱讀

1.1 依賴包安裝

# husky 包安裝
npm install husky --save-dev
 # commitlint 所需包安裝
npm install @commitlint/config-angular @commitlint/cli --save-dev
 # commitizen 包安裝
npm install commitizen --save-dev
npm install commitizen -g
 # standard-version 包安裝
npm install standard-version --save-dev
複製代碼

1.2 配置 commitlint 和 commitizen

# 生成 commitlint 配置文件
echo "module.exports = {extends: ['@commitlint/config-angular']};" > commitlint.config.js
# commitizen 初始化
commitizen init cz-conventional-changelog --save-dev --save-exact
複製代碼

1.3 更新 package.json

{
  "scripts": {
+ "commit": "git-cz",
+ "release": "standard-version"
  },
+ "husky": {
+ "hooks": {
+ "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+ }
+ }
}
複製代碼

1.4 commit 方式

• 全局安裝 commitizen 狀況下可以使用 git cz 或者 npm run commit 來提交代碼
• 未全局安裝 commitizen 狀況下可以使用 npm run commit 來提交代碼

1.5 版本發佈流程

git checkout master
git pull origin master
git fetch origin --prune
# 1.0.0 表示當前要發佈的版本
npm run release -- --release-as 1.0.0
git push --follow-tags origin master
複製代碼

1.6 爲遠程倉庫添加 releases

2、 使用 husky + commitlint 校驗 commit 信息

2.1 npm 包 husky 簡介

husky 主用功能是爲 git 添加 git 鉤子，它容許咱們在使用 git 中在一些重要動做發生時觸發自定義腳本(npm script), 好比咱們能夠在 git push 以前執行特定的自定義腳本對代碼進行單元測試、又或者在 git commit 以前執行 eslint 校驗，固然本文主要介紹如何借用 husky 爲 git 添加 commit-msg 鉤子並對 commit 進行校驗。

• npm 包 husky 安裝

npm install husky --save-dev
複製代碼

• 更新 package.json

1. 添加 pre-commit 鉤子，在 git commit 以前前將會在終端輸出 我要提交代碼啦
2. 添加 commit-msg 鉤子，在 git 校驗 commit 時會在終端輸出 git 全部參數和輸入， husky 經過環境變量 HUSKY_GIT_PARAMS HUSKY_GIT_STDIN 是 husky 返回 git 參數和輸入
3. 添加 pre-push 鉤子， 在 git push 以前將在終端輸出 提交代碼前須要先進行單元測試 並執行 npm test

{
+ "husky": {
+ "hooks": {
+ "pre-commit": "echo 我要提交代碼啦",
+ "commit-msg": "echo $HUSKY_GIT_PARAMS $HUSKY_GIT_STDIN",
+ "pre-push": "echo 提交代碼前須要先進行單元測試 && npn test"
+ }
+ }
}
複製代碼

2.2 npm 包 commitlint 簡介

commitlint 用於檢查您的提交消息是否符合規定提交格式，通常和 husky 包一塊兒使用，用於對 git commit 信息的格式進行校驗，當 commit 信息不符合規定格式的狀況下將會拋出錯誤。

2.2.1 commitlint 默認格式

commitlint 的默認格式爲：

# 注意：冒號前面是須要一個空格的, 帶 ？ 表示非必填信息
type(scope?): subject
body?
footer?
複製代碼

• scope 指 commit 的範圍（哪些模塊進行了修改）
• subject 指 commit 的簡短描述
• body 指 commit 主體內容（長描述）
• footer 指 commit footer 信息
• type 指當前 commit 類型，通常有下面幾種可選類型：

類型	描述
build	主要目的是修改項目構建系統(例如 glup，webpack，rollup 的配置等)的提交
ci	主要目的是修改項目繼續集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交
docs	文檔更新
feat	新增功能
merge	分支合併 Merge branch ? of ?
fix	bug 修復
perf	性能, 體驗優化
refactor	重構代碼(既沒有新增功能，也沒有修復 bug)
style	不影響程序邏輯的代碼修改(修改空白字符，格式縮進，補全缺失的分號等，沒有改變代碼邏輯)
test	新增測試用例或是更新現有測試
revert	回滾某個更早以前的提交
chore	不屬於以上類型的其餘類型

2.2.2 配合 husky 包進行使用

• 安裝依賴包

npm install --save-dev @commitlint/config-angular @commitlint/cli
複製代碼

• 修改 package.json: 在 husky 配置下使用 commitlint 配置 commit-msg 鉤子腳本

{
  "husky": {
    "hooks": {
+ "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }  
  }
}
複製代碼

• 添加 commitlint 配置文件

項目下新增 commitlint.config.js 文件，並針對 commitlint 進行簡單配置

配置說明: 規則由鍵值和配置數組組成，如：'name: [0, 'always', 72]'，數組中第一位爲 level（等級），可選 0, 1, 2，0 爲 disable（禁用），1 爲 warning（警告），2 爲 error（錯誤），第二位爲該規則是否被應用，可選 always | never， 第三位爲該規則容許值。

module.exports = {
  // 繼承默認配置
  extends: [
    "@commitlint/config-angular"
  ],
  // 自定義規則
  rules: {
    'type-enum': [2, 'always', [
      'upd',
      'feat',
      'fix',
      'refactor',
      'docs',
      'chore',
      'style',
      'revert',
    ]],
    'header-max-length': [0, 'always', 72]
  }
};
複製代碼

• 下面是幾種不一樣 commit 信息的校驗狀況

3、 在提交代碼時使用 commitizen 來提供一個交互界面

在上文咱們對 git commit 信息添加了校驗，但有個缺點就是須要咱們手動編輯 commit 信息，這樣就顯得麻煩了不少，這時咱們能夠引入 commitizen，在使用 commitizen 提交咱們的代碼時，會在終端給出一個交互界面，該界面會提示咱們在提交時所須要填寫的全部字段, 咱們只須要在交互界面中按照順序填寫相應信息 commitizen 會自動幫咱們合成信息，併發起 commit。

3.1 配置 commitizen

• 安裝 commitizen cli 工具

npm install commitizen -g
複製代碼

• 初始化當前項目

# 下面面的命令爲你作了下面幾件事:
## 安裝 cz-conventional-changelog npm 模塊
## 將添加 config.commitizen 配置
commitizen init cz-conventional-changelog --save-dev --save-exact
複製代碼

• 使用 git cz 代替 git commit 提交代碼

3.2 經過 npm 腳原本代替 git commit

其實到此 commitizen 配置能夠算是基本完成，但若是隻是配置到這裏的話用戶在使用 git cz 來提交代碼時則須要全局安裝 commitizen 不然將會報錯，要想用戶無障礙使用 commitizen 進行提交代碼則能夠在當前項目下安裝 commitizen 並添加 npm 腳本,用戶在未全局安裝 commitizen 的狀況下就能夠經過該 npm 腳原本提交代碼。

• 添加 commitizen 依賴

npm install commitizen -D
複製代碼

• 添加 npm 腳本

"scripts": {
+ "commit": "git-cz"
},
複製代碼

• 當用戶未全局安裝 commitizen 可經過 npm run commit 代替 git commit 來提交代碼

4、 自動生成 change log 並進行版本發佈

在使用上文 commit 規範的狀況下， 能夠經過 standard-version 自動生成 change log，並更新項目的版本信息添加 git tag, change log 中將收錄全部 type 爲 feat 和 fix 的 commit

4.1 standard-version 安裝和配置

• 安裝 standard-version

npm i --save-dev standard-version
複製代碼

• 配置 npm 腳本命令

{
  "scripts": {
+ "release": "standard-version"
  }
}
複製代碼

4.2 版本發佈流程

• 切換至 master 分支

git checkout master
複製代碼

• 拉取遠程分支

git pull origin master
複製代碼

• 拉取遠程信息

git fetch origin --prune
複製代碼

• 自動生成 changelog 並更新版本爲 1.0.0

# 下面面的命令爲你作了下面幾件事:
## 修改 package.json 中的版本號
## 使用 legacy -changelog 更新 CHANGELOG.md
## 提交 package.json 和 CHANGELOG.md
## 添加 tag
npm run release -- --release-as 1.0.0
複製代碼

• 更新本地 tag 到遠程分支

git push --follow-tags origin master
複製代碼

4.3 爲遠程倉庫添加 releases