聊聊前端工程化

我对工程化的理解

随着互联网的发展，软件工程师出现了！他们不用一砖一瓦，也不用尺子电钻，计算机是他们的施工现场，代码是他们的工程部件，键盘之上的指尖跃动是他们的工程活动，在你看不见的地方运行着的一项项服务，操作系统上你看得见的app，网页等是他们的工程产出。

然而有行业的地方就有江湖，正如不是每一个会盖房子的都是建筑工程师，同样的也不是每一个会编程的都可以叫做软件工程师。那普通程序员和软件工程师的区别在哪里？首先我认为工程的本质是让工作内容机械化，只需要靠重复就可以完成工作。说起来可能会觉得比较枯燥，然而实际上正是这种枯燥保障了工作的效率和正确率。基于此软件工程师的主要服务对象其实是其他程序员，他们的职能本质是通过上层的规范和设计让工程降低对开发者水平的敏感度。

什么是"前端工程化"？

目前来说，web业务日益复杂化和多元化，前端开发从WebPage模式为主转变为WebApp模式为主了。前端的开发工作在一些场景下被认为只是日常的一项简单工作，或只是某个项目的"附属品"，并没有被当做一个"软件"而认真对待（无论是产品负责人还是开发者）。

在模式的转变下，前端都已经不是过去的拼几个页面和搞几个jq插件就能完成。当工程复杂就会产生许多问题，比如：

如何进行高效的多人协作？

如何保证项目的可维护性？

如何提高项目的开发质量？

如何降低项目生产的风险？

...

前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间，而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程。

"前端工程化"里面的工程指软件工程，和我们一般说的工程是两个完全不同的概念。

工程是个很泛泛的概念，甚至可以认为建了一个git仓库就相对于新建了一个工程；

软件工程的定义是: "应用计算机科学理论和技术以及工程管理原则和方法，按预算和进度，实现满足用户要求的软件产品的定义、开发、和维护的工程或进行研究的学科"（GB/T11457-2006《信息技术 软件工程术语》）。

如何做"前端工程化"？

前端工程化就是为了让前端开发能够“自成体系”，个人认为主要应该从模块化、组件化、规范化、自动化四个方面思考。

模块化

简单来说，模块化就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。

JS的模块化

在ES6之前，JavaScript一直没有模块系统，这对开发大型复杂的前端工程造成了巨大的障碍。对此社区制定了一些模块加载方案，如CommonJS、AMD和CMD等。

现在ES6已经在语言层面上规定了模块系统，完全可以取代现有的CommonJS和AMD规范，而且使用起来相当简洁，并且有静态加载的特性。

用++Webpack + Babel++将所有模块打包成一个文件同步加载，也可以搭乘多个chunk异步加载；

用++System+Babel++主要是分模块异步加载；

用浏览器的