前端工程化,前端监控,工作流,部署,性能

开发规范

创建项目的时候,配置下 ESlintstylelint, prettier, commitlint 等;

ESLint

主要功能
ESLint 是一个静态代码检查工具,用于在 JavaScript 代码中识别和报告模式。它的目标是提供一个插件化的 JavaScript 代码质量工具。

应用场景
在前端开发过程中,ESLint 能够帮助开发者发现代码中的错误、不符合规范的地方,从而提高代码质量。

配置方法

  1. 全局安装 ESLint:在命令行中执行 npm install -g eslint
  2. 初始化 ESLint 配置:在项目根目录下执行 eslint --init,然后根据提示选择需要的配置。
  3. 配置文件:在项目的根目录下创建一个 .eslintrc 文件(可以是 JSON、YAML 或 JS 格式),并在其中指定规则、插件、解析器等。例如,指定使用 Babel 解析器:{ "parser": "babel-eslint" }

常见问题解决方法

  • 如果遇到 ESLint 报错,首先检查是否安装了正确的依赖,并查看报错信息以确定具体问题。
  • 可以根据报错信息修改代码或配置 ESLint 规则来解决问题。

Stylelint

主要功能
Stylelint 是一个强大的、现代化的 CSS/SCSS/Less 检查工具,可以帮助开发者遵循一致的代码风格和最佳实践。

应用场景
在前端开发过程中,Stylelint 能够确保 CSS 代码的风格一致性和可读性。

配置方法

  1. 安装 Stylelint:在项目中执行 npm install --save-dev stylelint
  2. 配置文件:在项目的根目录下创建一个 .stylelintrc 文件(可以是 JSON 或 YAML 格式),并在其中指定规则、插件等。例如,指定一个规则禁止在数字前加零:"number-leading-zero": "never"

常见问题解决方法

  • 如果遇到 Stylelint 报错,首先检查是否安装了正确的依赖,并查看报错信息以确定具体问题。
  • 可以根据报错信息修改 CSS 代码或配置 Stylelint 规则来解决问题。

Prettier

主要功能
Prettier 是一个代码格式化工具,支持多种语言,包括 JavaScript、CSS、HTML 等。它可以帮助开发者自动调整代码格式,使其符合一致的样式。

应用场景
在前端开发过程中,Prettier 可以自动格式化代码,节省开发者手动调整代码格式的时间。

配置方法

  1. 安装 Prettier:在项目中执行 npm install --save-dev --save-exact prettier
  2. 配置文件:在项目的根目录下创建一个 .prettierrc 文件(可以是 JSON、YAML 或 JS 格式),并在其中指定格式化规则。Prettier 的配置相对简单,主要指定一些基本的格式化选项,如缩进大小、换行符等。
  3. 集成到编辑器:将 Prettier 集成到编辑器中(如 VS Code),以便在保存文件时自动格式化代码。

常见问题解决方法

  • 如果 Prettier 没有按预期格式化代码,首先检查是否安装了正确的依赖,并查看 Prettier 的配置文件以确定配置是否正确。
  • 可以尝试在编辑器中手动触发格式化操作来查看效果。

Commitlint

主要功能
Commitlint 是一个帮助你编写更规范 git commit message 的工具。它基于一组可配置的规则来检查 commit message 的格式和内容。

应用场景
在团队协作中,Commitlint 可以确保每个开发者都遵循一致的 commit message 规范,从而提高代码的可读性和可维护性。

配置方法

  1. 安装 Commitlint:在项目中执行 npm install --save-dev @commitlint/{cli,config-conventional}
  2. 配置文件:在项目的根目录下创建一个 commitlint.config.js 文件,并在其中指定要使用的规则集。例如,使用常规提交规范:module.exports = { extends: ['@commitlint/config-conventional'] }
  3. 集成到 Git 钩子:将 Commitlint 集成到 Git 钩子中,以便在每次提交时自动检查 commit message。可以使用 Husky 等工具来实现这一功能。

常见问题解决方法

  • 如果 Commitlint 报错,首先检查是否安装了正确的依赖,并查看报错信息以确定具体问题。报错信息通常会指出 commit message 不符合哪个规则。
  • 可以根据报错信息修改 commit message 或配置 Commitlint 规则来解决问题。

前端监控

前端监控,简单来说就是我们在前端程序中记录一些信息并上报,一般是错误信息,来方便我们及时发现问题并解决问题。除此之外也会有性能监控用户行为的监控(埋点)等。

对于错误监控:  可以了解一下 Sentry,原理简单来说就是通过 window.onerrorwindow.addEventListener('unhandledrejection', ...) 去分别捕获同步和异步错误,然后通过错误信息和 sourceMap 来定位到源码。

对于性能监控:  可以通过 window.performancePerformanceObserver 等 API 收集页面性能相关的指标,除此之外,还需要关注接口的响应时间。

收集到信息之后,还要考虑数据上报的方案:  比如使用 navigator.sendBeacon 还是 Fetch、AJAX?是批量上报,实时上报,还是延迟上报?上报的数据格式等等。

