自动化兼容性检查和解决方案:应用不会再白屏了(二)

简介: 自动化兼容性检查和解决方案:应用不会再白屏了

CICD校验


除了在git进行校验,我们也可以在cicd流程进行校验,一旦不通过,就不通过MR


{
  "scripts": {
    "lint": "eslint . --ext .js"
  }
}
stage('Linting') {
    steps {
        sh 'npm run lint'
    }
}


三、使用polyfill解决兼容性问题


在某些情况下,即使经过兼容性检查,仍然可能存在一些浏览器不支持的新特性。这时候,我们可以使用polyfill来为这些浏览器提供缺失的功能。


手动polyfill


安装第三方库:

在项目中安装需要的polyfill库,比如core-js或者polyfill.io。


npm install core-js --save


写兼容性代码:

在需要兼容性支持的地方,引入相应的polyfill库,并编写对应的代码。


// main.js
import 'core-js/features/promise';
const button = document.getElementById('my-button');
button.addEventListener('click', () => {
  // 使用新特性Promise
  new Promise((resolve) => {
    setTimeout(() => {
      resolve('Button clicked!');
    }, 1000);
  }).then((message) => {
    console.log(message);
  });
});


自动polyfill

使用Babel来自动根据目标浏览器版本转换代码,并使用babel-runtime来抽离公共模块。


安装相关库:

npm install @babel/preset-env @babel/plugin-transform-runtime --save-dev


配置Babel:

在项目的.babelrc文件中配置Babel:


{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}


按需引入polyfill:

根据实际使用的新特性,Babel会自动根据目标浏览器版本引入必要的polyfill。


// main.js
const button = document.getElementById('my-button');
button.addEventListener('click', () => {
  // 使用新特性Promise
  new Promise((resolve) => {
    setTimeout(() => {
      resolve('Button clicked!');
    }, 1000);
  }).then((message) => {
    console.log(message);
  });
});


动态polyfill服务:

可以使用polyfill.io等服务来动态为不支持的浏览器提供polyfill,以减少页面加载的数据量。


<!DOCTYPE html>
<html>
<head>
  <title>Polyfill Example</title>
</head>
<body>
  <button id="my-button">Click Me</button>
  <!-- 加载polyfill.io服务 -->
  <script src="https://polyfill.io/v3/polyfill.min.js"></script>
  <script src="main.js"></script>
</body>
</html>


再谈Babel


Babel 是一个 JavaScript 编译器,为什么这么说,因为babel不会处理Web API啊,我当时也认为babel自动帮我们做polyfill,结果忽略了Web API,babel只会处理ECMAScript标准中的特性

Babel 是一个工具链,主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。


  • 语法转换
  • 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过引入第三方 polyfill 模块,例如core-js)
  • 源码转换(codemods)


遇到的问题

在chrome61环境中报错ResizeObserver is not a function。

经确认ResizeObserver特性最低支持chrome64,于是将babel编译的目标版本设置为chrome 61,但改报错仍未解决,经过一番查找,原因如下:

Babel only polyfills ECMAScript features.

What is ECMAScript? It is the core of the JavaScript that you can use in the browser. Browsers implements ECMAScript, and on top of it there are lots of expansions (Dom objects, service workers, Ajax, ...). ResizeObserver is one of those expansions.

How can you know if a feature is part of ECMAScript or not?

I'd suggest searching for that function on MDN, and look at the Specifications section (ArrayBuffer example).

参考出处

于是手动引入resize-observer-pollyfill问题就解决了


目录
相关文章
|
1月前
|
Java 测试技术 数据安全/隐私保护
软件测试中的自动化策略与工具应用
在软件开发的快速迭代中,自动化测试以其高效、稳定的特点成为了质量保证的重要手段。本文将深入探讨自动化测试的核心概念、常见工具的应用,以及如何设计有效的自动化测试策略,旨在为读者提供一套完整的自动化测试解决方案,帮助团队提升测试效率和软件质量。
|
11天前
|
XML 人工智能 文字识别
Mobile-Agent:通过视觉感知实现自动化手机操作,支持多应用跨平台
Mobile-Agent 是一款基于多模态大语言模型的智能代理,能够通过视觉感知自主完成复杂的移动设备操作任务,支持跨应用操作和纯视觉解决方案。
88 10
Mobile-Agent:通过视觉感知实现自动化手机操作,支持多应用跨平台
|
20天前
|
机器学习/深度学习 人工智能 自然语言处理
CogAgent-9B:智谱 AI 开源 GLM-PC 的基座模型,专注于预测和执行 GUI 操作,可应用于自动化交互任务
CogAgent-9B 是智谱AI基于 GLM-4V-9B 训练的专用Agent任务模型,支持高分辨率图像处理和双语交互,能够预测并执行GUI操作,广泛应用于自动化任务。
84 12
CogAgent-9B:智谱 AI 开源 GLM-PC 的基座模型,专注于预测和执行 GUI 操作,可应用于自动化交互任务
|
25天前
|
存储 缓存 运维
阿里云先知安全沙龙(上海站)——后渗透阶段主机关键信息自动化狩猎的实现与应用
本文介绍了在后渗透测试中使用LSTAR工具和PowerShell脚本进行RDP状态查询、端口获取及凭据收集的过程,强调了高强度实战场景下的OPSEC需求。通过MITRE ATT&CK框架的应用,详细阐述了凭证访问、发现和收集等关键技术,确保攻击者能够隐蔽、持续且高效地渗透目标系统,最终获取核心数据或控制权。文中还展示了SharpHunter等工具的自动化实现,进一步提升了操作的安全性和效率。
|
1月前
|
Serverless 决策智能 UED
构建全天候自动化智能导购助手:从部署者的视角审视Multi-Agent架构解决方案
在构建基于多代理系统(Multi-Agent System, MAS)的智能导购助手过程中,作为部署者,我体验到了从初步接触到深入理解再到实际应用的一系列步骤。整个部署过程得到了充分的引导和支持,文档详尽全面,使得部署顺利完成,未遇到明显的报错或异常情况。尽管初次尝试时对某些复杂配置环节需反复确认,但整体流程顺畅。
|
1月前
|
运维 监控 持续交付
自动化运维在现代数据中心的应用与实践####
本文探讨了自动化运维技术在现代数据中心中的应用现状与实践案例,分析了其如何提升运维效率、降低成本并增强系统稳定性。通过具体实例,展示了自动化工具如Ansible、Puppet及Docker在环境配置、软件部署、故障恢复等方面的实际应用效果,为读者提供了一套可参考的实施框架。 ####
|
2月前
|
机器学习/深度学习 人工智能 测试技术
探索自动化测试框架在软件开发中的应用与挑战##
本文将深入探讨自动化测试框架在现代软件开发过程中的应用,分析其优势与面临的挑战。通过具体案例分析,揭示如何有效整合自动化测试以提升软件质量和开发效率。 ##
|
2月前
|
Java 测试技术 API
软件测试中的自动化测试框架选择与应用##
在快速迭代的软件开发周期中,选择合适的自动化测试框架对于提高软件质量和开发效率至关重要。本文探讨了当前流行的几种自动化测试框架的特点和适用场景,旨在为软件开发团队提供决策依据。 ##
|
2月前
|
机器学习/深度学习 人工智能 安全
探索AI在软件工程中的最新应用:自动化测试与代码审查
探索AI在软件工程中的最新应用:自动化测试与代码审查

热门文章

最新文章