我眼里的前端工程化

如果你不了解一个人的过去，那你根本不会明白他／她为何是现在的样子。所以，在开始聊前端工程化之前，让我们先来回顾下前端的过去。前端的发展可以总结为三个阶段：

前端发展的三个阶段

后端附属物

可以说浏览器的诞生孕育了前端，而前端诞生之初更多的是作为后端的附属物。在我刚接触前端时，我其实先学的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则可以帮助我们集成这些工具，方便前端开发调试，并构建出最终可以用于生产环境的高质量应用。当然构建只是工程化的一部分，软件交付后还需要持续维护。像日志上报、异常监控及恢复等都措施都要进一步跟进。

总结

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