前端工程化发展历史

时间线

1. 1995年 Brendan Eich发明Javascript（标志前端开发的诞生）
2. 2005年 Ajax(Asynchronous Javascript And XML) 广泛应用
3. 2008年V8引擎发布(标志着JS能够脱离浏览器使用)
4. 2009年 Node.js发布(前端工程化进展有了飞跃)
5. 2010年Npm0.1版本发布（标志着前端工程化正式诞生）
6. 2013年 Webpack 1.0版本发布（标志着现在的开发模式开始形成）
7. 2013年 React 1.0版本发布（标志着前端进入MVVM开发模式）
8. 2014年 Vue 1.0版本发布（标志着前端进入MVVM开发模式）

进化过程

1. 前后端混合 (1995~2005) : 服务端渲染，javascript仅实现交互
2. 前后端分离 (2005~2013) 借助aiax实现前后端分离、SPA等新模式
3. 模块化开发 (2013~2014) npm管理模块、Webpack编译打包资源
4. 模块化+MVVM（2014~至今）基于React或Vue，开发html成为历史

开发模式变化图

第一个版本模型，主要依赖于Tomcat、Apache等服务器后端请求前端资源，前端资源无法访问后端资源。

第二个版本，有了Ajax技术，能够实现前后端分离了，前端能够访问后端API，浏览器直接请求前端资源即可。

第三个版本，在前后端分离的基础上，对前端进行了工程化改进，使用Webpack将前端所有的资源打包成bundle.js文件。

第四个版本，在工程化的基础上，引入了Vue等框架，不再需要直接编写原生html，而是转向了Vue等框架的组件开发。

前端研发图

前端工程化解决的问题

工程化核心目标：效率、规范、性能

前端工程化中的工具及作用

1. Babel将高版本ES6\7的JS代码降级为ES5，兼容各个浏览器（提升开发效率）
2. Eslint对代码进行规范检查（解决规范问题）

Webpack在前端工程化中的作用

​ 将JS代码模块化。第一，解决JS全局作用域冲突问题，防止自身JS代码、第三方JS代码之间变量的作用域冲突。（提升开发效率）第二，打包成了一个bundle.js文件对资源进行了合并和压缩，浏览器不再需要多次发送请求，只需一个请求即可。（解决性能问题）