如何规范微信小程序项目的提交信息和上传版本号?

lxf2023-05-18 01:45:21

笔者在开发微信小程序的时候发现开发者工具在上传代码版本管理这两个功能(环节)中有一点小瑕疵。

首先,对于代码上传,这个功能是要把当前的代码上传到开发者后台,需要在弹窗的表单中填写版本号和备注,这个版本号弹窗中没有回显上一次提交的版本,而且即便开发者按照“X.Y.Z”的形式填写,那么填写的版本号也不一定合理。如下图所示:

如何规范微信小程序项目的提交信息和上传版本号?

其次,对于版本管理,这个功能是要把当前的代码上传到远程仓库,需要用户填写commit的注释,可是这也不能保证提交代码的注释符合规范。如下图所示:

如何规范微信小程序项目的提交信息和上传版本号?

针对以上两个问题,我们可以使用release-it来生成版本号,在将代码上传到微信开发者后台时候填写的版本号参照release-it生成的版本号;可以使用git-cz来规范提交信息,我们提交代码到远程的时候不再使用开发者工具提供通过的版本管理功能,而是使用git-cz。下面我们来详细看一下:

1.使用release-it规范版本号

1.1 release-it简介

release-it 是用于版本管理和发布的一个npm包,一些我们常用的npm包都依赖于release-it。如下图所示:

如何规范微信小程序项目的提交信息和上传版本号?

上图中,我们看到大名鼎鼎的axios, js-cookie, vant等。下面我们来看一下如何在微信小程序项目中使用release-it。

1.2 在小程序项目中使用release-it

1.首先在微信小程序项目的根目录打开命令行终端并执行如下命令:

npm init release-it

如下图所示:

如何规范微信小程序项目的提交信息和上传版本号?

在命令询问在何处添加relase-it的配置时,我们选择.release-it.json,如下图所示:

如何规范微信小程序项目的提交信息和上传版本号?

命令执行完将会在package,json中的npm scripts增加一项,如下图所示:

如何规范微信小程序项目的提交信息和上传版本号?

2.需要在项目根目录下新建一个.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"
    }
  }
}

3.然后执行如下命令:

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

4.最后在项目根目录下新建一个 CHANGELOG.md 文件.

5.接下来就可以通过运行npm run release 来使用release-it, 如下图:

如何规范微信小程序项目的提交信息和上传版本号?

可见在运行release-it之前需要提交代码,提交代码后再试一下:

如何规范微信小程序项目的提交信息和上传版本号?

可见release-it将版本号从1.5.0升级到了1.5.1,除了在控制台中可以看到这个版本号信息,在package.json中也可以看到,如下图:

如何规范微信小程序项目的提交信息和上传版本号?

需要说明的是release-it可以很合理地升级版本号:比如说当前版本为1.4.0 ,然后笔者改了一个bug提交则release-it把本号升级为1.41;然后笔者增加了一个新功能,release-it会将版本号升级为1.5.0。如下图所示:

如何规范微信小程序项目的提交信息和上传版本号?

关于release-it的使用介绍到这里,如果想了解其原理,则感兴趣的读者可以阅读笔者的文章:提效:使用release-it自动管理版本号和生成CHANGELOG。

2.使git-cz规范提交信息

2.1 git-cz简介

git-cz是一款git commit统一规范的工具,官方介绍其为语义化的git提交。每次提交的时候可以选择本次commit的类型使得commit的文本更加具有可读性。如果想了解更多关于commit规范,可以了解angular规范,想了解与git-cz类似工具的实现原理,可以阅读笔者的文章:commitizen规范提交message-从使用到源码分析。下面看一下如何在微信小程序项目中集成git-cz。

2.2 git-cz

执行 npm install git-cz -D

npm install git-cz -D

修改npm scripts 增加 "commit": "git-cz",如下图:

如何规范微信小程序项目的提交信息和上传版本号?

执行npm run commit ,如果工作区有修改没有存入暂存区则git-cz会提示错误信息并停止执行,如下图所示:

如何规范微信小程序项目的提交信息和上传版本号?

工作区变更提交至暂存区后再执行npm run commit ,则可以成功执行git-cz,如下图所示:

如何规范微信小程序项目的提交信息和上传版本号?

上图中git-cz会让我们选择何种类型的变更,比如test代表增加测试用例,feat代表新功能,fix代表bug修复等。如下图笔者选择的是feat:

如何规范微信小程序项目的提交信息和上传版本号?

这样经过git-cz规范提交信息,则在gitlab上进行整体预览的时候也非常清晰,如下图:

如何规范微信小程序项目的提交信息和上传版本号?

总结

针对笔者在开发微信小程序的时候发现开发者工具在上传代码和版本管理这两个功能(环节)中有一点小瑕疵,笔者采用release-it来规范代码上传到微信小程序开发者后台的版本号,使用git-cz规范代码的提交信息,并详细介绍了如何在微信小程序中集成这两个工具。在下一篇文章中笔者将介绍如何使用小程序的CI工具进行代码上传和获取小程序的预览二维码,下一篇文章见!

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中,您可以学习到最新的前端开发技术,了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例,让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件,帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化,可以帮助您节省时间和精力,提升开发效率。 除此之外,本网站还拥有一个活跃的社区,您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信,社区的力量可以帮助您更好地成长和进步。 在本网站中,您可以找到您需要的一切前端开发资源,让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭,一起探索前端开发的无限可能!