前端工程化 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 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊3 小时前
Python之--基本知识
开发语言·前端·python
Piper蛋窝3 小时前
深入 Go 语言垃圾回收:从原理到内建类型 Slice、Map 的陷阱以及为何需要 strings.Builder
后端·go
安全系统学习4 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖4 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水5 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐5 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06275 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121385 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css