如何为自己的项目生成changelog

背景

在github上看到人家的更新日志感觉很cool,怎么能给自己项目来一套呢

环境信息

shell 复制代码
tds@tdsdeMacBook-Pro demo-doc % node -v
v14.18.1
tds@tdsdeMacBook-Pro demo-doc % npm -v
6.14.15

硬件信息

  • 型号名称:MacBook Pro
  • 版本: 12.6.9
  • 芯片: Apple M1

编码实战

  • 因为我本地的node版本为14.18.1,可以使用standard-version
  • 生成日志需要提交记录符合 Angular 格式(或其他约定的格式)

规范化提交信息

使用其他规范化提交信息的工具也可以

安装规范化工具(详细安装流程和强制约束见参考资料),然后

shell 复制代码
npm install -g commitizen cz-conventional-changelog

为 commitizen 指定 Adapter.

全局模式下, 需要 ~/.czrc 配置文件, 为 commitizen 指定 Adapter.

shell 复制代码
echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc

使用git cz提交代码

全局安装后报错
报错信息如下

shell 复制代码
PS C:\Users\sky\WebstormProjects\Demo\React\umi> echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc
PS C:\Users\sky\WebstormProjects\Demo\React\umi> git cz
The config file at "C:\Users\sky\.czrc" contains invalid charset, expect utf8

解决方案

删除根目录下的.czrc,在vscode中新建.czrc文件,文件内容为{ "path": "cz-conventional-changelog" }

standard-version安装和设置

安装standard-version

shell 复制代码
npm i --save-dev standard-version

将脚本命令添加到我们的package.json

json 复制代码
{
  ...
  "scripts": {
      "release": "standard-version",
      "release:dry": "standard-version --dry-run"
  }
  ...
}

修改standard-version配置.versionrc.js(非必要)

js 复制代码
module.exports = {
  skip: {
    bump: false, // 跳过升级版本操作
    changelog: false, // 基于commits生成ChangeLog文档
    commit: false, // 提交一个commit,包含ChangeLog和版本变更的文件
    tag: false, // 跳过打tag操作
  },
  //types为Conventional Commits标准中定义,目前支持
  //https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional
  types: [
    { type: 'feat', section: '✨ Features | 新功能' },
    { type: 'fix', section: '🐛 Bug Fixes | Bug 修复' },
    { type: 'init', section: '🎉 Init | 初始化' },
    { type: 'docs', section: '✏️ Documentation | 文档' },
    { type: 'style', section: '💄 Styles | 风格' },
    { type: 'refactor', section: '♻️ Code Refactoring | 代码重构' },
    { type: 'perf', section: '⚡ Performance Improvements | 性能优化' },
    { type: 'test', section: '✅ Tests | 测试' },
    { type: 'revert', section: '⏪ Revert | 回退', hidden: true },
    { type: 'build', section: '📦‍ Build System | 打包构建' },
    { type: 'chore', section: '🚀 Chore | 构建/工程依赖/工具', hidden: true },
    { type: 'ci', section: '👷 Continuous Integration | CI 配置' },
  ],
};

生成日志

在按照规范规范提交代码后,运行如下命令:

shell 复制代码
npm run release

想要确认结果是否符合预期,可运行npm run release:dry进行测试

参考资料

相关推荐
Best_Liu~21 分钟前
el-table实现固定列,及解决固定列导致部分滚动条无法拖动的问题
前端·javascript·vue.js
苏十八2 小时前
前端进阶:Vue.js
前端·javascript·vue.js·前端框架·npm·node.js·ecmascript
乐容3 小时前
vue3使用pinia中的actions,需要调用接口的话
前端·javascript·vue.js
似水明俊德4 小时前
ASP.NET Core Blazor 5:Blazor表单和数据
java·前端·javascript·html·asp.net
friklogff6 小时前
【JavaScript脚本宇宙】美化网格布局:Isotope和Masonry让你的网页焕然一新
开发语言·前端·javascript
程楠楠&M7 小时前
vue3.0(十六)axios详解以及完整封装方法
前端·javascript·vue.js·axios·anti-design-vue
突然暴富的我8 小时前
Git 的基本概念和使用方式。
前端·git·json·github
朝思暮柒9 小时前
顶顶通呼叫中心中间件-外呼通道变量同步到坐席通道变量(mod_cti基于Freeswitch)
开发语言·javascript·ecmascript
清橙20009 小时前
Vite配置环境变量以及动态更新html数据
开发语言·javascript·safari
st紫月10 小时前
用MySQL+node+vue做一个学生信息管理系统(二):创建MySQL数据表、创建HTML用户列表页面
javascript·vue.js·mysql