Nuxt3 实战 (三):使用 release-it 自动管理版本号和生成 CHANGELOG

release-it 能做什么?

  1. 增加版本号并提交 Git
  2. 生成变更日志(Changelog)并提交到 Git
  3. 创建 Git 标签并推送到远程仓库
  4. 发布到 npm 等软件仓库
  5. GitHubGitLab 等平台创建发行版

前置知识

在看这篇文章之前,我们有必要了解一下 SemVer规范

安装依赖

  1. 执行命令
powershell 复制代码
pnpm add release-it @release-it/conventional-changelog -D
  1. 根目录添加 .release-it.json 配置文件,具体配置请参考:conventional-changelog
json 复制代码
  {
   "plugins": {
     "@release-it/conventional-changelog": {
       "preset": {
         "name": "conventionalcommits",
         "types": [
           { "type": "feat", "section": "✨ Features | 新功能" },
           { "type": "fix", "section": "🐛 Bug Fixes | Bug 修复" },
           { "type": "chore", "section": "🎫 Chores | 其他更新" },
           { "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": "⏪ Reverts | 回退" },
           { "type": "build", "section": "👷‍ Build System | 构建" },
           { "type": "ci", "section": "🔧 Continuous Integration | CI 配置" },
           { "type": "config", "section": "🔨 CONFIG | 配置" }
         ]
       },
       "infile": "CHANGELOG.md",
       "ignoreRecommendedBump": true,
       "strictSemVer": true
     }
   },
   "git": {
     "commitMessage": "chore: Release v${version}"
   },
   "github": {
     "release": true,
     "draft": false
   }
 }

配置说明:

  • git:配置 Git 相关的任务,如自动提交代码、打标签等
  • github:配置 GitHub 相关的任务,如创建发行版
  • npm:配置 npm 相关的任务,如发布到 npm 仓库
  • plugins:配置使用的插件

本文并没有发布到 npm ,需要的朋友可自己配置

  1. package.jsonscripts 中添加命令:
json 复制代码
"release": "release-it"

上面命令默认更新次版本号,如果想每次更新修订号,可执行 pnpm release patch

powershell 复制代码
# 更新主版本号
pnpm release major

# 更新次版本号
pnpm release minor

# 更新修订号
pnpm release patch
  1. 在我们开发完代码后,执行 pnpm release 命令,控制太会自动帮我们打包版本号并生成 CHANGELOG

效果预览

  • git 打的标签 Tag
  • CHANGELOG

Todo

相关推荐
黄尚圈圈3 小时前
Vue 中引入 ECharts 的详细步骤与示例
前端·vue.js·echarts
一路向前的月光8 小时前
Vue2中的监听和计算属性的区别
前端·javascript·vue.js
长路 ㅤ   8 小时前
vue-live2d看板娘集成方案设计使用教程
前端·javascript·vue.js·live2d
Jiaberrr9 小时前
Element UI教程:如何将Radio单选框的圆框改为方框
前端·javascript·vue.js·ui·elementui
Amd79411 小时前
Nuxt.js 应用中的 app:suspense:resolve 钩子详解
组件状态·nuxt.js·异步渲染·钩子函数·异步数据·vue suspense·app:suspense:resolve
程序员大金12 小时前
基于SpringBoot+Vue+MySQL的装修公司管理系统
vue.js·spring boot·mysql
道爷我悟了13 小时前
Vue入门-指令学习-v-html
vue.js·学习·html
无咎.lsy13 小时前
vue之vuex的使用及举例
前端·javascript·vue.js
工业互联网专业14 小时前
毕业设计选题:基于ssm+vue+uniapp的校园水电费管理小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
计算机学姐14 小时前
基于SpringBoot+Vue的在线投票系统
java·vue.js·spring boot·后端·学习·intellij-idea·mybatis