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

简介: 这篇文章介绍了如何使用release-it工具实现以下功能:增加版本号并提交Git、生成变更日志(Changelog)并提交到Git、创建Git标签并推送到远程仓库、发布到npm等软件仓库、在GitHub、GitLab等平台创建发行版。文章还提到了前置知识,介绍了SemVer规范的内容和安装依赖的步骤。在文章的最后,展示了使用release-it生成的效果预览、git打的标签Tag以及待办事项(Todo)。最后还提到了安装NuxtUI。

release-it 能做什么?

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

前置知识

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

安装依赖

1、 执行命令

 pnpm add release-it @release-it/conventional-changelog -D

2、 根目录添加 .release-it.json 配置文件,具体配置请参考:conventional-changelog

   {
   
    "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 ,需要的朋友可自己配置

3、 向 package.jsonscripts 中添加命令:

 "release": "release-it"

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

 # 更新主版本号
 pnpm release major

 # 更新次版本号
 pnpm release minor

 # 更新修订号
 pnpm release patch

4、 在我们开发完代码后,执行 pnpm release 命令,控制太会自动帮我们打包版本号并生成 CHANGELOG
v4qnqmtsjauwab4t3at2oqlcljfep603.png

效果预览

  • git 打的标签 Tag
    k4ajj2mp5bhud9wm5wlapc1hb7hh34ug.png
  • CHANGELOG
    2thfhpke5wmzlmdmtn3e6kdrcqox399b.png

Todo

  • 安装 Nuxt UI 和配置 Typescript 类型检查
相关文章
|
数据采集 前端开发 JavaScript
我是如何使用 Next.js14 + Tailwindcss 重构个人项目的
这篇文章介绍了作者在学习React和Nest时受到大佬imsyy项目DailyHot的启发,基于React开发了一个项目,并因为这个项目获得了少量流量而进行了优化。作者随后因为想要优化SEO和深入学习Next.js14,决定重构这个项目。文章详细介绍了项目的信息、特性、演示图、运行环境、Vercel本地部署步骤以及责任声明。作者还感谢了为本项目提供支持与灵感的项目,并承诺会记录下开发过程中遇到的问题及解决方法以帮助他人。
278 0
我是如何使用 Next.js14 + Tailwindcss 重构个人项目的
|
9月前
|
资源调度
Vue3 + Vite 构建组件库发布到 npm
这篇文章介绍了如何使用Vue3和Vite构建组件库并发布到npm,包括初始化项目、配置项目结构、创建组件目录、设置入口文件以及导出组件等步骤。
1284 0
Vue3 + Vite 构建组件库发布到 npm
|
存储 JavaScript 中间件
Nuxt3 实战 (一):初始化项目
这篇文章介绍了Nuxt框架的基本信息,包括什么是Nuxt以及Nuxt3的优点。文章还介绍了Nuxt3的一些特点,如服务端渲染和静态站点生成、模块化、文件系统路由等。此外,文章还提供了项目安装的步骤和目录结构。最后,文章提到了下一步计划,即配置 Eslint、Prettier、Husky、lint-staged、commitlit项目提交规范的过程。
620 3
Nuxt3 实战 (一):初始化项目
|
6月前
|
机器学习/深度学习 人工智能 前端开发
终端里的 AI 编程助手:OpenCode 使用指南
OpenCode 是开源的终端 AI 编码助手,支持 Claude、GPT-4 等模型,可在命令行完成代码编写、Bug 修复、项目重构。提供原生终端界面和上下文感知能力,适合全栈开发者和终端用户使用。
53501 11
|
JavaScript 前端开发 搜索推荐
Nuxt4.0初体验:一个简约、精美、现代化的个人站点导航!
这篇文章介绍了作者使用Nuxt 4.0重构个性化站点导航网站的经历,阐述了Nuxt 4.0的新特性和优势,如更清晰的项目结构、更好的TypeScript体验、更快的CLI和开发速度等,并且分享了重构过程中的体验和项目完成效果。同时,作者还对比了Nuxt.js与Next.js两个框架的优劣,表达了自己对Nuxt.js的偏好。
717 0
Nuxt4.0初体验:一个简约、精美、现代化的个人站点导航!
|
安全 关系型数据库 API
Nuxt3 实战 (七):配置 Supabase 数据库
这篇文章介绍了如何为Nuxt项目集成Supabase数据库。文章首先阐述了选择Supabase作为Nuxt项目的数据库的理由,包括其良好的网络评价、与Nuxt的良好集成以及对用户认证和身份鉴权的支持。接着,文章详细介绍了Supabase的特点,如使用PostgreSQL作为数据库、提供完整的认证系统、支持实时数据同步和提供对象存储服务等。然后,文章指导读者如何在Nuxt项目中安装和配置Supabase,包括设置重定向策略和获取数据库访问密钥。最后,文章强调了在开发环境和生产环境中使用不同密钥的重要性。
944 0
Nuxt3 实战 (七):配置 Supabase 数据库
|
前端开发 JavaScript API
TS 中的类型验算,高级通用 API 实现
这篇文章介绍了一些常用的类型通用API封装,包括TS内置类型和关键字的使用,以及TS compiler内部实现的类型。文章截取了一些常用的类型定义和API示例,如Partial、Required、Readonly、NonNullable、Parameters等。还介绍了一些常用的TS关键字,如extends、infer、keyof、typeof、in等。此外,文章还提供了一些实现示例,如Optional API、GetOptional API和UnionToIntersection API。该文章会不断更新。
315 0
TS 中的类型验算,高级通用 API 实现
Next.js 实战 (二):搭建 Layouts 基础排版布局
本文介绍了作者在Next.js v15.x版本发布后,对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择(最终选择了Ant-Design)、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果,并提供了GitHub仓库链接供读者参考学习。
542 1
Next.js 实战 (二):搭建 Layouts 基础排版布局
|
监控 安全 中间件
Next.js 实战 (十):中间件的魅力,打造更快更安全的应用
这篇文章介绍了什么是Next.js中的中间件以及其应用场景。中间件可以用于处理每个传入请求,比如实现日志记录、身份验证、重定向、CORS配置等功能。文章还提供了一个身份验证中间件的示例代码,以及如何使用限流中间件来限制同一IP地址的请求次数。中间件相当于一个构建模块,能够简化HTTP请求的预处理和后处理,提高代码的可维护性,有助于创建快速、安全和用户友好的Web体验。
432 0
Next.js 实战 (十):中间件的魅力,打造更快更安全的应用
|
前端开发 API 开发者
Next.js 实战 (五):添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Framer Motion,一个为React设计的动画库,提供了声明式API处理动画和页面转换,适合创建响应式用户界面。文章包括首屏加载动画、路由加载Loading、路由进场和退场动画等主题,并提供了使用Framer Motion和next.js实现这些动画的示例代码。最后,文章总结了这些效果,并邀请读者探讨更好的实现方案。
468 0
Next.js 实战 (五):添加路由 Transition 过渡效果和 Loading 动画