release-it帮我做了哪些自动化的事情

2,473 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第20天,点击查看活动详情

大家好,我是 那个曾经的少年回来了。10年前我也曾经年轻过,如今已步入被淘汰的年龄,但如下幡然醒悟,所以活在当下,每天努力一点点,来看看2024年的时候自己会是什么样子吧,2024年的前端又会是什么样子,而2024年的中国乃至全球又会变成什么样子,如果你也有想法,那还不赶紧行动起来。期待是美好的,但是更重要的是要为美好而为之奋斗付诸于行动。

1、release-it能干什么

  • 我们先正常提交我们自己的代码,需求或bug以及其他

  • 自动根据上一个版本标签(Tag)与最新历史进行对比并产出日志

  • conventional-changelog将变更写入到CHANGELOG.md

  • 解析日志内容更新package.json的版本号

  • 提交内容变化并打上版本标签

  • 打开浏览器github,发布change-log版本

2、安装release-it

在项目根目录下安装依赖

npm i release-it

3、添加脚本

在package.json中添加脚本

  "scripts": {
    "release": "release-it"
  },

4、提交代码

假如我们变更了一部分代码,一般都要先提交 推送到代码服务器

git add .
git commit -m 'feat: release-it'

这里可以省略git push

5、运行release

npm run release

然后开始发挥 release-it的作用。

image.png

一路选择后便可以执行完成了

这里生成了changelog但是没有地方进行记录,于是release-it/conventional-changelog闪亮登场

6、安装release-it/conventional-changelog

npm i @release-it/conventional-changelog -D

7、release-it 单独配置.release-it.json

{
    "github": {
      "release": true
    },
    "git": {
      "commitMessage": "release: v${version}"
    },
    "npm": {
      "publish": false
    },
    "hooks": {
      "after:bump": "echo 更新版本成功"
    },
    "plugins": {
      "@release-it/conventional-changelog": {
        "preset": "angular",
        "infile": "CHANGELOG.md"
      }
    }
  }

image.png

8、最终会打开浏览器

image.png

将我们的提交转换为release,点击一下就可以发布出去了

image.png

我去看了一下我平常用的最多的vant

image.png

原来碰巧它用的就是release-it

9、总结

通过这样一个工具就可以省掉很多原来需要手动很多步骤才能解决的问题,真的是一劳永逸,不得不说这些大佬真的是有思想啊。