CI/CD

一、定义

   持续集成(Continuous Integration, CI)和 持续部署(Continuous Deployment, CD),主要包括版本控制,代码合并,构建,单测,部署等一系列前端工作流。

  1. CI(Continuous Integration,持续集成):是一种软件开发实践,它要求开发人员频繁地将代码集成到共享的主干上。每次集成后,都会通过自动化的构建和测试来验证新代码的正确性。这有助于尽早发现错误,减少后期修复的成本。
  2. CD(Continuous Delivery/Continuous Deployment,持续交付/持续部署):是CI的后续步骤。持续交付指的是频繁地将软件的新版本交付给质量团队或用户以供评审,而持续部署则是指在评审通过后自动将代码部署到生产环境。

二、功能

  1. 提高开发效率:通过自动化的构建、测试和部署,CI/CD可以大大缩短开发周期,提高开发效率。
  2. 保证代码质量:每次代码集成后都会进行自动化测试,确保新代码的正确性,从而减少潜在的错误和缺陷。
  3. 快速响应市场变化:由于CI/CD可以加快软件的发布频率,因此可以更快地响应市场变化和用户需求。
  4. 降低风险:通过频繁的集成和测试,可以尽早发现问题并进行修复,从而降低单次发布的风险。

三、应用场景

  1. 大型企业:在大型企业中,由于团队规模较大,代码库复杂,因此需要使用CI/CD来确保代码的正确性和可维护性。
  2. 创业公司:对于创业公司来说,快速迭代和响应市场变化至关重要。CI/CD可以帮助他们加快开发速度,并确保软件质量。
  3. 跨团队协作:当多个团队共同参与一个项目时,CI/CD可以确保不同团队之间的代码能够顺利集成,并避免潜在的冲突和错误。

         场景的工作流有 Jenkins、 Gitlab CI 等。我们可以配置在合并代码时自动打包部署,在提交代码时自动构建并发布包等。 

        这里可以了解下,比如在 Gitlab CI 中, Pipeline 、 Stage 和 Job 分别是什么,怎么配置,如何在不同环境配置不同工作流等。

四、作用

  1. 实现快速反馈:CI/CD可以在代码提交后立即进行构建和测试,从而快速发现错误并提供反馈。
  2. 自动化流程:通过自动化构建、测试和部署流程,可以减少人工干预和手动操作,降低出错的可能性。
  3. 提高团队协作效率:CI/CD可以确保不同团队之间的代码能够顺利集成,从而提高团队协作效率。
  4. 快速响应市场变化:CI/CD可以加快软件的发布频率,使团队能够更快地响应市场变化和用户需求。

总之,前端CI/CD是一种重要的软件开发实践,它可以通过自动化的构建、测试和部署流程来提高开发效率、保证代码质量、快速响应市场变化和降低风险。在大型企业、创业公司和跨团队协作等场景中都有广泛的应用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/616175.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

最新巨量X-Bogus、_signature参数逆向分析与算法还原

文章目录 1. 写在前面2. 接口分析3. 断点分析4. 扣代码补环境5. 数据解密 【🏠作者主页】:吴秋霖 【💼作者介绍】:擅长爬虫与JS加密逆向分析!Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路…

机器学习(四) ----------逻辑回归

目录 1 概述 2 极大似然估计 3 逻辑回归核心思想 3.1 对数似然损失(Log-likelihood Loss) 4 分类问题的评估方法 4.1 混淆矩阵(Confusion Matrix): 4.2 准确率(Accuracy) 4.3 精确率&am…

Redis-配置文件详解

Redis配置文件详解 units单位 配置大小单位,开头定义基本度量单位,只支持bytes,大小写不敏感。 INCLUDES Redis只有一个配置文件,如果多个人进行开发维护,那么就需要多个这样的配置文件,这时候多个配置 文…

kali搭建Vulhub靶场

简单概述 Vulhub是一个面向大众的开源漏洞靶场,借助Docker简单执行两条命令即可编译、运行一个完整的漏洞靶场镜像。旨在让漏洞复现变得更加简单,让安全研究者更加专注于漏洞原理本身。 Docker是一个开源的容器引擎,它有助于更快地交付应用…

20.接口自动化-Git

1、Git和SVN–版本控制系统 远程服务出问题后,可以先提交commit到本地仓库,之后再提交push远程仓库 git有clone Git环境组成部分 常用Git代码仓库服务-远程仓库 GitHub-服务器在国外,慢 GitLab-开源,可以在自己服务器搭建&…

NASA数据集——2002-2011年全球18.7 至 89.0 千兆赫的亮度温度、海冰浓度和海冰积雪深度三级网格产品(AE_SI12)数据

AMSR-E/Aqua Daily L3 12.5 km Brightness Temperature, Sea Ice Concentration, & Snow Depth Polar Grids V003 三级网格产品(AE_SI12)包括 18.7 至 89.0 千兆赫的亮度温度、海冰浓度和海冰积雪深度。 简介 美国国家航空航天局地球观测系统 Aqu…

