前端工程化 changeset 详解

一、简介

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

二、谁在用 changeset

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

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

三、安装

pnpm add @changesets/cli -D

四、changeset 的所有命令

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

五、常用命令

# 初始化
npx changeset init

# 添加 changeset
npx changeset add
npx changeset

# 版本
npx changeset version

# 发布
npx changeset publish

六、changeset 主要流程

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

七、初始化

npx changesets init

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

八、配置文件分析

• changesets/.changeset/config.json

{
  "$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 初始化项目

cd your project

pnpm init

touch pnpm-workspace.yaml # 文件

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

packages:
  - packages/*

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

10.3）生成markdown 文件

npx changeset
# 或者
npx changeset add

10.4) 生成版本

npx changeset version

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

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

非 release 模式

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 模式的是使用过程。学以致用，希望我们学到的东西能够帮助得到读者，当然技术更加需要读者自己的实践，实践才能真实的提升自己的能力。