使用 release-it + conventional-changelog 实现 Vite + Vue 项目一键发布 npm 包（含自动生成 changelog）

This content originally appeared on DEV Community and was authored by Leo

使用 release-it 结合 @release-it/conventional-changelog，让你的 Vue/Vite 项目支持自动化版本管理、Git 打 tag、生成 changelog、推送 GitHub 和发布 npm，只需一条命令！

项目背景

以 Vite + Vue 项目为例，我们希望一键完成：

1. 构建组件库

2. 自动 bump 版本

3. 自动生成 CHANGELOG.md

4. 自动提交 Git + tag + 推 GitHub

5. 自动发布到 npm

6. 自动发布 GitHub Release（带 changelog）

安装依赖

在组件库根目录运行：

npm install –save-dev release-it @release-it/conventional-changelog

配置 .release-it.json

创建 .release-it.json 文件（或者更新已有配置）如下：

{
  "plugins": {
    "@release-it/conventional-changelog": {
      "preset": "conventionalcommits",
      "infile": "CHANGELOG.md"
    }
  },
  "hooks": {
    "before:init": "npm run build"
  },
  "git": {
    "commitMessage": "chore(release): v${version}",
    "tagName": "v${version}"
  },
  "github": {
    "release": true
  },
  "npm": {
    "publish": true,
    "access": "public"
  }
}

关键点：

• @release-it/conventional-changelog：根据 Git 提交记录生成 changelog。

• preset：使用 Conventional Commits 风格（支持 Angular preset 等）。

• infile：生成到 CHANGELOG.md 文件中。

• before:init：在发布前执行构建命令。

• github.release: true：自动发布 GitHub Release，附 changelog 内容。

package.json 配置

确认你的 package.json 包名使用了作用域（scope）形式，并设置 access：

{
  "name": "@yourname/my-vue-lib",
  "version": "0.1.0",
  "scripts": {
    "build": "vite build",
    "release": "release-it"
  },
  "publishConfig": {
    "access": "public"
  }
}

使用 Conventional Commit 提交代码

自动生成 changelog 的前提是，提交记录符合 Conventional Commits 规范。例如：

• feat: 新增按钮组件

• fix: 修复样式兼容性问题

• chore: 升级依赖

• docs: 更新文档

可以手动遵守规范，或配合 Commitizen 实现规范化提交。

登录 npm

首次发布前请确保你已登录 npm：

npm login

初始化 Git 仓库（如果尚未）

git init
git remote add origin https://github.com/yourname/my-vue-lib.git
git add .
git commit -m "init: first commit"
git push -u origin main

一条命令自动发布！

npm run release

将执行：

• 自动构建

• 自动 bump 版本号（可交互选择 patch/minor/major）

• 生成/更新 CHANGELOG.md

• 提交 + tag + 推送到 GitHub

• 发布 GitHub Release（附带 changelog）

• 发布 npm 包

示例输出（可复制发布日志）

✔ bump version from 0.1.0 to 0.1.1
✔ running before:init hook
✔ npm run build
✔ CHANGELOG.md updated
✔ git commit
✔ git tag v0.1.1
✔ git push
✔ GitHub release created
✔ npm published with tag latest

生成的 CHANGELOG.md 示例：

## [0.1.1] - 2025-04-21

### ✨ Features

- 新增 `<MyButton />` 组件

### 🐛 Bug Fixes

- 修复 Safari 下样式不生效的问题

总结

使用 release-it + changelog 插件，组件库发布流程就可以自动完成：

构建

版本管理

生成 changelog

发布 GitHub Release

发布到 npm

只需运行：

npm run release

This content originally appeared on DEV Community and was authored by Leo