Browserslist 配置

Browserslist 是一个工具和规范,用于定义和共享支持的浏览器列表,以便在前端开发中管理不同工具的兼容性。这些工具可以包括 Babel、Autoprefixer、ESLint 等,它们都可以使用 Browserslist 提供的配置来确定应支持哪些浏览器及其版本。

主要功能

  1. 兼容性管理: Browserslist 允许开发者指定要支持的浏览器及其版本,以确保生成的代码在目标浏览器上正常运行。

  2. 共享配置: 通过配置文件,开发团队可以确保所有开发者和工具使用相同的浏览器支持策略,从而减少因兼容性问题而导致的错误。

  3. 集成多种工具: Browserslist 被广泛集成在多个前端工具中,如 Babel、Autoprefixer、Stylelint 等,这些工具可以直接读取配置,以自动处理兼容性问题。

配置方式

Browserslist 的配置可以放在多个地方:

  1. package.json
{"browserslist": ["> 1%","last 2 versions","not dead"]
}
  1. 在单独的 .browserslistrc 文件中

你可以在项目根目录创建一个名为 .browserslistrc 的文件,内容如下:

> 1%
last 2 versions
not dead

常用查询语法

  • > 1%:支持使用市场份额大于 1% 的浏览器。
  • last 2 versions:支持每个浏览器的最新两个版本。
  • not dead:不支持已停止更新的浏览器。
  • Firefox ESR:支持 Firefox 的扩展支持版本。
  • iOS >= 12:支持所有版本号大于等于 12 的 iOS Safari。

示例

  1. 假设你希望支持市场份额大于 1% 的浏览器,最近两个版本的所有浏览器,并且不支持已停止维护的浏览器,你可以在 .browserslistrc 文件中写入:
> 1%
last 2 versions
not dead
  1. 假设你希望为不同环境(生产和开发)配置支持不同的浏览器列表 ,
    你可以在 package.json 文件中写入:

    "browserslist": {"production": [">0.2%","not dead","not op_mini all"],"development": ["last 1 chrome version","last 1 firefox version","last 1 safari version"]}
    

    或者在.browserslistrc 文件中写入:

    [production]
    >0.2%
    not dead
    not op_mini all[development]
    last 1 chrome version
    last 1 firefox version
    last 1 safari version
    

    生产环境的配置项解释:

    • >0.2%: 支持市场份额大于 0.2% 的浏览器。这意味着只要某个浏览器在市场上的使用率超过 0.2%,它就会被包括在支持列表中。

    • not dead: 排除那些已停止维护或不再更新的浏览器。这确保了只支持活跃的、仍然在接收更新的浏览器。

    • not op_mini all: 排除所有版本的 Opera Mini 浏览器。Opera Mini 采用不同的技术处理网页,可能不支持现代 CSS 和 JavaScript 特性,因此在生产环境中通常不需要支持它。

    测试环境的配置项解释:

    • last 1 chrome version: 只支持最新的 Chrome 浏览器版本。

    • last 1 firefox version: 只支持最新的 Firefox 浏览器版本。

    • last 1 safari version: 只支持最新的 Safari 浏览器版本。

    生产环境 (production): 配置目标是确保应用在大多数现代浏览器中正常运行,同时排除过时和特定的不必要的浏览器(如 Opera Mini),保证用户能够获得良好的体验。

    开发环境 (development): 配置目标是支持最新版本的主要浏览器,以便开发时能使用最新的功能和特性,同时避免对老版本的兼容性处理,从而提高开发效率。

    这种配置方式使得在不同的开发和生产阶段,能够根据实际需要调整支持的浏览器范围,从而达到更好的兼容性和用户体验。

关于配置项not op_mini all的额外说明

在 Browserslist 配置中,not op_mini all 的意思是排除所有版本的 Opera Mini 浏览器。

  • op_mini: 这是 Browserslist 中用于表示 Opera Mini 浏览器的标识符。
  • all: 这个关键词指的是所有版本的 Opera Mini。

