极客星球 | 前端工程化之路的探索与实践

随着业务越来越重，越来越复杂，双倍工作量，团队规模肯定不会扩大双倍，蛮力已经无法持续高效的支持业务，如何因地制宜地打造出适合自己的前端工程化，成了每个到了一定规模的前端团队都在思考和探索的问题。但在没有研究出合适的方案时，不能盲目地去追求工程化，为了工程化而工程化，浪费人力投入的同时，也会削减自己前进的动力。

会遇到什么问题

• 新旧项目交织，存在各种技术栈，同一UI风格，基础组件没法复用，难以统一管理
• 成员间水平各异，编写代码的风格和使用的技术栈各不相同
• 不同项目Webpack配置差异过大，基础工具函数库和请求封装不一样
• 缺少代码注释、项目文档，commit信息格式不统一，新人接手困难，旧项目难以维护
• 解决方案缺乏沉淀，不同人遇到同一业务场景，需要重复采坑
• 一个人独立负责一个项目，一离职，交接成本会比较高

• UI缺少统一组件、接口格式不统一

  ......

需要先做什么

一、统一规范

统一的规范可以降低维护成本，助于团队协作，同时养成良好的代码规范，也有助于自身的成长。

1.代码规范-ESLint

• 常见的风格有airbnb、google、standard、prettier
• 根据文档配置出适合自己公司风格的

2.git 规范

• 分支管理规范
• commit 规范

3.项目文档规范

• 标准化Readme格式
• 写清楚项目说明、环境依赖、启动命令、部署方式、目录结构、技术栈、问题说明等

二、技术选型

前端一直都在讨(zheng)论的话题，三大框架vue、react、angular，如何选其一，中小团队，可以简单粗暴点根据以下特点来判断：

• 高效、成熟、生态丰富
• 当前团队人员最熟悉的
• 市场占有率高的

三、统一物料

1.脚手架

• 统一项目结构
• 集成基础框架、组件库、方法库、工具

2.公共组件

• 对可复用的功能、业务组件化
• 统一组件开发规范
• 组件库的管理

3.公共UI

• 和设计师沟通，制定统一的UI标准
• 使用统一的组件库

4.工具函数库

• 统一使用的工具库，如日期处理、加密、ajax请求、可视化等
• 轻量的自己写，较复杂的用开源或者根据团队精力去安排开发

5.CI/CD

• 自动化部署

四、统一协作工具

1.日常沟通（微信、钉钉等）

2.需求管理（Jira、禅道、teambition、TAPD等，或者在线Excel）

3.接口文档（RAP、eolinker、swagger、YAPI等）

1.单元测试

• 对一个函数、一个组件做测试
• TDD开发模式是否适用当前场景

2.埋点与分析

• 性能监控（白屏时间、页面加载耗时、DOM渲染耗时、资源加载耗时等）
• 错误监控（资源加载错误、js执行错误、promise错误）
• 信息收集（UV、PV、停留时间、操作记录等）

3.丰富规范

4.本地开发环境工程化

5.模块化业务

6.可视化系统

那么，什么是前端工程化

一切以提升前端开发效率，降低前端开发成本，提高前端应用质量为目标的工作都是前端工程化。小到一个方法一个组件一个标准，大到一个工具一个框架一个平台，都是工程化之路，不要因为小而忽略，也不要因为大而盲目追求。工程化是和公司业务阶段相匹配的。不同的业务阶段，内容和广深度也会不同。公司可分为初创期、生存期、快速发展期、成熟期、大成期。每个阶段需要适配不同的工程化程度。

本次主要分享了整体的框架，每个环节都有很多需要深入探索的东西，下次有机会分享单个环节怎么去深挖细化，希望大家能跳出舒适区，一起努力推动自己、团队、公司的进步。技术的价值，在于解决业务问题；人的身价，在于解决问题的能力。诸君共勉。同时，我司前端团队正在探索和打造适合自己的前端工程化，如果你想和我们一起进步，欢迎加入我们。