关于前端工程化,你了解多少()

【关于前端工程化,你了解多少()】炒沙作縻终不饱,缕冰文章费工巧。这篇文章主要讲述关于前端工程化,你了解多少?相关的知识,希望能为你提供帮助。
一、前端工程化背景前后端架构分离以后,随着企业业务复杂度提升,要求产品迭代速度加快,前端开发团队规模的逐步扩大,前端的工作可能被繁琐的配置、工具、构建流程、协助部署、团队沟通等环节困扰,因此,前端工程化成为一种趋势。
前端工程化,是指使用软件工程的技术和方法,将前端的开发流程、技术、工具、经验等规范化和标准化。采用一系列系统化及规范化的方法、技术方案、工具,用工程化的方法构建和维护有效、实用和高质量的前端应用,以降低开发难度,提高开发效率,减少不必要的重复劳动,节约时间成本。
前端工程化具体包含:
标准化,定义编码、目录结构、接口以及源码管理等规范。
组件化,组件分为html、JS和CSS。
模块化,功能封装。
自动化,持续集成和持续部署。
上述参考来源如下,如有侵权请联系删除:
https://www.zhihu.com/question/429174571/answer/1610009676
二、前端工程CI/CD方案项目从开发到部署上线,通常把过程分为编码、单元测试、构建、集成、交付、部署几个阶段。
不使用CI/CD方案,前端开发工程师将可能频繁进行以下操作:
在本地编码软件完成编码后,手动运行,根据报错提示修复代码缺陷
手动执行单元测试命令
代码完成合并后,手动拉取代码、构建项目
独立或协助运维将制品部署到相应环境
CI/CD的价值就体现在上述每个阶段中,减少重复性的人工操作,完全依赖自动化实现,更早更快地发现及修复问题,从而生产更高质量的产品。
1、编码阶段:代码分析自动化
可通过我们的CCheck平台使用代码静态分析工具,进行自动化分析源代码,包括编码规范检查、编码安全检测等,错误警告反馈相关人。

▲ CCheck是集成基于C/C++、java、C#、JS、python、php、Golang语言的多款开源或自研的代码检查工具
2、测试阶段:测试自动化
利用自动化测试工具,完成单元测试、集成测试、端对端测试等,如失败通知相关人员。
3、构建阶段:编译构建自动化
测试通过触发源码编译工具下拉代码进行编译打包,自动化构建镜像。
4、集成阶段
在持续集成过程中,前端开发人员需要频繁提交代码到主干,主干合并之前,都需要完成代码检查与自动化测试以保证代码质量。
利用我们的DevOps流水线工具,编排工作过程,通过webhook实现代码提交合并请求时触发流水线,自动完成代码检查与测试,实现持续集成过程。

DevOps的流水线,通过对静态代码检查结果的准入、准出控制,提高代码合规检查和构建效率
5、交付阶段
流水线作业触发通知,自动将新版本交付给质量团队或用户。
6、部署阶段
验收通过后,触发流水线作业自动化完成发布,实现持续部署过程。


    推荐阅读