当前位置: 首页 > 后端技术 > Node.js

前端标准化工作流程

时间:2023-04-04 00:12:56 Node.js

代码规范验证、commit规范验证、CHANGELOG.md生成、版本升级、打标签、releaseemo。目前前端项目在pre-commit时通过使用lint-stage和eslint增加了代码格式校验,在代码层面做了一定的规范。为了进一步规范前端开发流程,方便协同工作,方便别人知道我们每个版本都做了什么,或者我们回顾自己做了什么的时候,更清晰易懂,而不必切到当时的分支查看代码。因此,我对代码校验后的流程做了如下标准化优化:对commit使用ConventionalCommits规范,在commit-msg阶段校验commit。项目和组件库都必须有自己的版本。一个版本必须采用semver规范,升级版本,并标记release,根据提交的commit信息生成CHANGELOG.mdreleaserelease,这里的release是指在github或者gitlab中的release,在开始之前介绍整个流程,看一下实现后的效果图:下面介绍一下整个流程优化使用的工具(一些常用的工具只做简单介绍):1.Husky拦截GitHooks,让你在Git生活中做一些事情循环。这里使用了huskyv4huksy来支持所有的GitHooks:verifythecommitmsgverifythecodeformatandrunthetest...2.lint-stage使用huksy拦截GitHooks,即使只改一个js文件也会导致,但是gitcommitlint-stage可以解决上面的问题,它只会验证你提交或者修改的部分内容3.eslint代码格式验证开始介绍如何拦截commit-msg,生成CHANGELOG.md,我们需要知道目前主流的commit-msg规范是什么?Conventional-commits是目前使用最广泛的一种写法,比较合理和系统,并且有配套的工具。对于每次提交,Commit消息包括三个部分:Header、Body和Footer。()://空行//空行

其中,Header是必须的,Body和Footer可以省略。HeaderHeader部分只有一行,包含三个字段:type(必填)、scope(可选)和subject(必填)(1)type用于描述commit的类别feat:newfunction(feature)fix:fixbugdocs:documentation(文档)style:format(不影响代码运行的变更)refactor:重构(即不是新特性或bug的代码变更)test:increasetestingchore:buildprocessorauxiliarytools...(2)Scope用于说明commit影响的范围,如数据层、控制层、视图层等,视项目而定。(3)subject是对commit目的的简单描述,不超过50个字符。BodyBody是对本次commit的详细描述,可以分为多行。Footer(1)Incompatiblechanges如果当前代码与之前的版本不兼容,则Footer部分以BREAKINGCHANGE开头,后面是对变化的描述,以及变化的原因和迁移方法(2)CloseIssue如果当前commit是针对一个issue,可以在Footer部分关闭这个issueCloses#123,#245,#9924.commitizencommit-msg的交互式提交这里只介绍本地使用的方式,方便协作工作,安装的版本相同#安装npminstall--save-devcommitizen#安装适配器使项目对commitizennpxcommitizeninitcz-conventional-changelog--save-dev--save-exact配置友好inpackage.json{"scripts":{"commit":"cz"}}//npmruncommit后,会弹出交互式命令行。如果你想强制使用这种交互方式,你可以拦截prepare-commit-msg,那么当gitcommit{"husky":{"hooks":{"prepare-commit-msg时也会弹出一个交互命令行":"execcommitlint.config.jscommitlint-config-conventional(基于Angular约定)支持以下类型:build:影响构建系统或外部依赖项更改(示例范围:gulp、broccoli、npm)ci:更改CI配置文件和脚本(示例范围:Travis、Circle、BrowserStack、SauceLabs)chore:不修改src或测试文件的其他更改,releasedocs:documentationChangefeat:新特性、功能修复:bug修复perf:性能优化refactor:重构revert:返回到之前的提交style:不影响代码含义的更改(空白、格式、缺少分号等)test:测试6.conventional-changelogcommit-msg的交互式提交和格式验证工具已经实现。接下来,我们需要根据我们约定的提交内容生成变更文档。CHANGELOG.mdconventional-changelog提取git日志历史信息,然后生成文件快速启动$npminstall-gconventional-changelog-cli$cdmy-project#在之前CHANGELOG.md的基础上叠加,更新commitmsg最新标签$conventional-changelog-pangular-iCHANGELOG.md-s#更新所有提交信息,覆盖CHANGELOG.mdconventional-changelog-paangular-iCHANGELOG.md-s-r0在package.json中配置{"scripts":{"changelog":"conventional-changelog-pangular-iCHANGELOG.md-s-r0"}}7.自动发布toolstandard-version语义版本控制版本格式:MAJOR.MINOR.PATCH,版本号递增规则如下:主版本号:当你做不兼容的API修改时,次版本号:当你做向下兼容新功能时,修订号:当你做一个向后兼容的问题修正时,standard-version是基于semver(SemanticVersioning)和ConventionalCommits来执行版本变更和生成changeLogutilitystandard-version做了以下事情:查看package.json中的版本升级版本号package.json和package-lock.json中的版本号根据conventional-changelog生成一个changelog创建一个新的commit(包括bumpFiles和更新的CHANGELOG)根据新版本创建一个标签快速启动安装依赖npminstall--save-devstandard-version添加脚本到package.json{"scripts":{"release":"standard-version"}}//npmrunrelease8.conventional-github-releaser发布到Github在使用release或者GitLabrelease之前,需要先设置环境变量CONVENTIONAL_GITHUB_RELEASER_TOKEN,从github获取Personalaccesstokens如果是私有仓库,选择scoperepo。如果是公共仓库,选择scopepublic_repo。不建议将Personalaccesstoken放在项目中本地使用,发布到github上识别后立即失效快速启动$npminstall-gconventional-github-releaser$cdmy-project$conventional-github-releaser-pangular//package.json{"scripts":{"release":"conventional-github-releaser-pangular-nchangelog-options.js-iCHANGELOG.md-s-r0-te3c6d36e80b8faba29f44e91c5778a8271e83291"}}9.脚本配置{"scripts":{"commit":"cz",//conventional-commitInteractivecommitcommit"changelog":"conventional-changelog-pangular-nchangelog-options.js-iCHANGELOG.md-s-r0",//生成CHANGELOG.md"github-releaser":"conventional-github-releaser-pangular-nchangelog-options.js-iCHANGELOG.md-s-r0-te3c6d36e80b8faba29f44e91c5778a8271e83291",//发布github或gitlabreleaser"update-project-version:project-minor":"nodescripts/release/version-updater.js-tproject-rminor",//更新项目的版本信息"update-项目版本:project-patch":"nodescripts/release/version-updater.js-tproject-rminor",//更新项目的版本信息"update-package-version:patch":"nodescripts/release/version-updater.js-rpatch",//更新组件库版本信息"update-package-version:minor":"nodescripts/release/version-updater.js-rminor",//更新组件库版本信息"tag":"nodescripts/release/tag.js",//tag"release":"npmruntag&&npmrungithub-releaser"}}10.推荐工作流包(组件库)需要开发提交commitbetareleaseupdate-package-version:patch更新组件库版本,然后打包publishreleaseupdate-package-version:minor更新组件库版本,然后打包publishrelease分支重新发布版本,update-package-version:patch更新组件库版本,然后打包publishmaster发布changelog->在CHANGELOG.md中添加迭代相关信息->commit->release迭代项目需求开发提交commitbetareleasebuildreleasereleaseupdate-project-version:project-minorversion,然后buildrelease分支重新发布,update-project-version:project-patch更新版本,然后打包buildmasterreleasechangelog->在CHANGELOG.md中添加迭代相关信息->commit->release