工程化(产研流程规范)

本文介绍前端项目从开发到上线的完整流程,包括产品提需求、前后端评审、开发、部署、冒烟测试、提测、上线等环节。开发阶段分多种情况,涉及分支创建、代码合并等操作;部署需选对分支;上线前要合并代码、解决冲突,一般后端先上线,前端再上线。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

流程:产品提需求,前后端评审,开发,部署,过冒烟,提测,测试有问题继续改,改完push新代码,测试or开发部署,测试通过准备上线。
一劳永逸的操作:装nvm,一个java环境(brew install java)

开发阶段

case1:已上线的项目产品有了新的需求或项目迭代:
首先需要申请加入此项目开发组,获得权限。
线上项目地址克隆到本地并创建自己的开发分支:

从release分支拉代码
git clone release地址
cd 项目名
git branch //这个时候在master分支
git checkout release //切换到release分支上
git pull //拉取远程最新的代码
git checkout -b feat-button //新建一个自己的开发分支
git push //把自己的分支push到远程((git push --set-upstream origin feat-button))
//每拉一个新的项目,第一次把自己在本地的分支推到远程,都需要mentor把自己加个权限,加到这个项目里。

再从release分支上创建一个test-button分支:

首先把自己feat-button上的代码暂存并commit一下,
git checkout release // 切换到release分支
git checkout -b test-button //要从release切test-button分支,要保证和线上代码一样。
git push //把test分支push到远程

then npm i,(报错的话就按照提示用npm i – legacy) ,并使用正确的npm版本,就可以在feat- button分支上愉快的开发啦,并每天把feat-button分支提mr到test- button分支上。
merge request(mr):git merge 和git rebase都是在本地进行分支合并,merge request是在网页端进行分支合并,主要是可以艾特他人进行code review后再合并代码。
可能需要修改env.development文件下面的proxy-target。
case2:开发新的项目或系统重构:
从feat-v1拉一个自己的开发分支,提mr到feat-v1。
每天开发,远程代码有更新,需要拉一下远程最新的代码,可以用:

git checkout feat-v1
git pull
git checkout feat-avatarlist
git merge feat-v1(别忘了merge)

or

//站在自己的开发分支上:
git fetch origin feat-v1
git merge origin/feat-v1

如果删除了本地分支,想要同步远程最新的同样分支,也是

站在feat-period上:
git fetch origin feat-period
git merge origin/feat-period

case3:组件库设计走查问题/写单测:
从test分支拉代码,拉一个自己的开发分支,如feat-popupTest,写完git add. ,git commit -m,git push,提mr到test分支。
case4:本地仓库没了但是还好之前push到远程里了

git clone 某个分支的地址
cd 项目名
git checkout 某个开发分支

case5:同一个系统,有两个不同的需求,需要在本地建立两个不同的开发分支平行开发

一定注意需要先把feat-report提交一下/暂存一下,这样新的分支才不会带上之前开发分支上的修改。
再切到release,再git pull,再从release git checkout -b feat-message ,then git push

前后端联调
后端发来更新的接口or新增字段,npm run api,否则要把swagger和@src/services文件点击撤销更改。
联调流程:
在json2service文件里把后端发来的链接地址换一下,在env.development里面也要把proxy_target地址改为联调的环境地址。(一定要问一下后端部署到哪个环境了,让他发地址)。然后npm run api更新api,对自动弹出的文件选择全选,保存。
搜索后端发来的接口,path,在api/service里找到对应的接口函数。调用接口要保证path一致且去接口文档看对应的接口函数需要传入什么参数。也要注意后端返回的数据类型和内容
npm run api后如何找对应的fetch方法呢?后端发来的链接,点开,点击对应的controllerApi or baseApi or dictApi,在自动展开的那个里面有路径,把其复制并在编译器里搜索,找到对应这个path的方法名。
踩坑:npm run api以后如果有提示service里没有导出有一些变量或函数,可以去git检查一下更改。看看是不是有变量改名了。如果替换成新的变量名还是编译器提出没有这个变量导出,但是控制台不报错了,那可能是编译器没反应过来。
注意看控制台Networ,preview里面返回的数据;状态码及传的值及后端返回的数据。

部署阶段

完成了小需求,并git push到远程,mentor看了没问题,合并feat-button代码到test-button分支,就可以开始部署到测试环境了,部署完开始冒烟测试。
如何部署
点开test环境的流水线,点击快速构建,分支记得选合完的test-button而不是feat-button。

过冒烟测试

冒烟测试:点击开始测试,去文档打开部署完的测试环境的系统地址,按照操作步骤,去验证是否达到了预期结果。一条一条过。

提测阶段

冒烟测试通过后,进行提测:
提测之前需要先申请加入对应项目,让mentor或负责的测试通过。在EE-KRun里点击体测列表/新建提测单,按规定填写。

上线阶段

如何上线
测试那边全部测完且没有问题以后,就可以开始上线了。
在上线之前需要先把线上release分支代码和自己本地的开发分支代码合一下,因为有人可能也更新了release代码。(这样来保证自己本地的代码是最新的,合一下别人的更新。)
步骤:

git branch
git checkout release
git pull//git fetch比较好
git checkout feat-button
git merge release  此时若有冲突就解决冲突,若没有就下一步
//git add .
//git commit -m "feat: merge后提交"
git push

or
在本地合远程另一个分支:

git fetch origin 远程分支名
git merge origin/远程分支名

git合并分支出现“Please enter a commit message to explain why this merge is necessary“解决方案:
输入“:wq”,注意是英文输入状态下的冒号,然后按下“Enter”键即可。
“ :wq”是Linux操作系统命令: 表示强制性写入文件并退出。

解决冲突后,合过代码之后将feat-button分支push到远程库,之后mentor将其合到test-button分支,这样test-button分支上也是最新的代码。test-button分支提mr到release分支。(把自己的更新合到release上,保证远程的代码是最新的)
然后就可以点击流水线的快速构建来部署,这次是部署到prod生产环境,之后点击填写上线单,分支选择release分支。
上线顺序
一般是后端先上,之后前端上。因为后端更新了一些接口,如果后端还没上完,用户去点击页面对应的地方,接口掉不到,页面报404。
如果前端没有用到后端 只改了ui那就可以单独上线。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值