前端工程化

前端工程化

前端工程化指使用软件工程的技术与方法对前端开发的技术、工具、流程、经验、方案等指标标准化，
它具备模块化、组件化、规范化、自动化四大特性，
主要目的是降低成本与增加效率。

模块化

模块化是前端工程化的重中之重。它在前端工程化中具体表现为：在文件层面上对代码与资源实现拆分与组装，将一个大文件拆分为互相依赖的小文件，再统一拼装与加载。

组件化

组件化是前端工程化的重要基础。它实现了代码更高层次的复用性，提升开发效率。组件的封装也是对象的封装，同样要做到**高内聚低耦合
**，组件化的项目不仅利于单元测试的进行，同样也利于需求迭代的推进。

优秀的组件化遵循以下设计哲学。

• 将设计图划分为最小组件层级
• 使用预设规范创建组件静态版本
• 确定组件内部最小且完整的状态的表示方式
• 确定组件内部最小且完整的状态的存放方式
• 实现数据流的正向传递与反向传递

规范化

规范化指将一系列预设规范接入工程各个阶段，通过各项指标标准化开发者的工作流程，引导开发者在团队协作中往更好的方向发展。

规范化
是前端工程化的重要部分。它有效地将一盘松散的规范通过指定标准凝聚在一起，将所有工作流程标准化，协同所有开发者以标准化的方式定义工作流程，同时也影响着代码、文档和日志，甚至影响着每个开发者及其团队发展方向，因此每个成熟的前端团队都有一套身经百战的规范化方案。

规范化更多应用在团队协作中，为每个开发者指明一个方向，引领着成员往该方向走。若团队无规范化，每个开发者各做各的事情，在合并代码时肯定会发生争吵，甚至影响工作效率。

自动化

自动化指将一系列繁琐重复的工作流程交由程序根据预设脚本自动处理，整个工作流程无需人工参与，以解放开发者双手让其更专注业务需求的开发。

自动化
是前端工程化的智能部分。它既可解放双手又能节省大量时间做更多有意义的事情，常见自动化场景包括但不限于自动化构建、自动化测试、自动化打包、自动化发布
和自动化部署，更高级的自动化场景包括但不限于持续集成、持续交付和持续部署
。以自动化构建为例，又可将其划分为以下子任务，这些子任务分布在自动化构建不同阶段，在不同阶段的最佳时刻会调用相关工具处理相关流程。

任务	职责
Stylelint	校验样式代码
Eslint	校验脚本代码
Postcss	Postcss → CSS
Sass	SASS → CSS
Less	LESS → CSS
Babel	ES6 → ES5
TypeScript	TS → JS

---

工程化的表现

一切以提高效率、降低成本、质量保证为目的的手段都属于工程化