changelog 日誌自動生成外掛

紫薯Fea發表於2019-01-26

功能

該工具針對一些需要手動輸入更新日誌的專案，實現自動化輸出更新日誌，並且對更新日誌進行內容格式化，便於後期維護，目前主要有以下幾個功能模組。

  1. cz — 定製化 git 提交
  2. log — 自動生成 CHANGELOG.MD 日誌檔案
  3. lint — 校驗 commit 資訊

安裝依賴包

npm install jimi-web-changelog --save// oryarn add jimi-web-changelog --save-dev複製程式碼

一、cz 模組

1. 安裝 commitizen 依賴包

cnpm i commitizen –save-dev

2. 在 package.json 中加入以下內容

{ 
 ...  "config": { 
   "commitizen": { 
     "path": "./node_modules/jimi-web-changelog/lib/cz"    
  }  
  },
  }複製程式碼

3. 在 package.json 中建立以下 script 命令

{ 
 "cz": "git add . &
&
 git cz"
  }複製程式碼

按照提示正確輸出 commit 資訊內容，如下示例：

changelog 日誌自動生成外掛

二、log 模組

1. 安裝 conventional-changelog-cli 依賴包

cnpm i conventional-changelog-cli --save-dev複製程式碼

2. 建立以下命令

{ 
 ...  "script": { 
   "log": "conventional-changelog --config node_modules/jimi-web-changelog/lib/log -i CHANGELOG.md -s -r 0",  
  }
  }>
 結尾數字若為 1 ，生成當前版本的變化情況，若為 0， 生成所有的日誌檔案。複製程式碼

3. 示例

changelog 日誌自動生成外掛

三、lint 模組

1. 安裝 husky commitlint 依賴

cnpm i husky commitlint --save-dev複製程式碼

2. 在 package.json 中引入以下配置。

{ 
 ...  "husky": { 
   "hooks": { 
     "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"    
  }  
  },
  }複製程式碼

3. 在專案根路徑下建立 .commitlint.js 或者 commitlint.config.js

具體配置可以參考 commitlint 官方，例子：

module.exports = Object.assign({
  }, require('jimi-web-changelog/lib/lint'), { 
 rules: { 
   'subject-empty': [2, 'never'],    'type-empty': [2, 'never'],    'type-enum': [2, 'always',      [        '新功能',        '修復',        ...      ]    ]  
  }
  }複製程式碼

建議

可以搭配 husky 和 lint-stage 效果更佳。它能在你每次提交程式碼前校驗你的程式碼格式並修復錯誤的程式碼格式，具體配置可以參考當前根目錄下的 package.json 和 .eslintrc.

Q&
A

1. No files added to staging! Did you forget to run git add？

應該沒有檔案內容變動還執行 git add . 提交導致的。試著對專案進行更改再儲存試試。

2. 提交後，輸入更新日誌命令，CHANGELOG.MD 內容沒有更新？

只有每次版本迭代的的時候才會更新這一次的日誌資訊。可以嘗試打個標籤最為封版。

3. mac 無法執行 git 命令，報錯？

可以試試安裝 xcode.

xcode-select –install

4. 列印日誌沒有版本號？

版本號目前支援的格式為 vX.X.X，?格式對嗎？

5. js如何讀取 md 檔案？

如果該專案使用了 webpack，可以使用 markdown-loader.

第一次寫工具庫，難免有瑕疵，歡迎大家 pr，但是還請口下留情?喜歡的話給個 star吧複製程式碼

來源：https://juejin.im/post/5c4bd199f265da613c0a2635

相關文章