一、前端工程化背景
前后端架构分离以后，随着企业业务复杂度提升，要求产品迭代速度加快，前端开发团队规模的逐步扩大，前端的工作可能被繁琐的配置、工具、构建流程、协助部署、团队沟通等环节困扰，因此，前端工程化成为一种趋势。
前端工程化，是指使用软件工程的技术和方法，将前端的开发流程、技术、工具、经验等规范化和标准化。采用一系列系统化及规范化的方法、技术方案、工具，用工程化的方法构建和维护有效、实用和高质量的前端应用，以降低开发难度，提高开发效率，减少不必要的重复劳动，节约时间成本。
前端工程化具体包含：
标准化，定义编码、目录结构、接口以及源码管理等规范。
组件化，组件分为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、部署阶段
验收通过后，触发流水线作业自动化完成发布，实现持续部署过程。
