前端工程化

Posted 2022-03-24 gg-qq

一、定义

　　工程化即系统化、模块化、规范化的一个过程。 如果说计算机科学要解决的是系统的某个具体问题，或者更通俗点说是面向编码的，那么工程化要解决的是如何提高整个系统生产效率。

 二、为什么需要前端工程化

 　　前端越来越复杂，设计的问题和环节也越来越多，不采用工程化管理，就无法很好的实现团队协同和降低复杂性。 原因如下：

1.前端范畴不断扩大

　　早期的前端只需要适配桌面浏览器，而现在的前端，需要适配不同类型和尺寸的设备，包括移动端网页，app应用等。

2.前后端分离

　　早期的前端只是后端 MVC 框架的一层模块， 而现在的前端普遍是从后端接口获取数据，编写处理逻辑，各种前端mvc前端框架也层出不穷。

3.模块化开发的出现

　　现在的前端开发不再是从零写起，重复造轮子，而是会引用大量内部和外部的组件和模块，这也导致前端必须进行模块管理。

4.转码器的盛行

　　为了提高效率，前端工程往往不会直接写html,css,和js代码，而是改用其他格式书写，再用工具编译为目标格式。

　　比如用Jade 写HTML，用less、sass、stylus 编写CSS,用ES6、Typescript编写javascript。

5.开发流程和团队

　　早期的前端团队往往只有几个人，而现在的前端团队可以扩展到几十人，甚至上百人。每个人只负责自己的一块内容。所以，如何协调多人多团队的工作，保证沟通顺畅，保证权限管理，越来越成为一大问题。 

 三、前端工程化的具体内容

　　1.代码规范: 保证团队所有成员以同样的规范开发代码。
　　2.分支管理: 不同的开发人员开发不同的功能或组件，按照统一的流程合并到主干。
　　3.模块管理: 一方面，团队引用的模块应该是规范的;另一方面，必须保证这些模块可以正确的加入到最终编译好的包文件中。
　　4.自动化测试：为了保证和并进主干的代码达到质量标准，必须有测试，而且测试应该是自动化的，可以回归的。
　　5.构建：主干更新以后，自动将代码编译为最终的目标格式，并且准备好各种静态资源，
　　6.部署：将构建好的代码部署到生产环境。