我眼里的前端工程化

若是你不了解一我的的过去，那你根本不会明白他／她为什么是如今的样子。因此，在开始聊前端工程化以前，让咱们先来回顾下前端的过去。前端的发展能够总结为三个阶段：

后端附属物

能够说浏览器的诞生孕育了前端，而前端诞生之初更多的是做为后端的附属物。在我刚接触前端时，我其实先学的php。那时候先后端是不分离的，前端用来写样式和模版yi以及js动效而后交由后端渲染及输出。因此整个过程是由后端主导的，前端还只是玩具。 那这时候会有工程化吗？答案是确定的，任何软件工程都须要工程化，只是前端还没有独立成一项工程，还谈不上工程化。然后端早就做为一项成熟的软件工程，有着各类工程化的实现。

先后端分离

随着ajax等技术以及nodejs语言的诞生，先后端开始出现分离，前端开始接手模版渲染的工做，然后端则更专一于接口等服务的提供。分离以后，前端获得了解放，众多出色的框架相继诞生，如backbone, angular, reactjs, vue等优秀框架。随着前端自主性加强，前端慢慢具有了做为独立一项软件工程的条件，工程化变成了必要。因而基于nodejs实现的开源工程化工具开始出现，如grunt, gulp, webpack等。固然像google，facebook等大公司早就有前端工程化方案，只是没有对外开源。

入侵全端

09年，天才的Ryan Dahl给前端界带来了nodejs，赋予了JS在后端运行的能力以及开发客户端的能力。而HybridApp，React Native等技术又让前端拥有开发移动APP的能

力。

至此，前端已经演进成一项成熟的软件工程，即所谓的前端工程化。

软件工程

前端发展成了一项软件工程，那什么是软件工程呢？咱们先来看下它的定义：

软件工程是一门研究用工程化方法构建和维护有效的、实用的和高质量的软件的学科。它涉及程序设计语言、数据库、软件开发工具、系统平台、标准、设计模式等方面。

因此，我认为前端工程化就是以工程化方法构建和维护有效、实用和高质量的前端应用。

流程

 上面说了一大堆理论，那么怎么实现工程化呢？相信不少人脑中会冒出grunt、gulp、webpack这些打包工具以及一堆脚手架。可是前端工程化毫不是等同于一堆脚手架工具，这些脚手架工具只是为了实现工程化，即构建和维护前端应用。软件交付通常流程以下：

 

每一个阶段都须要用工程化的方法去实现，这又涉及到前端开发所用到的技术。

前端技术

 

总结起来，前端归根到底也就是html、css、js这三项技术。但在前端的演进过程当中，发展出了这些基本技术的衍生品。如jsx是recatjs发明的对html语法的扩展；sass是对css语法的扩展；typescript是js语言的变种。这些衍生物最终仍是须要还原成最基本的html，css，js后前端应用才能运行起来。这些都须要一些工具来辅助处理，如bable，postcss等，这些工具是咱们构建前端应用必不可少的。而grunt、gulp、webpack则能够帮助咱们集成这些工具，方便前端开发调试，并构建出最终能够用于生产环境的高质量应用。固然构建只是工程化的一部分，软件交付后还须要持续维护。像日志上报、异常监控及恢复等都措施都要进一步跟进。

 

总结

我认为前端工程化就是用工程化方法构建和维护有效的、实用的和高质量的前端应用。