由于公司需求，需要移植前端项目至小程序，因此特意查询了资料，了解了一下当今前端的发展。发现前端的各个阶段照搬了后端的开发流程，比如npm就像后端的maven仓库，但是npm每次都要初始化一遍，不如maven好用，maven是共用仓库，而npm是每个项目独立仓库，导致每次新建一个项目都要花很多时间；再就是由于业务的发展，前端出现了一堆框架与解决方案，例如webpack，gulp，Mocha，amd，commonJs，require.js，nodeJs等等，在此对这些东西进行整理。
1.名词解析
1）CommonJS与NodeJs：CommonJS是一种规范，NodeJS是这种规范的实现，CommonJS可以理解为java中的jdk，这个规范中定义了许多API
2）AMD：CommonJS其中就有一个Modules规范，这个Modules规范设计之初是为了server端设计的，它是一个同步的模式，这种模式并不适合浏览器端，所以AMD规范诞生了，它最大的特点就是可以异步的方式加载模块。
3）RequrieJS：RequrieJS其实就是AMD现在用的最广泛，最流行的实现
4）AMD与CMD（JavaScript的包管理规范）
amd->require.js：需要的模块先加载
cmd-sea.js：需要的模块用到再加载
5）webpack：模块打包器，可以替代gulp的部分功能，但是不能完全取代
6）gulp：构建工具，合并、压缩、校验、加密
2.前端工程化的演变
1）第一阶段：库/框架选型
解决开发效率
jQuery
vue.js
Angular.js
Bootstarp
underscore.js JavaScript 工具库
Backbone.js 数据绑定框架
Animate.css CSS3动画库
normalize.css 它让不同的浏览器在渲染网页元素的时候形式更统一
compass compass是sass的一个库，关系相当于js中的jq
2）第二阶段：构建优化
解决重复构建问题
选择构建工具（webpack、gulp、Grunt），对代码进行合并，压缩，校验，加密之后再以页面为单位进行简单的资源合并。
3）第三阶段：JS/CSS模块化开发
解决维护效率
js的模块化方案 ：AMD/CMD/UMD/ES6 Module
css的模块化方案：less，sass。
4）第四阶段：前端工程化
前端库，框架解决了开发效率问题
代码合并，压缩，校验，加密等解决了构建打包问题
js与css模块化解决了维护问题
光有js与css模块化还不够，还需要UI组件化
那么新问题来了，这么多复杂的流程怎么统一管理，也就是前端工程化
于是我们将将软件工程的方法和原理运用在前端开发中, 目的是实现 高效开发，有效协同，质量可控。
前端工程化就是将开发阶段的代码转变成生产环境代码的一系列步骤。主要包括构建,分支管理,自动化测试,部署等。
3.前端工程化
1）为什么要工程化
1. 前端范畴不断扩大。
早期的前端只需要适配桌面浏览器，而现在的前端，需要适配不同类型和尺寸的设备，包括移动端网页，app应用等。
2. 前后端分离
早期的前端只是后端 MVC 框架的一层模块， 而现在的前端普遍是从后端接口获取数据，编写处理逻辑，各种前端mvc前端框架也层出不穷。
3. 模块化开发的出现
现在的前端开发不再是从零写起，重复造轮子，而是会引用大量内部和外部的组件和模块，这也导致前端必须进行模块管理。
4. 转码器的盛行
为了提高效率，前端工程往往不会直接写html,css,和js代码，而是改用其他格式书写，再用工具编译为目标格式。
比如用Jade 写HTML，用less／sass／stylus 编写CSS,用ES6/Typescript/.. 编写JavaScript.
5. 开发流程和团队
早期的前端团队往往只有几个人，而现在的前端团队可以扩展到几十人，甚至上百人。每个人只负责自己的一块内容。所以，如何协调多人多团队的工作，保证沟通顺畅，保证权限管理，越来越成为一大问题。
2）工程化的具体流程
1.代码规范: 保证团队所有成员以同样的规范开发代码。（amd，cmd）---java中的编码，文档等规范
2.分支管理: 不同的开发人员开发不同的功能或组件，按照统一的流程合并到主干。（git）
3.模块管理: 一方面，团队引用的模块应该是规范的;另一方面，必须保证这些模块可以正确的加入到最终编译好的包文件中。（npm）---java中的maven仓库、插件管理
4.自动化测试：为了保证和并进主干的代码达到质量标准，必须有测试，而且测试应该是自动化的，可以回归的。（Mocha、Jasmine）---java中的单元测试JUINT
5.构建：主干更新以后，自动将代码编译为最终的目标格式，并且准备好各种静态资源。（webpack、gulp、Grunt）---java中的maven编译
6.部署：将构建好的代码部署到生产环境。（shell脚本、jekins）
3）模块化与组件化的分别
模块应该主要是通用工具、api、类的封装，而组件更多的是业务功能、UI块的封装
4.参考文章
https://blog.csdn.net/qq_33150267/article/details/79213054
https://blog.csdn.net/hhx0626/article/details/78068694