关于前端工程化，你了解多少？

Posted 2022-02-04 嘉为科技

一、前端工程化背景

前后端架构分离以后，随着企业业务复杂度提升，要求产品迭代速度加快，前端开发团队规模的逐步扩大，前端的工作可能被繁琐的配置、工具、构建流程、协助部署、团队沟通等环节困扰，因此，前端工程化成为一种趋势。

前端工程化，是指使用软件工程的技术和方法，将前端的开发流程、技术、工具、经验等规范化和标准化。采用一系列系统化及规范化的方法、技术方案、工具，用工程化的方法构建和维护有效、实用和高质量的前端应用，以降低开发难度，提高开发效率，减少不必要的重复劳动，节约时间成本。

前端工程化具体包含：

标准化，定义编码、目录结构、接口以及源码管理等规范。

组件化，组件分为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、部署阶段

验收通过后，触发流水线作业自动化完成发布，实现持续部署过程。