初探【前端工程化】

前言

前端工程化是踏入【高级FE】必备技能。一个优秀的工程化方案，可以帮大家解决很多【后顾之忧】，让我们更专注、高效的产出业务价值，实现个人价值。

下层基础，决定上层建筑。本文为抛砖引玉之作，会优先介绍一个优秀的前端工程化是怎样孕育而出的？【术业专攻】的文章会在后续更新...

技术选型

核心技术选型

主要是核心技术选型，枚举如下

• 前端运行时

  • Vue

  • React

  • Angular

  • ...

• Node运行时

  • Koa

  • Egg

  • Express

  • ...

• 构建

  • Webpack

  • Vite

  • ...

• 部署

  • Jekins

  • ...

选型原则

• 符合业务形态及后续发展的需要（技术是为了辅助业务发展的，不是用来试错或者跟风的）

• 易维护、易扩展、周边健全无短板、社区完善那就更好了

• 结合团队成员现状

规范

无规矩不成方圆。想象一下，一个单兵作战的团队和一个协同作战的团队，可能就只剩下被碾压了吧

代码质量规范

技术文档

• 需求开发前编写技术文档，提前梳理功能细节、实现思路、复用逻辑，必要的话也可以和mentor甚至组内进行评审【梳理流程，脑海会生成伪代码，帮我们初步把关代码质量】

代码提交前

• eslint + stylelint + husky + lint-staged 【工具保障代码质量】

CodeReview

• 合适的实机（建议不早于联调结束，不晚于上staging）提出PR，附带需求文档、技术文档抄送组内成员【人工保障代码质量】

其他

团队各异，但大多会根据业界和团队采坑记录梳理出【优秀代码】和【糟糕代码】集锦。

git规范

分支管理规范

统一即可，比如：

• master - 主分支

• feature - 新功能

• bugfix - bug修改

• framework - 技术需求

commit规范

良好的commit信息，在很多时候让我们更快更好的完成工作和交流。比如

• 【fix】修改logo 
• 【refactor】重构XXX代码
• 【feature】新增XXX功能

其他规范

团队各异，比如有些团队禁止使用rebase等等情况吧

工程结构组织规范

工程创建之后，结构规范基本上已经确定好，对于新增router、新增view等操作需要在哪里执行，优先按照【模式】执行以保持良好且统一的结构清晰度（当然这并不代表者原有结构是一成不变的）

根目录
|-bin
|-build
|-server
  |-context
  |-middleware
  |-controller
  |-router
  |-index.js
|-src
	|-view
	|-router
  |-index.js
|-config
|-README.md
...

需求迭代规范

1. 需求把关。评审前进行背景了解、周边功能等了解，梳理疑问点，以便于有针对性的评审

2. 积极参加需求评审、技术评审，提出个人见解，帮助做好需求

3. 开发前梳理前端技术文档，做好前期规划，必须要的情况可以内部评审

4. 认真对待测试用例、冒烟用例以及跟进测试和上线工作

5. 需求上线后，反思、归纳、总结 (不是所有需求都需要这一步)

6. 对自己负责的系统/模块，要有一定主R观念，逐步掌握对进度和风险以及资源的把控

7. 如果是技术需求，除上述外还需要对背景和收益做出相应梳理

上线规范

团队各异，举例

1. dev -> test -> staging -> production

2. PR -> CodeReview(Approved) -> Merge -> 构建 -> 灰度发布 -> 标记稳定包

监控和日志

主要包含监控和日志，上报过程不是本文重点，感兴趣的自行了解下。

异常监控

1. 前端

   1. js异常

      1. window.onerror捕捉js异常

      2. unhandledrejection捕获promise错误(取不到行列号，无法进行js反解操作)

   2. 静态资源异常

      1. 通过window.addEventListener('error', callback, true)捕获静态资源异常（本身是可以捕获js和静态资源异常，我们在callback函数里过滤js即可）

         function callback(e){
          let target = e.target || e.srcElement;
          if (target instanceof HTMLScriptElement || target instanceof HTMLLinkElement || target instanceof HTMLImageElement) {
            // 静态资源异常
          } else {
            // 其他静态资源异常或js异常
          }
         }

   3. 接口异常

      1. 重写XHR捕获接口异常

2. Node

   1. 框架捕获异常

      1. app.on('error', (err, ctx)=>{}) 【Koa举例】

   2. 捕获unhandledrejection

      1. process.on('unhandledRejection', (e) => {}

   3. 捕获冒泡到事件循环的异常 - uncaughtException

      1. process.on('uncaughtException', (e) => {}

性能监控

一般都是通过window.performance实现前端性能监控，详细的可参考下Performance - Web APIs | MDN

行为监控

• PV、UV

• 基础信息

  • 设备信息

  • 浏览器信息

  • ...

• 页面停留时长

日志

主要是Node日志，主要帮助回溯bug案发现场，帮助排查解决问题

• 接口调用

• 页面访问

• 工程异常

• 异常捕获日志

• 敏感日志

README

容易被忽视的一个环节...

一个优秀的README文件，可以帮助新人快速了解项目背景、熟悉架构、使用规范，是新人上手开发的敲门砖

QAQs

如有任何宝贵建议或意见，欢迎各位大佬评论！

或者点击这里提出Issue => GitHub - humorHan/advanced-blog: 前端进阶博客