爱学习IT200.cn
Search K

Appearance

🚀使用“release-it”一气呵成：version、tag、changelog 。。。 ​

TIP

🎄Hi~ 大家好，我是小鑫同学，资深 IT 从业者，InfoQ 的签约作者，擅长前端开发并在这一领域有多年的经验，致力于分享我在技术方面的见解和心得

使用release-it可以进行版本管理，并通过默认提供的配置文件、三方插件和Hooks等功能执行测试、构建、发布等项目内置的任何命令，并进行发布~

功能列表： ​

  1. 支持版本号升级；
  2. 支持Git提交、打Tag、推送；
  3. 支持使用Hooks执行测试或构建等命令；
  4. 支持在GIthub发布版本；
  5. 支持生成变更日志；
  6. 支持发布到NPM仓库；
  7. 支持插件扩展功能；
  8. ...

2. 基本功能验证： ​

创建一个空的项目来演示release-it的使用方法

2.1 安装release-it： ​

  1. 安装模块：npm i -D release-it；
  2. 添加脚本：
json
{
  "scripts": {
    "release": "release-it"
  }
}
{
  "scripts": {
    "release": "release-it"
  }
}

2.2 运行release-it： ​

  1. 初次运行npm run release，可能会提示 Not authenticated with npm. Please npm login and try again. ，因为你没有登录NPM账号，因为它想帮助你将此项目自动发布至NPM仓库；
  2. 登录NPM提示：登录NPM需要注意切换NPM官方地址，可以使用NRM管理方便切换，登录NPM需要主要双因素验证~
  3. 再次运行npm run release后在终端执行了以下几个过程：
a. 询问发布版本号如何递增；
b. 询问是否发布到NPM并进行NPM动态验证码验证；
c. 询问提交版本x.y.z；
d. 如果发现你没有任何跟踪的文件会提示通过git add <file>...来跟踪文件；
e. 询问是否打Tag；
f. 询问是否推送到远程仓库；
a. 询问发布版本号如何递增；
b. 询问是否发布到NPM并进行NPM动态验证码验证；
c. 询问提交版本x.y.z；
d. 如果发现你没有任何跟踪的文件会提示通过git add <file>...来跟踪文件；
e. 询问是否打Tag；
f. 询问是否推送到远程仓库；

2.3 运行截图&结果： ​

  1. 执行npm run release后终端截图：

image.png

  1. 发布在Github上增加了tag并增加了tag对应的release版本：

image.png

  1. 在NPM仓库看到0.0.2版本的包已经成功发布：

image.png

2.4 简单总结一下： ​

通过运行release-it命令成功更新了项目版本号、推送到NPM，增加对应版本的TAG并推送到了Github，还增加了对应的release版本，使用release-it节省了很多我们需要单独操作的一些步骤。

3. 规范/查看 changelog： ​

为了更好的支持release-it模块可以生成规范的changelog，我们可以安装git-cz模块在终端通过交互的模式实现~

3.1 规范changelog的生成规则： ​

  1. 安装模块：npm i -D git-cz；
  2. 添加脚本：
json
{
  "scripts": {
    "commit": "git-cz"
  }
}
{
  "scripts": {
    "commit": "git-cz"
  }
}
  1. 运行npm run commit前请将变更文件添加暂存；

image.png

3.2 使用release-it查看changelog： ​

因为changelog文件只有在使用release-it命令后才会去发生变更，仅仅是为了查看而不需要发布可以按下面命令操作~

执行命令：npx release-it --changelog； image.png 执行命令：npx release-it --release-version；可以查看下一个该发布的版本号； image.png

4. 友好的持续集成： ​

在前面执行release-it命令是我们使用的是默认的交互模式来由我们手动确定每一步的操作，在CI过程中我们需要改变一下这样的交互方式

4.1 应用配置文件实现部分功能的调整： ​

在第一次执行release-it命令是使用的就是其默认配置，可以看到默认配置已经非常完善了，但是我们往往还是需要通过配置来实现更加符合自己项目的定义，这时候就需要在项目根目录添加一个.release-it.json文件来完成个性化配置~

下面的示例中我们默认关闭了向NPM发布包的过程，更多配置可以参考release-it.json~

json
{
  "git": {
    "commitMessage": "chore: release v${version}",
    "commit": true,
    "tag": true,
    "push": true
  },
  "github": {
    "release": true
  },
  "npm": {
    "publish": false
  }
}
{
  "git": {
    "commitMessage": "chore: release v${version}",
    "commit": true,
    "tag": true,
    "push": true
  },
  "github": {
    "release": true
  },
  "npm": {
    "publish": false
  }
}

4.2 启用CI模式： ​

  1. 使用--ci选项启用CI模式，在持续集成时将不在进行交互操作；
  2. 使用--only-version选项将仅通过交互来确认版本，其余过程自动完成；

4.3 再次执行release-it： ​

  1. 添加变更文件到暂存；
  2. 执行git-cz：npm run commit；

image.png

  1. 再次执行release-it：

image.png

  1. 点击最后生成的GitHub Release地址后跳转到下面页面，我们只需要点击一下就可以完成版本发布了~

image.pngimage.png

5. 生成CHANGELOG.md： ​

在前面的操作过程中我们成功的生成的主流的changelog内容，但是缺少一下汇总的MD文件，我们通过一个插件来完成这件事情~

  1. 安装模块：npm i -D @release-it/conventional-changelog；
  2. 配置插件到.release-it.json：
json
{
  ...
  "plugins": {
    "@release-it/conventional-changelog": {
      "infile": "CHANGELOG.md",
      "preset": {
        "name": "conventionalcommits",
        "header": "# Changelog",
        "types": [
          { "type": "feat", "section": "Features" },
          { "type": "fix", "section": "Bug Fixes" },
          { "type": "chore", "hidden": true },
          { "type": "docs", "hidden": true },
          { "type": "style", "hidden": true },
          { "type": "refactor", "hidden": true },
          { "type": "perf", "hidden": true },
          { "type": "test", "hidden": true }
        ]
      }
    }
  }
}
{
  ...
  "plugins": {
    "@release-it/conventional-changelog": {
      "infile": "CHANGELOG.md",
      "preset": {
        "name": "conventionalcommits",
        "header": "# Changelog",
        "types": [
          { "type": "feat", "section": "Features" },
          { "type": "fix", "section": "Bug Fixes" },
          { "type": "chore", "hidden": true },
          { "type": "docs", "hidden": true },
          { "type": "style", "hidden": true },
          { "type": "refactor", "hidden": true },
          { "type": "perf", "hidden": true },
          { "type": "test", "hidden": true }
        ]
      }
    }
  }
}
  1. 增加对应的模块后我们尝试在src/index.js再增加一个函数，并将这一切统统提交到git仓库，只有feat和fix两种标识的变更会被记录到CHANGELOG.md文件中；

image.pngimage.png 更多插件可以查看release-it Plugins~ image.png

6. 总结 ​

上面我们演示了使用release-it的很多功能，基本可以完成我们大多数项目的自动发布、打Tag、生成变更日志等工作，在release-it Plugins中还提供了一些比较不错的插件可以试用一下，比如说 lerna-changelog 和 workspaces 等，期待在pnpm管理项目中尝试一下~

本文项目已推送至GitHub，欢迎克隆演示：git clone https://github.com/OSpoon/release-it-demo.git