前端工程化 changeset 详解

一、简介

🦋 一种管理版本控制和变更日志的方法,重点关注 monorepos, 使用 changeset 能够与方便的管理 [semver](https://semver.org/) 的 patch/minor/major 三个不同的版本,当然也可以通过 prereleases, prereleases 一般而是分为三个阶段alpha(内部测试)/beta(测试)/rc(预发布)

二、谁在用 changeset

一些知名的前端项目,在使用 changeset 管理自己的 monorepos:

  • pnpm
  • astro
  • remix
  • SvelteKit
  • modern.js

三、安装

sh 复制代码
pnpm add @changesets/cli -D

四、changeset 的所有命令

sh 复制代码
Usage
    $ changeset [command]
  Commands
    init
    add [--empty] [--open]
    version [--ignore] [--snapshot <?name>] [--snapshot-prerelease-template <template>]       
    publish [--tag <name>] [--otp <code>] [--no-git-tag]
    status [--since <branch>] [--verbose] [--output JSON_FILE.json]
    pre <enter|exit> <tag>
    tag

五、常用命令

sh 复制代码
# 初始化
npx changeset init

# 添加 changeset
npx changeset add
npx changeset

# 版本
npx changeset version

# 发布
npx changeset publish

六、changeset 主要流程

graph LR 初始化 --> 执行changeset-add --> 选择要升级的方案 --> 执行执行changeset-version升级-->其他

七、初始化

sh 复制代码
npx changesets init

特别注意:init 命令创建的分支 main 分支,与你的项目的分支师傅匹配要考虑。

八、配置文件分析

  • changesets/.changeset/config.json
ts 复制代码
{
  "$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json",
  "changelog": "@changesets/cli/changelog",
  "commit": false,
  "fixed": [],
  "linked": [],
  "access": "restricted",
  "baseBranch": "master",
  "updateInternalDependencies": "patch",
  "ignore": []
}

九、配置项目解读

| 配置项 | 值 | 描述 |
|----------------------------|-----------------------------|-----------------------------------------------------------------------------------|-----------|
| commit | false | 用于设置该 changeset add 命令是否 changeset version 也将使用 git 添加并提交更改的文件,以及如何为它们生成提交消息。 |
| updateInternalDependencies | "patch" | 设置当所依赖的包发生变化时,是否应该更新它所依赖的版本。 |
| linked | [] | 用于声明包应该"共享"版本,而不是完全独立地进行版本控制。 |
| access | "restricted" | 设置了包的发布方式 'restricted' | 'public'。 |
| baseBranch | "master" | 变更集将与之进行比较的分支。 |
| ignore | [] | 指定一些不会发布的包,即使它们在变更集中被引用。相反,这些变更集将被跳过,直到它们从该数组中删除。 |
| changelog | "@changesets/cli/changelog" | 设置如何生成包的更改日志。如果是 false,则不会生成任何变更日志。将其设置为字符串指定我们将加载变更日志生成函数的路径。 |

十、使用 changeset 修改 release 版本和 CHANGE_LOGS

10.1)pnpm 初始化项目

sh 复制代码
cd your project

pnpm init

touch pnpm-workspace.yaml # 文件

10.2)pnpm-workspaces.yaml 中添加 workspace 包

yaml 复制代码
packages:
  - packages/*

增加三个包 one/two/three, 并 npx changeset init.

10.3)生成markdown 文件

sh 复制代码
npx changeset
# 或者
npx changeset add

10.4) 生成版本

sh 复制代码
npx changeset version

到这里将 monorepo 的修改最小版本 patch 方案实践一遍,其他的与之类似。

十一、使用 changeset 修改 非 release 版本和 CHANGE_LOGS

非 release 模式

sh 复制代码
https://github.com/changesets/changesets/blob/main/docs/prereleases.md

流程

  • 手动修改包的 version 字段
  • 给发布打上 changeset publish --tag beta tag
  • 依据 tag 进行 pre 模式changeset pre enter beta, 以后此模式走 对应的 tag 环境
  • 执行 changeset 操作、
  • 退出对应的 pre 模式changeset pre exit
  • 完成后发布 changeset publish --registry=https://registry.npmjs.com/

小结

本文主要讲解了 changeset 是什么,以及如何使用其构建版 release 和生成 log, 也包含了 pre 模式的是使用过程。学以致用,希望我们学到的东西能够帮助得到读者,当然技术更加需要读者自己的实践,实践才能真实的提升自己的能力。

相关推荐
玩电脑的辣条哥3 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452183 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52353 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.93 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站3 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
m0_748256144 小时前
SpringBoot
java·spring boot·后端
多想和从前一样5 小时前
Django 创建表时 “__str__ ”方法的使用
后端·python·django
工业甲酰苯胺6 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
涛粒子7 小时前
Spring Bean 生命周期的执行流程
java·后端·spring
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt