前端工程化理解和规范

摘选链接：https://www.jianshu.com/p/88ed70476adb

什么是"前端工程化"？

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

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

• 如何进行高效的多人协作？
• 如何保证项目的可维护性？
• 如何提高项目的开发质量？
• 如何降低项目生产的风险？
• ...

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

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

• 工程是个很泛泛的概念，甚至可以认为建了一个git仓库就相对于新建了一个工程；
• 软件工程的定义是: "应用计算机科学理论和技术以及工程管理原则和方法，按预算和进度，实现满足用户要求的软件产品的定义、开发、和维护的工程或进行研究的学科"（GB/T11457-2006《信息技术 软件工程术语》）。

如何做"前端工程化"？

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

模块化

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

• JS的模块化

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

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

  1. 用++Webpack + Babel++将所有模块打包成一个文件同步加载，也可以搭乘多个chunk异步加载；
  2. 用++System+Babel++主要是分模块异步加载；
  3. 用浏览器的