前端工程化的理解

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

1、前端工程简史

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. 设计原则

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

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

2、脚手架、构建

1. 脚手架

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

脚手架的功能用一句话归纳就是：建立项目初始文件。

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

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

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

2. 构建

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

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

webpack功能丰富能够知足绝大多数的需求，可是配置很是复杂，须要必定地学习成本。

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

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

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