前言
随着业务越来越重，越来越简单，双倍工作量，团队规模必定不会扩充双倍，蛮力曾经无奈继续高效的反对业务，如何就地取材地打造出适宜本人的前端工程化，成了每个到了肯定规模的前端团队都在思考和摸索的问题。但在没有钻研出适合的计划时，不能自觉地去谋求工程化，为了工程化而工程化，节约人力投入的同时，也会削减本人后退的能源。
会遇到什么问题
- 新旧我的项目交错，存在各种技术栈，同一 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. 可视化零碎
…
那么，什么是前端工程化
所有以晋升前端开发效率，升高前端开发老本，进步前端利用品质为指标的工作都是前端工程化。小到一个办法一个组件一个规范，大到一个工具一个框架一个平台，都是工程化之路，不要因为小而疏忽，也不要因为大而自觉谋求。工程化是和公司业务阶段相匹配的。不同的业务阶段，内容和广深度也会不同。公司可分为初创期、生存期、疾速发展期、成熟期、大成期。每个阶段须要适配不同的工程化水平。
结语
本次次要分享了整体的框架，每个环节都有很多须要深刻摸索的货色，下次有机会分享单个环节怎么去深挖细化，心愿大家能跳出舒服区，一起致力推动本人、团队、公司的提高。技术的价值，在于解决业务问题；人的身价，在于解决问题的能力。诸君共勉。同时，我司前端团队正在摸索和打造适宜本人的前端工程化，如果你想和咱们一起提高，欢送退出咱们。