前端工程化
首先，前端工程化的目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间。 那通过哪些方面来提高开发的效率以及团队的配合能力呢？应该从规范、组件化和模块化以及构建和编译三个层次去实现。
1、规范
开发规范：开发规范的目的是统一团队成员的编码规范，便于团队协作和代码维护。每个人的代码习惯都不相同，但是团队协作中最好遵从同一套开发的规范，在以后的代码维护中或者接受他人的工作都可以迅速上手。比如在代码提交的过程中加入代码检查机制，如eslint，tslint等等。
质量规范：开发的组件功能是否方便可拓展，是否满足 RESTFul，是否安全性满足等等
2、组件化和模块化开发
组件化：一个可以独立部署的软件单元，面向的是runtime，侧重于产品的功能性。以react 为例，根据 reactjs.org 官网的说法，组件(Components) 让你可以将用户界面分成独立的，可复用的小部件，并可以对每个部件进行单独的设计。然后我们发现一些组件会使用部分 API ，而其他组件仅使用另一些 API 。这种情况可以将组件们划分为两类，称为 有状态(stateful) 组件 和 无状态(stateless) 组件 。有状态组件通常使用 有状态的(stateful) API：如render, state 和 lifecycle events，而无状态组件则使用 render, props 和 context。
常见的组件模式是：
- 容器(Container)组件 容器组件就是执行数据提取，然后渲染其子组件
- 展示(Presentational)组件 展示(Presentational)组件 使用 props(属性) , render 和 context (无状态(stateless) API)，并且可以是语法简单的函数式无状态组件
- 高阶组件(Higher order components , HOC ） 高阶组件是一个将组件作为参数并返回新组件的函数。
- 渲染回调(Render callback) 渲染回调或渲染 props 用于共享或重用组件逻辑
模块化：侧重的是对属性的封装，重心是在设计和开发阶段，不关注runtime的逻辑。实现特定的一个功能。有AMD与CMD区别。AMD和CMD最大的区别是对依赖模块的执行时机处理不同，注意不是加载的时机或者方式不同。AMD推崇依赖前置 在定义模块的时候就有声明其依赖的模块CMD推崇就近依赖 只有在用到某模块的时候再去require
3、构建和编译（build是建立在compile的基础上，对全部文件进行编译。两者的概念其实是不一样的）
我们在开发一个项目时首先要确定这个项目要使用什么样的技术来实现，然后开始规划我们的项目目录，接着就要往项目增加第三方库依赖，然后进行编码， 编码完成后进行语法检查，文件合并和压缩。在一系列的流程中都在重复无用繁琐的工具，于是一些自动化构建工具出现了，比如基于任务运行的工具：Grunt、Gulp。基于模块化打包的工具：Browserify、Webpack、rollup.js。整合型工具：Yeoman、FIS、jdf、Athena、cooking、weflow等等
那我们在选择构建工具的时候，要看是否符合团队的技术栈，是否符合项目需求，生态圈是否完善、社区是否活跃。Webpack 是目前最热门的前端资源模块化管理和打包工具，通过配置来实现管理，包含许多自动化的黑盒操作所以配置起来会简单很多。
以webpack为例：
特点：把一切都视为模块：不管是 CSS、JS、Image 还是 HTML 都可以互相引用，通过定义 entry.js，对所有依赖的文件进行跟踪，将各个模块通过 loader 和 plugins 处理，然后打包在一起。按需加载：打包过程中 Webpack 通过 Code Splitting 功能将文件分为多个 chunks，还可以将重复的部分单独提取出来作为 commonChunk，从而实现按需加载。
缺点：上手比较难：官方文档混乱、配置复杂、难以调试（Webpack3 已经好了很多）对于新手而言需要经历踩坑的过程；对于 Server 端渲染的多页应用有点力不从心；Webpack 的最初设计就是针对 SPA，所以在处理 Server 端渲染的多页应用时，不管你如何 chunk，总不能真正达到按需加载的地步，往往要去考虑如何提取公共文件才能达到最优状态
构建功能只是构建工具的基本功能。如果停留在这个阶段，那么也算是个及格的构建工具了，但也仅仅停留在工具层面。所以一个好的构建工具不仅仅要具备以上的编译功能，同时要提供一些机制以提高开发过程中的工作效率。
简单来说，前端越来越复杂，设计的问题和环节也越来越多，不采用工程化管理，就无法很好的实现团队协同和降低复杂性。所以在一个成熟的开发团队里面，前端工程化是非常必要且需要不断努力的持久化进程。
