这是我参与「第五届青训营 」伴学笔记创作活动的第 19 天
一、本堂课重点内容：
本堂课的知识要点有哪些？
- 引言
- 前端工程化
- 初始化项目
- 功能开发
- 集成&测试
- 上线发布
- 线上监控
- 小结
二、详细知识点介绍：
引言
当下开发流程框架不拘泥于固定的格式，而是取决于场景的适配而灵活调整：
- 需求复杂度
- 团队规模
- 基础设施建设
以能否提升交付效率以及质量为主要目标。
在团队协作的过程中，不断发现问题，纠正问题，迭代改善，优化流程是开发流程中的一部分。
整体上遵循：需求分析=>方案设计=>开发=>测试=>验收=>发布的基本流程
职能分工：
- 产品：做什么？怎么做？验收方案，验证有效性；
- 研发：开发，自测，承担部分运维等；
- 测试：质量检测。
风险管理：
- 需求变更
- 上下游依赖关系
- 各种不可抗力因素
- ...
前端工程化
前端的主要工作：
- 参与方案评审&讨论
- 初始化项目
- 功能开发
- 集成&测试
- 发布
- 线上监控
初始化项目
已有仓库的项目：
git clone / git rebase(or merge)
新项目：
- 代码组织：polyrepo vs monorepo
- 技术栈的选择：（React or Vue & Node or Java & AntD or ArcoDesign & CSR or SSR）
- 构建工程化环境：构建工具，Lint工作流（ESLint/StyleLint/Prettier/Lint-staged/husky）,UT工具，CI/CD等
- 资源部署：物理服务器，云服务器，faas,CDN(托管静态资源)等
为便于后续开发，将该部分逻辑沉淀为脚手架工具（vue-cli/CRA等）
功能开发
分支模型
- Feature Based Development
基于特征的开发工作流程 — 或GitFlow— 是软件工程的经典方法。开发单个功能是基于功能的工作流的主要重点。它与基于主干的工作流的主要区别之一是，它从不将代码更改推送到主分支。
- Trunk Based Development
Trunk based Development，又叫 主干开发 ，是一套代码分支管理策略，开发人员之间通过约定向被指定为 主干 的分支提交代码，以此抵抗因为长期存在的多分支导致的开发压力。此举可 避免分支合并的困扰，保证随时拥有可发布的版本 。
效率工具：
- IDE效率：恰当的配置&插件环境，提升团队协作效率
- 单测效率：按需单测、单测覆盖率
- 构建效率：按需构建、构建逻辑优化、构建缓存
避免出错：
- 接入Typescript、ESLint、StyleLint、Prettier、Lint-staged、commitLint等，解决代码风格，类型安全问题
- UT（jest/vitest等）保障代码运行效果
以上工具具备一定上手难度，甚至吹毛求疵，但是可以利于长期维护
安全保障：
- 如何避免混入有问题的npm模块？
- 如何确保产物不出现敏感信息（如GitHub token）？
集成&测试
Code Review
设置规则：经手主体？approve流程以及频次？merge方案？
CI: 配合Code Review，设置自动检测的准入条件
- 构建命令必须OK
- 单测必须OK；单测覆盖率不可降低，整体覆盖率大于阈值（or 增量代码的覆盖率大于阈值）
- E2E测试必须OK
- 性能diff检查
- 代码安全检查
上线发布
小流量部署：
设置独立的发布环境（集成联调环境），请求流量命中特定规则（如特定header），转发流量到该环境，用于开发预览、功能测试等
灰度部署：
设置独立的发布环境（集成联调环境），请求流量命中特定规则（如特定用户组、特定地理位置、特定机房），转发流量到该灰度环境，用于上线前的功能验证、开发实验等
秒级回滚
即便已经上线，也要提供一套稳定方案，可以秒级回滚到上一个版本
线上监控
监控目标：
- 性能
- 异常
- 业务指标
可参考： 学习前端监控 SDK 开发 | 青训营笔记 - 掘金
小结
前端工程化，是由团队技术栈、项目复杂度、开发流程等要素设计、构建而来，旨在提升团队协作开发效率。
重点涵盖：
- 需求的准入准出：定义做什么、工作目标；开发完成后的持续监测，结果导向，对结果负责。
- 从左到右的开发规范：项目开发过程中利用相应工具保障开发规范，保证对过程负责。
