开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情
前端的发展历史及知识体系
想要全面的了解前端工程化知识，我们首先需要了解前端的发展历史及知识体系，才能更全面的认识前端工程化的发展历程和必要性，能更清晰的认识到前端工程化带来的优势。
一、前端的发展
在初期阶段，前端仅是纯静态页面，只是展示一些数据，少有或者几乎没有动态功能
动态网站技术阶段，前后端一体时代
代表性技术有JSP 、PHP、ASP、ASP.NET 等语言，这些都是运行在服务端的语言。那是还没有前后端分离的概念，前后端开发是一体的，前端代码是后端代码中的的一部分，前端写好静态模板，后端把数据套入模版中完成渲染后，通过http网络交互把渲染结果发送到浏览器，浏览器解析后渲染为前端页面。
彼时的网站开发，采用的是后端 MVC 模式。
Model（模型层）：提供/保存数据 Controller（控制层）：数据处理，实现业务逻辑 View（视图层）：展示数据，提供用户界面 前端只是后端 MVC 的 V，而且V还是在后端服务器进行渲染的。
转折点（AJAX出现）
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。^ [3]^ 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
这是百度百科对AJAX的定义，由此可以看出，AJAX是包括HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及XMLHttpRequest在内的当时的新技术的集合的统称，在AJAX出现之前，前后端交互方式仅有http，即一次请求下载整个页面，当发生交互时，需要重新下载整个页面，完全重载。也由此可以看出它最重要的作用就是网页应用能快速的增量更新，而不需要重载整个页面。
前后分离阶段
AJAX的出现带来了数据视图的初步分离，B/S架构d的兴起，使前后分离的概念愈加清晰，前端进入了SPA时代。
前后端的分离，使得前端后端工程师的分工明确：前端工程师负责UI的还原以及用户的交互，后端工程师负责数据的支持，而他们交互的节点在AJAX接口。这也使得网站开发中的很多逻辑转移到了前端，前端工程师兴起的时代到来。
随着前端技术的不断涌现，前端工程师能做的事情也越来越多，同时大型的前端应用也越来越复杂，前端的模块复用，实践规范，协作开发等越来越重要。
前端为主的MVC，MV*阶段
SPA应用大多数以功能交互型为主，复杂的逻辑层和view层的绑定，模块复用，接口约束，复杂度控制等，都是前端面临的问题
为了降低前端开发复杂度，Backbone、EmberJS、KnockoutJS、AngularJS、React、Vue等大量前端框架涌现
属于前端工程师的全栈时代
2009年，美国程序员 Ryan Dahl基于谷歌的V8创造了 Node.js，这是一个JavaScript的运行环境，可以使得JS跑在服务端。而 Node采用了 CommonJS模块化规范。随着Node.js的兴起，为前端开发带来一种新的开发模式。同时Node可以更加便捷的管理和简化前端开发过程，前端框架、自动化、构建系统应运而生并发展迅猛，Node 给前端带来的不光是一种更加便捷的开发模式，更是无限可能
node给前端带来了什么呢？
模块化
在node诞生之前，前端的模块化实现方案是，namespace，IIFE，闭包，script标签，文件分割，目录分割等，试想一下，在多人开发场景中，所以js文件共享一个全局状态是多么的痛苦。
node诞生之后，基于node的包管理工具gulp等，前端打包工具webpack等的出现使前端的 模块化 、 组件化 、 规范化 、自动化都可以借助它实现。
node带来的改变包括以下几点：
- 前后端职责更加清晰
- 业务开发的复杂度可控，通过合理的组件化、模块化、微前端化，让项目持续可维护
- 前端侧部署和服务端解耦，部署更加便捷快速
- 前端可能不再是单一终端开发，面向更广的终端及场景可应用
前端越来越重，复杂度越来越高，配套的前端工程体系也在不断发展和完善
前端工程化时代
什么是前端工程化？
前端工程体系是一种服务，以项目迭代过程中的前端开发为主要服务对象，涉及开发、构建、部署等环节。
前端工程化不是一个框架或者工具，聚焦的不是某个垂直的研究领域或者特殊的业务类型，而是一种可演化、可扩展的服务，服务的目标是解决前端开发以及前后端协作开发过程中的难点和痛点问题，涵盖项目的起始、开发、测试以及部署环节。工具是前端工程化的实现媒介，规范是工程化的指导方针，工作流程是工程化的外在表现形式以及约束规范的载体。
