1.4 前端工程化--阅读笔记

前端工程化

是最近几年才兴起的一个方向。之前前端的业务逻辑比较简单，前端资源作为web服务器的一种附带，没有必要搞专门的工程化。在其他开发领域早就高度工程化了，比如web服务器开发。

前端工程化的目的

提高效率，解放生产力。通过制定规范，借助工具和框架，解决一些痛点和难点和一些重复性劳动。

前端工程化的衡量标准：快，准，稳。

• 提高开发速度
• 尽量减少一些逻辑错误，减少测试时间
• 角色分工，准确定位bug责任人

前端工程化进化历程

混沌形态：

前端写demo后端套模版写逻辑。这时是串行合作的。前端的产出的除了css资源外，其他都要后端二次加工。这时其实是没有前端工程化的。

前后端分离形态：

• ajax改变了web交互模式，以前是要刷新整个网页的，后端发送一个新的html文件，这时可以实现异步请求数据，局部刷新。这时js，css，html全部交给了前端。这时前后端分离还是有很多其他问题：

	开发角度：
	1. es规范和浏览器兼容问题。
	2. css弱编程能力
	3. 资源定位，比如开发阶段图片资源在本地，上线后，手动改成真实的url
	4. 图片压缩
	5. 模块依赖，压缩打包
	
	协作角度：
	6. 数据接口
	
	部署角度：
	7. 前端的文件需要后端部署

• 构建：将所有工具的功能整合并统一为规范的工具栈，解决以上开发角度问题。比如使用babel，sass预编译，commonjs模块化，图片压缩。
• 本地开发服务器：不是一个工具，而是一个真正的服务器。最典型的应用是mock服务，实现前后端并行开发。有云mock的话，就不需要本地mock服务了。解决以上协作角度问题。能实现浏览器自动刷新功能。
• 动静态资源分离部署：解决以上部署角度问题。注意浏览器缓存策略

spa：将html渲染工作交给了前端

• 优点：

1. 前端掌控路由，比后端掌控路由用户体验更好
2. 可以移植，可以离线使用
3. 服务器端的数据接口，可以高度复用
4. html作为静态资源，容易部署
5. 前端和后端工程师，可以使用svn或者git维护各自的代码，无需耦合

• 缺点：

1. 不利于seo
2. 注意html文件的浏览器缓存策略

前端工程化的3个阶段

本地工具链

• 前端工程化的定义：一系列工具和规范的组合

规范包括：
- 项目文件的组织结构，
- 代码的开发范式，比如模块化方案
- 工具的使用规范，比如工程化自身的配置方案
- 各阶段环境的依赖，比如部署功能的实现需要目标服务器提供ssh权限

• 这时是初级阶段，整合工具，提供统一的规范的工具栈，均在本地环境下工作
• 解决了开发人员学习和使用工具的成本

管理平台

• 本地工具链受到环境差异的影响，比如操作系统，版本，内核。安全性问题，比如人人都能想生产环境部署文件。
• 管理平台的工程化，优点

- 淡化环境的差异性，保证构建产出的统一性
- 权限集中管理，提高安全性
- 项目版本集中管理，便于危机处理

• 管理平台将各个功能模块的执行环境集中化

持续集成

• 管理平台的前后端的工作流是分离的，但是前端毕竟是web的一个子集，最终会与整体工作流结合