浅谈前端工程化(FEE)

#前端工程化(Front-End Engineering)

#目的

• 提高开发质量：规范化前端的开发流程、技术框架、工具、代码规范等
• 提升团队的开发效率：依不同场景，减少技术选型、前后端联调带来的沟通成本

#工程化

#1️. 开发流程

• 需求评审
  • 重难点可提前做技术方案调研，提前消灭影响排期的不可控影响，确保交付节点顺利上线
• UI评审
  • 与设计师沟通具体细节
• 排期规划
  • 确认迭代提测、测试、上线等重要时间节点

#2. 技术选型

• 依不同项目背景选型，视新旧项目、人员等综合考虑
  • H5：Vue.js、Nuxt.js、React.js、Next.js
  • 小程序：原生、Taro、uni-app
  • APP：原生、Flutter
  • Node：Koa.js、Express.js、Egg.js
  • ...等等
• 各技术框架内有团队内定制的一套成熟方案（包括不限于：中间件、插件等）

#3. 统一规范

• Git Flow规范
  • 分支命名/管理：例如 main 主分支、main-fix 线上修复分支、dev 测试服分支
  • Commit Message格式：husky对暂存代码校验、使用commitizen、cz-customizable规范提交信息
• 代码风格
  • 如使用Eslint、Prettier统一规范代码编写格式
• 项目结构
  • 可按官方/脚手架等模版格式进行编排

#4. 监控套件

• 监控范围
  • 页面性能
  • 错误收集
  • 分析用户行为数据(以提供更好的服务)
• 监控平台（主要包括：数据采集与上报、数据整理和存储、数据展示）
  • 自建监控SDK
  • 成熟的方案，如 Sentry
  • 简单的方案，如 Google Tag Manager
  • ...等等

#5. CI/CD

• Github Actions
• Jenkins
• 运维 Bash 脚本