组件库实践：代码提交规范 & commitlint & changesets 版本发布

代码提交规范

commit 规范

1、commitizen/cz-cli 是一个交互式提交说明工具，根据选择提交信息类别，快速生成提交说明，安装 commitizen

shell 复制代码

pnpm add commitizen -D

2、在项目中使用 commitizen 生成符合 AngularJS 规范的提交说明，安装并初始化 cz-conventional-changelog 适配器：

shell 复制代码

npx commitizen init cz-conventional-changelog --save --save-exact

运行上面命令主要进行了3件事情

在项目中安装 cz-conventional-changelog 适配器依赖
将适配器依赖保存到 package.json 的 devDependencies 字段信息
在 package.json 中新增 config.commitizen 字段信息，主要用于配置cz工具的适配器路径

json 复制代码

"devDependencies": {
 "commitizen": "^4.3.0",
 "cz-conventional-changelog": "^3.3.0"
},
"config": {
  "commitizen": {
    "path": "node_modules/cz-conventional-changelog"
  }
}

如果当前已经有其他适配器被使用，则会错误，此时可以加上 --force 选项进行再次初始化

使用 git cz 命令代替 git commit，运行后出现下面选择提交类型界面

3、cz-customizable 用来定制项目提交说明

csharp 复制代码

pnpm add cz-customizable -D

将之前符合Angular规范的 cz-conventional-changelog 适配器路径改成 cz-customizable 适配器路径：

json 复制代码

"devDependencies": {
  "cz-customizable": "^7.0.0"
},
"config": {
  "commitizen": {
    "path": "node_modules/cz-customizable"
  }
}

官方提供了一个 .cz-config.js 示例文件 cz-config-EXAMPLE.js，进行修改一下

js 复制代码

module.exports = {

  types: [
    {value: 'feat',     name: 'feat:     A new feature'},
    {value: 'fix',      name: 'fix:      A bug fix'},
    {value: 'docs',     name: 'docs:     Documentation only changes'},
    {value: 'style',    name: 'style:    Changes that do not affect the meaning of the code\n            (white-space, formatting, missing semi-colons, etc)'},
    {value: 'refactor', name: 'refactor: A code change that neither fixes a bug nor adds a feature'},
    {value: 'perf',     name: 'perf:     A code change that improves performance'},
    {value: 'test',     name: 'test:     Adding missing tests'},
    {value: 'chore',    name: 'chore:    Changes to the build process or auxiliary tools\n            and libraries such as documentation generation'},
    {value: 'revert',   name: 'revert:   Revert to a commit'},
    {value: 'WIP',      name: 'WIP:      Work in progress'}
  ],

  scopes: [
    {name: 'docs'},
    {name: 'components'},
    {name: 'icons'},
  ],
  allowCustomScopes: true,
  allowBreakingChanges: ['feat', 'fix'],

  // limit subject length
  subjectLimit: 100
};

重新执行 git cz，提交类型说明显示的是自定义的了

commitlint 提交校验

如果命令行手动输入 git commit 不会进行符合 AngularJS 规范检查

安装 commitlint，@commitlint/config-conventional 校验符合 Angular 风格的校验规则

shell 复制代码

pnpm add @commitlint/cli @commitlint/config-conventional -D

在项目中新建 commitlint.config.js 文件并设置校验规则：

js 复制代码

module.exports = {
  extends: ['@commitlint/config-conventional']
};

安装 husky（git钩子工具）

shell 复制代码

pnpm add husky -D

执行 npx husky install 创建 .husky/-目录，自动生成了很多 git 钩子

修改 commit-msg 钩子内容

shell 复制代码

#!/usr/bin/env sh
#. "${0%/*}/h"

npx --no-install commitlint --edit "$1"

在使用 git commit 提交一个不符合规范 commit，校验不通过终止提交

changesets 版本管理和发布包

使用 changesets 管理包的 version 和生成changelog 日志

安装

shell 复制代码

pnpm add @changesets/cli -Dw

执行初始化命令

shell 复制代码

pnpm changeset init

在工程的根目录下生成 .changeset 目录，其中的 config.json 作为默认的 changeset 的配置文件。

json 复制代码

{
  "$schema": "https://unpkg.com/@changesets/config@2.0.0/schema.json",
  "changelog": "@changesets/cli/changelog",
  "commit": false,
  "linked": [],
  "access": "public",
  "baseBranch": "main",
  "updateInternalDependencies": "patch",
  "ignore": [],
  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
      "onlyUpdatePeerDependentsWhenOutOfRange": true
  }
}

字段说明

changelog: changelog 生成方式
commit: 不要让 changeset 在 publish 的时候帮我们做 git add
linked: 配置哪些包要共享版本
access: 公私有安全设定，内网建议 restricted ，开源使用 public
baseBranch: 项目主分支
updateInternalDependencies: 确保某包依赖的包发生 upgrade，该包也要发生 version upgrade 的衡量单位（量级）
ignore: 不需要变动 version 的包
___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH: 在每次 version 变动时一定无理由 patch 抬升依赖他的那些包的版本，防止陷入 major 优先的未更新问题

changesets 生成 changelog 日志

在工程根目录下的 pacakge.json 配置 scripts 命令

1、执行 changeset，开始交互式填写变更集，这个命令会将你的包全部列出来，然后选择你要更改发布的包

json 复制代码

{
  "changeset": "changeset"
}

版本的选择一共有三种类型，严格遵循 semver 规范

patch：打补丁，修复一个 bug
minor：新增功能，向后兼容
major：破坏性升级，API 可能不兼容

运行 pnpm changeset 会列出你想要发布的包，选择后进行下一步

列出选择的包，选择某个包是否进行 major 大的版本变更
上一步选择否，会在进行下一步是否进行 minor 版本变更
如果上一步选择否，就是 patch 版本变更

执行完后，会在 .changeset 目录生成一个临时性 markdown 文件，如

yaml 复制代码

---
'@swc-ui/components': patch
'@swc-ui/icons': patch
---

fix a bug

2、生成 changelog 日志

运行 pnpm update-changelog，会删除 .changeset 目录下的临时性 markdown 文件，然后更新发布包的 package.json 文件 version 字段，并且更新 CHANGELOG.md 文件

json 复制代码

{
  "update-changelog": "changeset version"
}

changeset 发布包

json 复制代码

{
  "release": "changeset publish --registry=https://registry.npmjs.com/ --access=public"
}

有看到非正式框架带有 beta 版本，使用 changeset 也能支持发布

1、首先需要手动修改包的版本号

json 复制代码

{
  "version": "1.0.1-beta.1"
}

然后运行：pnpm changeset publish --tag beta

常见的tag如下所示：

alpha：是内部测试版，一般不向外部发布，会有很多Bug，一般只有测试人员使用 beta：也是测试版，这个阶段的版本会一直加入新的功能。在Alpha版之后推出 rc：系统平台上就是发行候选版本。RC版不会再加入新的功能了，主要着重于除错

利用官方提供的 Prereleases 模式，通过 pre enter <tag> 命令进入先进入 pre 模式

shell 复制代码

pnpm changeset pre enter beta

之后在此模式下的 changeset publish 均将默认走 beta 环境

完成版本发布之后，退出 Prereleases 模式：

shell 复制代码

pnpm changeset pre exit

如对新技术开发组件库感兴趣，也欢迎加入stencil-component-ui，给个 star 鼓励一下 👏👏