一、 快速配置和版本發布流程
該章節主要是對下文內容的歸納方便往后的查閱,如果需要了解細節部分請從第二章節開始閱讀
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
git回退到上一個版本、
二、 使用 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
- 添加 pre-commit 鉤子,在 git commit 之前前將會在終端輸出
我要提交代碼啦
- 添加 commit-msg 鉤子,在 git 校驗 commit 時會在終端輸出 git 所有參數和輸入, husky 通過環境變量 HUSKY_GIT_PARAMS HUSKY_GIT_STDIN 是 husky 返回 git 參數和輸入
- 添加 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 信息的校驗情況
三、 在提交代碼時使用 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 來提交代碼
四、 自動生成 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
復制代碼