前端工程化实践:从开发到构建测试部署——由此及彼

前端工程化实践

什么叫前端工程化

从实践方面来说

一般涵盖了从开发阶段到代码发布生产环境,包含了以下几个内容:

  • 开发:脚手架Vue/React
  • 构建:webpack、Rollup、Vite构建工具
  • 测试:单元测试、e2e测试、组件测试、黑盒测试
  • 部署:CI/CD 性能:性能优化
  • 规范:开发流程规范、编码规范、版本管理规范

从理论角度来讲

前端工程化又可以理解为一种通过规范化、模块化、自动化等手段,提高前端项目 在研发、运维阶段的效率、质量。

  • 规范化
    规范化过程:沉淀研发流程的各个环节标准规范,统一研发流程和规范,为模块和自动化提供可能性。

  • 模块化
    复用模块:将各项功能基于独立的模块去拆分开发,尽可能的做到模块级别的复用,从而大大提高整体效率和降低研发成本。

  • 自动化
    自动化处理:基于定义的研发流程,建立一套自动化流水线,当特定动作发生(定期触发、Git Push)时,自动触发流水线执行CI/CD任务。
    在这里插入图片描述

前端工程化的意义:

那做前端工程化的意义在哪里呢?

降本提效,保障质量

  1. 提高效率(通过模块/组件化复用各项能力,以及自动化工具提高效率)
  2. 保障质量(规范化避免犯错,通过引入准入检测、监控、自动化测试 等手段保障研发和运维期间的质量)
  3. 降低成本(提高质量、保障质量,以及自动化带来的开发难度的降低 变相的就降低的整个软件开发的成本)

下面分别从这三个方面规范化、模块化、自动化三个方面来进行分开介绍。

1.规范化(从源头处约束到优雅-聚沙成塔)

规范化从开发规范和版本规范两个方面来讲,那针对于开发规范来讲,要做什么呢?

1. 制定各项开发规范,让工作有章可循

 1)统一团队成员的编码规范,便于团队协作和代码维护
	 - 目录结构,文件命名规范 
	 - 编码规范:eslint, stylelint 
 2) 开发流程的规范
	 - 使用敏捷,增强开发进度管理和控制 应对各项风险,需求变更等 
	 - code review 机制 UAT 提升发布的需求的质量
 3)前后端接口规范,其他文档规范

2. 针对于版本规范来讲要做什么

	 - 使用版本控制工具,高效安全的管理源代码
	 - 使用 git 版本控制工具 Git分支管理 Commit描述规范,例如:task-number + task 描述 
	 - 创建 merge request,code review 完毕之后方可合并代码

2.模块化(从表达处处理井井有条——分而治之)

那我们做前端模块化的意义就在于要降低耦合,增强代码的可扩展性、可读性、维护性和测试性。

一般模块化处理包括四个方面:

1. 代码层面:采用模块化的方式组织代码

  • JS 模块化:AMD、CommonJS、UMD、ES6 Module

    • CommonJS:服务器端 javascript 模块化解决方案,适用于同步模块加载
    • AMD:浏览器端 javascript 模块化解决方案,适用于异步模块加载
    • UMD :允许在环境中同时使用 AMD 与 CommonJS 规范。
    • ES2015 Modules:使用import和export ,ES2015 Modules 作为 JavaScript 官方标准,日渐成为了开发者的主流选择。
      在这里插入图片描述
  • CSS 模块化:less、sass、stylus、postCSS、css module

2. 组件公共封装:采用组件化的编程思想,处理 UI 层

  • react、vue、angular

3. 数据层做状态管理:将数据层分离管理

  • redux、mbox

4. 类编程:使用面向对象或者函数编程的方式组织架构

3.自动化(通过使用各种自动化的工程工具,提升整个开发、部署效率)

自动化一般是基于定义的研发流程,建立一套自动化流水线,当特定动作发生(定期触发、Git Push)时,自动触发流水线执行CI/CD任务。比如下面的:

  1. 使用前端构建工具:gulp、grunt、Broccoli
  2. javascript 编译工具:Babel、Browserify、Webpack
  3. 开发辅助工具:数据 mock、livereload
  4. 使用CI集成工具:jenkins、Travis CI
  5. 使用脚手架工具:yeoman、create-app

介绍下CI/CD

CI/CD,Continuous Integration/Continuous Delivery(Deployment) 持续集成/持续交付/持续部署, 它是一种工程化方法论,即通过自动化的手段、实现能持续的对项目进行构建、交付、部署,从而达成高效率、高质量的交付目标。

image.png

1)持续集成

当有新的变更代码提交 (上传到代码仓库 git push)之后,通 过自动化的方式自动完成项目工程的构 建、集成、测试等工作,并生成最终的发布产物。

2)持续交付

能够将每次持续集成的构建记录、集成记录、测试记录、发布产物记录并保存下来,方便后续的追踪、 监控、部署。比如前端项目打包构建后会生成 zip 包,CI/CD 会保存每次构建的产物,遇到上线失败的情况,方便回滚到上个版本。

3)持续部署

将指定(某一个持续集成 的产物)的最终产物自动部署到生产环境中。

最后:实践验证真理

那如果你是前端开发工程师,该如何推动团队的前端工程化建设呢?

换句话说,作为开发者的我们,如何打造一个前端工程化方案,都需要做些什么?

大概分为三步:

  1. 规范化:需要定义研发流程和规范
  2. 模块化:打造打造工程脚手架
  3. 自动化:打造自动化CI/CD

image.png


版权声明:本文为qq_41968486原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。