前端工程化的理解

前端工程化是一个新兴的词语，改变了前端的开发模式，《前端工程化体系设计与实践》系统的阐述了前端工程化的方方面面。

一、前端工程简史

1. 前端工程师的技能栈

（1）硬技能：HTML、CSS、JavaScript，三者相互耦合，并非独立。

（2）软技能：用户体验，保证内容的快速呈现、减少等待时间等。快速展现、快速迭代。

（3）扩展技能：以Node.js为代表的Web服务器端知识。有助于编写更合理的客户端逻辑，以及对产品出现的问题及时定位。

2. 前后端分离的基本模式

（1）CSS以及相关的图片等媒体资源

（2）JavaScript逻辑

（3）HTML文档，HTML源文件、HTML模版等

后端工程师的唯一产出就是数据。

3. 前端工程化

最终目的之一便是实现更合理、更便利的前后端分离开发环境。两者相互依赖、紧密耦合在一起。

主要目标是解放生产力、提高生产效率。通过指定一系列的规范，借助工具和框架解决前端开发以及前后端协作开发过程中的痛点和难点问题。

具体衡量标准：快、准、稳。

4. 前端工程的3个阶段

（1）本地工具链，以工具为实现媒介，规范为蓝本。使用统一的工具链、遵循统一的规范进行业务代码的编写，利于多人协作与程序的维护。

（2）管理平台，进一步淡化差异、加深规范。

（3）持续集成，融入整体。与整体工作流结合，作为持续集成方案中的一环。

5. 设计原则

规范设计原则——用户至上。编码规范的设计原则着重于代码的可移植性，减少对代码的捆绑性。

架构设计原则——扩展至上。前端资源以及技术选型的多样性，令扩展性对于前端工程化方案来说尤为重要。应当秉持“内核轻量，扩展丰富”的原则。

二、脚手架、构建

1. 脚手架

脚手架作为一种创建项目初始文件的工具被广泛地应用于新项目或迭代初始阶段。避免人为失误引起的低级错误，同时结合整体前端工程化方案，快速生成功能模块配置、自动安装依赖，降低了时间成本。

脚手架的功能用一句话概括就是：创建项目初始文件。

一款优秀的脚手架必须兼具功能性、开放性以及动态性。

工具栈的集成统一降低了部署、学习和使用成本，并且加深了规范意识。

Yeoman是目前市场上最好的脚手架框架，功能丰富、便于扩展并且兼容不同的操作系统和执行环境。

2. 构建

构建或者叫做编译，承担着从源代码到可执行代码的转换者角色，其核心是资源的管理，产出资源包括JS、CSS、HTML等。

缓存的合理利用是衡量部署策略合理性的要素之一。

webpack功能丰富可以满足绝大多数的需求，但是配置非常复杂，需要一定地学习成本。

前端的工作产出均直接面向用户，前端工程师需要坚持如下两项原则。

（1）于产品而言，须保证性能和体验。

（2）于开发而言，须保证快速与严谨。