因此,not op_mini all 的效果是告知工具(如 Babel、Autoprefixer 等)在生成兼容代码时,忽略对 Opera Mini 浏览器的支持。这通常是因为 Opera Mini 采用了与现代浏览器不同的处理方式,可能不支持某些 CSS 或 JavaScript 特性,或其用户体验与其他浏览器存在较大差异。

使用 not op_mini all 适合于那些希望在支持主流现代浏览器的同时,排除对 Opera Mini 的兼容性处理的场景。这在移动优先或注重现代浏览器特性的项目中非常常见。通过排除 Opera Mini,可以简化代码,避免为了支持该浏览器而做出的复杂调整。

使用场景

  1. CSS 自动添加前缀: 当使用 Autoprefixer 时,可以根据 Browserslist 的配置自动为 CSS 代码添加所需的浏览器前缀。

  2. JavaScript 转译: Babel 可以根据 Browserslist 的配置决定是否转译某些 ES6+ 特性,以便在目标浏览器中正常运行。

  3. 构建工具优化: 在使用 Webpack 或其他构建工具时,可以根据配置决定如何处理兼容性问题,从而提高构建效率。

总结

Browserslist 是一个用于管理和共享支持的浏览器列表的工具,它通过统一的配置方式,帮助开发者确保应用在不同浏览器中的兼容性。通过合理配置 Browserslist,开发团队可以减少因兼容性导致的问题,提高开发效率和代码质量。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python验证码滑块图像识别

文章目录 1、案例图片1、需求说明2、代码实现总结 1、案例图片 1、需求说明 python 3.10,写一个滑块验证码的自动化程序。需要一个opencv的函数,能准确的计算,在这同一张图片上,滑块形状和缺口形状的坐标位置及两个形状之间在X轴上的距离。请…

「Mac畅玩鸿蒙与硬件16」鸿蒙UI组件篇6 - List 和 Grid 组件展示数据列表

List 和 Grid 是鸿蒙开发中的核心组件,用于展示动态数据。List 适合展示垂直或水平排列的数据列表,而 Grid 则适用于展示商品或图片的网格布局。本篇将展示如何封装组件,并通过按钮实现布局切换,提升界面的灵活性和用户体验。 关键…

「Mac畅玩鸿蒙与硬件25」UI互动应用篇2 - 计时器应用实现

本篇将带领你实现一个实用的计时器应用,用户可以启动、暂停或重置计时器。该项目将涉及时间控制、状态管理以及按钮交互,是掌握鸿蒙应用开发的重要步骤。 关键词 UI互动应用时间控制状态管理用户交互 一、功能说明 在这个计时器应用中,用户…

群控系统服务端开发模式-应用开发-上传工厂开发

现在的文件、图片等上传基本都在使用oss存储。而现在常用的oss存储有阿里云、腾讯云、七牛云、华为云等,但是用的最多的还是前三种。而我主要封装的是本地存储、阿里云存储、腾讯云存储、七牛云存储。废话不多说,直接上传设计图及说明,就一目…

Hadoop生态圈框架部署(五)- Zookeeper完全分布式部署

文章目录 前言一、Zookeeper完全分布式部署(手动部署)1. 下载Zookeeper2. 上传安装包2. 解压zookeeper安装包3. 配置zookeeper配置文件3.1 创建 zoo.cfg 配置文件3.2 修改 zoo.cfg 配置文件3.3 创建数据持久化目录并创建myid文件 4. 虚拟机hadoop2安装并…

UI设计师们,AI留给你们的窗口期没多少了得亏生成的模型不能编辑

对于 UI 设计师们来说,AI 的发展确实带来了一定的挑战。 虽然目前生成的模型不能编辑,但谁也无法确定未来的发展走向。 然而,设计师们也不必过分担忧。人类的创造力、审美能力和对用户需求的深刻理解是无法被轻易取代的。 设计师可以利用这…

Gerrit 2.12.2 window版本部署

背景:原有gerritgit服务器一套(以下称老gerrit),现在需要在备份机器上面也搭建一套gerrit(以下称新gerrit)。 目前老gerrit服务器信息为:centos gerrit 2.12.2jdk1.8mysql5.1.73nginx 新gerrit服务器信息为&#xf…

一文搞懂Linux kernel编译步骤

