前端生成changeLog

原创已于 2024-08-18 15:56:32 修改 · 479 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2024-05-29 16:14:06 首次发布

这篇博客介绍了前端项目如何生成Changelog，包括提交规则、安装依赖、添加命令行，以及规范化的提交内容。强调了正确git commit格式的重要性，并推荐了vscode插件如git-commit-lint-vscode和git-commit-plugin，帮助遵循Angular或git-cz模板提交。此外，还提供了快速打标签并生成Changelog的方法，以及相关参考文档。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提交规则

		🐛 fix: -------- 修复BUG,
        ✨ feat: ------- 新功能,
        📝 docs: ------- 仅文档更改,
        💄 style: ------ 不影响代码运行的更改(调整空白、格式、缺少分号等),
        🗃️ chore: ------ 非 src 和 test 的修改,
        ♻️ refactor: --- 重构架构或代码,
        ⚡️ perf:  ------ 改进性能的代码更改,
        🧪 test:  ------ 添加测试单元,
        ⏪ revert: ----- 回退至某一个版本,
        🚚 merge: ------ 合并一个分支, 解决冲突分支,
        👷 ci: --------- 自动化流程配置或脚本修改,
        🔧 build: ------ 修改构建流程或外部依赖,

安装依赖

yarn add conventional-changelog conventional-changelog-cli --dev

添加命令行

通过命令行会生成 CHANGELOG.md 文件，每运行一次就会递增

"scripts": {
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
  }

持续监听，会新增提交内容

"scripts": {
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -w"
  }

生成全部的changelog

"scripts": {
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -w -r 0"
  }

未生成changeLog ?

注意 git commit 提交格式是否正确，一定要按照格式正确提交，否则无法生成；

上述命令只会生成 fix feat perf 的提交内容；
具体原因未知，有知道的大佬请告诉我：）

规范提交内容

vscode插件

git-commit-lint-vscode
git-commit-plugin

两个插件区别
git-commit-plugin 比较全面，同时可以选择Angular或git-cz模板提交，但每次提交需要一直选择；
git-commit-lint-vscode 功能单一，但方便快速，可直接手打提交；缺点是type很多不需要的

注意

两个插件提交时都会生成对应的type图标，conventional-changelog无法识别emoji开头的提交方式，不喜欢可以直接删掉emoji，不影响最终生成；
正确提交方式：

fix : 🐛 bug修改

git-commit-plugin 提交模板选择 git-cz；Angular模板emoji会在第一个显示；
git-commit-lint-vscode 可以在setting.json 配置文件中修改

// 修改 git-commit-lint-vscode 的type类型
"gitCommitLintVscode.customType": [
  {
    "emoji": "✨",
    "type": "feat",
    "name": "新功能",
    "description": "feature 新功能"
  },
  {
    "emoji": "🐛",
    "type": "fix",
    "name": "修复bug",
    "description": "bug"
  },
  {
    "emoji": "🌈 ",
    "type": "style",
    "name": "style",
    "description": "不改变代码逻辑的修改"
  },
  {
    "emoji": "📝",
    "type": "docs",
    "name": "文档",
    "description": "添加/更新文档"
  },
  {
    "emoji": "🦄",
    "type": "refactor",
    "name": "代码重构",
    "description": "不新增新功能、修改Bug"
  },
  {
    "emoji": "🎈",
    "type": "perf",
    "name": "优化",
    "description": "优化相关、提高性能"
  },
  {
    "emoji": "🎉",
    "type": "init",
    "name": "初次提交/初始化项目",
    "description": "初始化"
  },
  {
    "emoji": "🧪",
    "type": "test",
    "name": "测试",
    "description": "增加测试用例"
  },
  {
    "emoji": "🔧",
    "type": "build",
    "name": "依赖",
    "description": "依赖相关的内容"
  },
  {
    "emoji": "🐎",
    "type": "ci",
    "name": "ci配置相关",
    "description": "例如k8s,docker的配置文件修改"
  },
  {
    "emoji": "🐳",
    "type": "chore",
    "name": "改变构建流程、或者增加依赖库、工具等",
    "description": "配置相关"
  },
  {
    "emoji": "↩",
    "type": "revert",
    "name": "回滚",
    "description": "回滚到上一个版本"
  },
],
// git-commit-lint-vscode 格式
"gitCommitLintVscode.customFormat": "${type} : ${emoji}",
// git-commit-plugin 是否展示emoji
"GitCommitPlugin.ShowEmoji": false,

快速tags并且生成changelog

引入依赖

npm install standard-version conventional-changelog-gitmoji-config

执行命令

npx standard-version --preset gitmoji-config -i CHANGELOG.md --header '# 更新日志'

该命令会自动更新版本并生成 CHANGELOG，如果生成的版本号不想要可自己替换：）

参考文档

Commit message 和 Change log 编写指南
 前端 CHANGELOG 生成指南
 项目提交约束快速上手