STM32睡眠模式

文章目录 前言PWR介绍电源框图上电复位和掉电复位可编程电压检测器低功耗模式模式选择电源控制寄存器 睡眠模式停止模式待机模式 前言 在单片机产品中,例如遥控这类产品,长时间处于待机状态下,所以对于这类产品在待机时就应该尽可能的减少不…

STM32入门_江协科技_5~6_OB记录的自学笔记_GPIO输出_LED流水灯_蜂鸣器

5. GPIO 输出 5.1. GPIO简介 GPIO(General Purpose Input Output)通用输入输出口可配置为8种输入输出模式引脚电平:0V~3.3V,部分引脚可容忍5V(端口输入5V的电压,之前引脚定义表格中带FT标识的&#xff09…

python视频转码脚本

今天有一个临时的需求,就是需要将一个wmv的初步转码成mp4的格式。找了一圈,免费的工具少,即使有免费的工具,在功能上也是有所限制,或者会给你塞广告或者附带安装其它流氓小游戏或者杀毒程序。 我并非不支持正版&#…

vue 点击平滑到指定位置并绑定页面滑动效果

1.html元素 写出对应的数据块&#xff08;注意添加ref) 用于获取元素位置 <template><div class"index-page" ><div class"top-head" ref"index"><img src"logo.png" style"height: 40px;margin-right: 2…

《解锁数字化劳动合同签约:构建高效的电子合同签约平台》

随着数字化转型的推进&#xff0c;传统的纸质劳动合同签约方式已经无法满足现代企业对于效率和便捷性的需求。电子劳动合同签约平台应运而生&#xff0c;为企业和员工提供了一种更加高效、便捷的合同签署方式。本文将介绍电子劳动合同签约平台的业务架构&#xff0c;探讨其如何…

地图涟漪效果

参考API echarts图表集 useEcharts.js import { onBeforeUnmount, onDeactivated } from "vue"; // import * as echarts from "echarts";/*** description 使用 Echarts (只是为了添加图表响应式)* param {Element} myChart Echarts实例 (必传)* param …

python代码学习案例-用turtle库绘制爱心图形效果

Python爱心代码&#xff0c;我们可以使用多种方法&#xff0c;包括使用turtle库来绘制图形&#xff0c;或者使用字符打印来在控制台中显示爱心。 首先&#xff0c;确保你已经安装了Python&#xff0c;并且你的环境支持turtle库&#xff08;它通常是Python标准库的一部分&#…

Coursera吴恩达深度学习专项课程01: Neural Networks and Deep Learning 学习笔记 Week 01

Week 01 of Neural Networks and Deep Learning Course Certificate 本文是学习 https://www.coursera.org/learn/neural-networks-deep-learning 这门课的笔记 Course Intro 文章目录 Week 01 of Neural Networks and Deep Learning[0] Welcome to the Deep Learning Spec…

Ansible常用变量【上】

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 在Ansible中会用到很多的变量&#xff0c;Ansible常用变量包括以下几种&#xff1a; 1. 自定义变量——在playbook中用户自定义…

基于遗传优化的双BP神经网络金融序列预测算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于遗传优化的双BP神经网络金融序列预测算法matlab仿真&#xff0c;采用的双BP神经网络结构如下&#xff1a; 2.测试软件版本以及运行结果展示 MATLAB2022A版本…

用户登录后端:登录密码解密后用PasswordEncoder验证密码是否正确

前置知识: 前端登录加密看用户登录 PasswordEncoder加密看PasswordEncoder详解 项目中因为要判断用户登录密码是否正确&#xff0c;通过输入错误次数锁住用户 1.后端配置rsa私钥 #密码加密传输&#xff0c;前端公钥加密&#xff0c;后端私钥解密 rsa:private_key: xxxx2. 读…

HCIP_BGP综合实验

一&#xff1a;实验拓扑&#xff1a; 二&#xff1a;实验要求&#xff1a; 1、AS1中存在两个环回&#xff0c;一个地址为192.168.1.0/24&#xff0c;该地址不能在任何协议中宣告; AS3中存在两个环回一个地址为192.168.2.0/24&#xff0c;该地址不能在任何协议中宣告&am…

JAVA课程设计

一&#xff1a;Java连接mysql数据库 1.1点击进入mysql jar包下载官网 MySQL :: MySQL Community Downloads 将下载好的压缩包进行解压 解压之后下图就是连接数据库所用到的jar包&#xff1a; 将jar包复制到IDEA所用的项目下&#xff0c;放置jar包的目录为lib&#xff0c;需要…

医院如何做好漏费管理?什么是控费系统?控费系统现在成熟吗?

在中国深厚的人情土壤之中&#xff0c;某些医院里的医技科室&#xff0c;宛如隐秘的灰色地带&#xff0c;悄然滋生着利用职务之便谋取私利的暗流。这些科室的医务人员&#xff0c;以低于医院明文规定的收费标准&#xff0c;私下里为熟识的患者提供检查服务&#xff0c;仿佛形成…