概述
前端工程体系是一种服务，以项目迭代过程中的前端开发为主要服务对象，涉及开发、构建、部署等环节，不是一个框架或者工具，聚焦的不是某个垂直的研究领域或者特殊的业务类型，而是一种可演化、可扩展的服务，服务的目标是解决前端开发以及前后端协作开发过程中的难点和痛点。
构建系统从编程语言、优化和部署3个角度解决了前端开发语言内在的缺陷以及由宿主客户端特性引起的开发和生产环境之间的差异性；本地开发服务器提供了前后端并行开发的平台；部署功能权衡速度、协作和安全，把控着Web产品上线前的最后一道关卡。最后将这些功能模块合理地串联为完整的工作流，便是前端工程化的完整外在形态。
开发
将各类工具的功能进行整合为业务人员提供统一规范的工具栈是前端工程化的初级阶段:
- ES语法兼容转换
- CSS预处理
- 静态资源优化
- 模块化处理
- 本地服务mock
工程化
方案:
- 本地工具链
- 云管理平台
工具:
- 工作流管理工具(Grunt、Gulp)
- 构建工具(Webpack、Rollup)
- 整体解决方案(FIS3、WebFlow)
架构:
- 脚手架
- 本地服务器
- 构建
- 部署
设计原则:
- 规范设计原则(工程化方案自身的配置API规范和方案对代码编程范式的约束规范)
- 架构设计原则(能够解决现阶段的功能需求外对隐含需求的扩展支持)
脚手架
脚手架的功能是创建项目初始文件，本质是方案的封装。合理的方案应该是:
- 快速生成配置
- 降低框架学习成本
- 令业务开发人员关注业务逻辑本身
前端项目类型、资源的多样性以及个团队前端工程师定位不同，从而脚手架的实现模式更加多样性优秀的工具所要遵循的原则是一致的
从功能实现的角度考量，需要具备：
- 与构建、开发、部署等功能模块联动，在创建项目时生成对应配置项
- 自动安装依赖模块
从平台角度考量，需要具备：
- 动态可配置
- 底层高度可扩展
从易用性角度考量，需要具备：
- 丰富但不繁琐的配置项
- 支持多种运行环境，比如命令行和Nodejs API
构建
将源代码转化为宿主环境可执行的代码就是构建(编译)，其主要功能主要作用于3类(面向语言、面向优化、面向部署):
- 依赖打包
- 资源嵌入
- 文件压缩
- hash指纹
模块化与组件化
- 模块：侧重的是对属性的封装，中心在设计和开发阶段不关注运行时逻辑
- 组件：可以独立部署的软件单元，面向的是运行时侧重于产品的功能性
模块化开发的价值:
- 避免命名冲突
- 便于依赖管理
- 利于性能优化
- 提供可维护性
- 利于代码复用
使用缓存
- 强制缓存(max-age、Expires)
- 协商缓存(Cache-Control: no-cache > Etag)
增量更新
- hash
- chunkhash
- contenthash
资源定位
- cdn
- build inject
本地服务
- 动态构建
- HMR & live reload
- api mock & proxy
部署流程
部署工作必须综合考量协作、速度、安全等多方面因素形成一套完整的流程
- 可配置化
- 操作简化
- 代码审查及权限控制
- CI & CD