一、前言 什么是Linux的内核编译呢?简单来说,Linux内核编译是一个将内核源代码转换成可在特定的硬件架构上运行的二进制文件的过程。通过编译内核,我们可以根据自己的需求和兴趣对内核进行定制和优化,以满足特定的应用场景。下文…

CST汽车天线仿真(双向混合求解)

CST从2018版本开始具有双向混合求解,到2019版已经通用微波工作室的各个求解器之间的双向混合。具体的混合对象如下图: 对天线的安装和耦合仿真,意味着对复杂结构(天线)和电大尺寸环境(安装平台,…

leetcode-5-最长回文子串

题解: 回文串:如果一个字符串正着读和反着读都是一样的那这个字符串就是回文串。 对于一个子串而言,如果它是回文串,并且长度大于 2,那么将它首尾的两个字母去除之后,它仍然是个回文串。 1、初始化字典d…

Python反射API:面向对象编程的“魔法镜”

在Python的世界里,面向对象编程(OOP)就像是一场盛大的化妆舞会,每个对象都穿着华丽的外衣,隐藏着自己的真实面目。而Python的反射API,就像是一面“魔法镜”,能够让我们窥探这些对象的真实身份和…

Python练习8

Python日常练习 题目: 编写函数,接收两个正整数作为参数,返回一个元组, 其中第一个元数为最大公约数,第二个元素为最小公倍数。 例如: 若输入12,8,则输出如下 【请输入一个…

推荐程序员好用的浏览器插件

推荐程序员好用的浏览器插件 1. 网页颜色控制:Dark Reader安装效果 2. 前端助手:FeHelper安装效果 3. markdown可视化:Markdown Reader安装效果 4. ES插件:Multi Elasticsearch Heads安装效果 1. 网页颜色控制:Dark Re…

希尔排序算法

1、基本思想 希尔排序也称缩小增量排序,是插入排序的一种更高效的改进版本。它的基本思想是先将待排序的数组元素按照一定的间隔(称为增量)分成若干个子序列,分别对这些子序列进行插入排序,随着迭代的进行,…

太速科技-634-基于3U PXIe的VU3P FMC+数据接口板

基于3U PXIe的VU3P FMC数据接口板 一、产品概述 板卡是一款基于 3U PXIE 总线架构的高性能数据预处理FMC 载板,具有 1 个 FMC(HPC)接口,1 个 X8 GTH 背板互联接口,可以实现 1 路 PCIe x8。板卡主控芯片采用Xilin…

OpenCV基本操作(python开发)——(8)实现芯片瑕疵检测

OpenCV基本操作(python开发)——(1) 读取图像、保存图像 OpenCV基本操作(python开发)——(2)图像色彩操作 OpenCV基本操作(python开发)——(3&…

MySQL数据库中的视图

视图 ​ 本篇将开始介绍有关数据库中视图的相关知识点,其中主要包含视图的基本使用,视图规则和限制。 ​ 视图是一个虚拟表,其内容由查询定义。同真实的表一样,视图包含一系列带有名称的列和行数据,视图的数据变化会…

Docker 镜像拉不动?自建 Docker Hub 加速站 解决镜像拉取失败

本文首发于只抄博客,欢迎点击原文链接了解更多内容。 前言 众所周知,6 月份的时候,Docker Hub 的镜像就已经无法正常拉取,那会随手用 Nginx 反代了一下 Docker Hub,建了个自用的镜像站,一直用到了 9 月份&…

应对传统能源企业管理人员青黄不接问题:搭建系统完善的招聘管理体系

应对传统能源企业管理人员青黄不接问题:搭建系统完善的招聘管理体系 对于很多传统能源企业由于成立时间久,发展到现在,往往都面临着一个共性问题,即未来三到五年,老员工退休后,新员工如何接续的问题。这个…

C++进阶-->红黑树的实现

1、红黑树的概念 红黑树是一棵二叉搜索树,他和前面AVL树不同的是红黑树不是通过平衡因子来保证树的平衡,而是在树结点的处加多了个记录颜色的变量,这个变量可以是红色或者黑色。通过对任何一条从根到叶子的路径上各个结点的颜色进行约束&…