仅需三行代码搞定 npm 应用版本管理和日志生成（项目规范首选）

我不叫王小红
124 阅读2分钟

在前端项目迭代频繁的日常中，如何优雅地管理版本号并自动生成标准化的更新日志，常常被开发者忽视。今天分享一个超轻量、零心智负担的解决方案：仅需三行配置，即可实现自动化的版本提升与变更日志生成。

经过作者在公司内部的不断实践，选用以下两个社区稳定成熟的工具：

这套方案支持单包和 Monorepo，适用于绝大多数前端工程项目。

一、安装依赖

在你的项目中执行以下命令：

pnpm add bumpp conventional-changelog-cli -D

建议使用 pnpm 管理依赖。如果你使用的是 npm 或 yarn，请相应替换命令。

二、初始化日志（首次执行）

若是第一次使用或项目未使用标准日志生成工具，需手动生成一份初始 CHANGELOG.md：

npx conventional-changelog -p angular -i CHANGELOG.md -s -r 0

该命令会基于现有的 Git 历史生成完整日志。

三、配置文件

在项目根目录新建 bump.config.ts，内容如下：

// bump.config.ts
import { defineConfig } from 'bumpp'

export default defineConfig({
  all: true,
  execute: 'npx conventional-changelog -p angular -i CHANGELOG.md -s && pnpm build',
})

配置说明：

  • all: true：会对当前目录及所有子包自动提升版本号（适用于 Monorepo）。
  • execute：版本变更后自动执行日志生成及构建命令。

四、添加发布命令

编辑你的 package.json：

{
  "scripts": {
    "preinstall": "npx only-allow pnpm",
    "build": "your-build-command",
    "release": "bumpp -r"
  }
}

如果你还需要将包发布到私有 npm 仓库，可添加以下配置：

{
  "publishConfig": {
    "registry": "http://your-registry.local/"
  },
  "scripts": {
    "release": "bumpp -r && npm publish"
  }
}

五、使用示例

执行发布命令：

pnpm release

它将自动完成以下动作：

  1. 检测 Git 状态，提示选择版本号类型（patch/minor/major）。
  2. 更新版本号至 package.json。
  3. 根据 Git 提交信息生成或更新 CHANGELOG.md。
  4. 自动执行 pnpm build。
  5. 若配置了发布仓库，则自动执行 npm publish。
909e5f23a8aba7fe262dda76e0e30109.png

最后，Bumpp 设置的 tag 你可以在仓库中看到：

image.png

六、提交规范建议

为了确保 changelog 正确生成，推荐遵循 Conventional Commits 规范，如下：

  • feat: 新功能或未上线问题的修复。
  • fix: 已上线功能的问题修复。
  • 其他如 docs、refactor、chore 等根据实际需求扩展。

示例提交信息：

git commit -m "feat: 新增用户信息表单组件"
git commit -m "fix: 修复登录页闪退的问题"

总结

通过这套配置你就可以用最小成本完成版本管理和日志生成的自动化流程，让项目更规范，团队协作更顺畅。

avatar
文章
阅读
粉丝