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.mzph.cn/web/58603.shtml

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

相关文章

短期电力负荷

🏡作者主页:点击! 🤖编程探索专栏:点击! ⏰️创作时间:2024年11月8日9点40分 论文发表 来自《IEEE Transactions on Smart Grid》2022年7月的13卷第4期,《IEEE Transactions on …

linux tigerVNC使用

简介 TigerVNC是VNC的一种高性能、平台中立实现(虚拟网络计算),一种客户端/服务器应用程序,允许用户启动远程图形应用程序并与之交互机器。TigerVNC提供运行所需的性能级别3D和视频应用程序,并尝试保持普通外观并尽可…

基于redis实现API接口访问次数限制

一,概述 日常开发中会有一个常见的需求,需要限制接口在单位时间内的访问次数,比如说某个免费的接口限制单个IP一分钟内只能访问5次。该怎么实现呢,通常大家都会想到用redis,确实通过redis可以实现这个功能&#xff0c…

uni-app小程序开发(1)

下载软件就不多赘述了。 直接上代码,写过wep端的vue看这个小程序就简单很多,不需要搞那么多麻烦事情,直接编译器就创建好了基础模版。 1、项目结构 暂时知道这么多,后续再补充 2、页面创建、导航栏设置、基础属性设置 在pages中…

【C++】哈希表封装 unordered_map 和 unordered_set 的实现过程

C语法相关知识点可以通过点击以下链接进行学习一起加油!命名空间缺省参数与函数重载C相关特性类和对象-上篇类和对象-中篇类和对象-下篇日期类C/C内存管理模板初阶String使用String模拟实现Vector使用及其模拟实现List使用及其模拟实现容器适配器Stack与QueuePriori…

SQL,力扣题目1709,访问日期之间最大的空档期

一、力扣链接 LeetCode_1709 二、题目描述 表: UserVisits ------------------- | Column Name | Type | ------------------- | user_id | int | | visit_date | date | ------------------- 该表没有主键,它可能有重复的行 该表包含用户访问…

第七篇: BigQuery中的复杂SQL查询

BigQuery中的复杂SQL查询 背景与目标 在数据分析中,我们通常需要从多个数据源中获取信息,以便进行深入的分析。这时,BigQuery提供的JOIN、UNION和子查询等复杂SQL语句非常实用。本文将以Google BigQuery的公共数据集为例,介绍如何…

SPIRE: Semantic Prompt-Driven Image Restoration 论文阅读笔记

这是一篇港科大学生在google research 实习期间发在ECCV2024的语义引导生成式修复的文章,港科大陈启峰也挂了名字。从首页图看效果确实很惊艳,尤其是第三行能用文本调控修复结果牌上的字。不过看起来更倾向于生成,对原图内容并不是很复原&…

Dubbo负载均衡

负载均衡策略与配置细节 Dubbo 内置了 client-based 负载均衡机制,如下是当前支持的负载均衡算法,结合上文提到的自动服务发现机制,消费端会自动使用 Weighted Random LoadBalance 加权随机负载均衡策略 选址调用。 如果要调整负载均衡算法…

FFmpeg 4.3 音视频-多路H265监控录放C++开发十二:在屏幕上显示多路视频播放,可以有不同的分辨率,格式和帧率。

上图是在安防领域的要求,一般都是一个屏幕上有显示多个摄像头捕捉到的画面,这一节,我们是从文件中读取多个文件,显示在屏幕上。 一 改动UI文件 这里我们要添加两个label,为了区分我们设置一下背景色(这个是…

前言2、VS(Visual Studio)-2022使用

早前用VS-2010编译平台,进行C语言编程学习。 现如今,为了适应未来发展趋势以及日新月异的新功能,就此转到VS-2022编译平台; 由于都是VS编译平台,大多数基础功能都类似,关于一些基础操作可参考前言1&#…

深入了解逻辑回归:机器学习中的经典算法

✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…

[High Speed Serial ] Xilinx

Xilinx 高速串行数据接口 收发器产品涵盖了当今高速协议的方方面面。GTH 和 GTY 收发器提供要求苛刻的光互连所需的低抖动,并具有世界一流的自适应均衡功能,具有困难的背板操作所需的 PCS 功能。 Versal™ GTY (32.75Gb/s)&…

基于CNN-RNN的影像报告生成

项目源码获取方式见文章末尾! 600多个深度学习项目资料,快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【PaddleNLP的FAQ问答机器人】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【GAN模型实现二次元头像生成】 4.【CNN模型实现…

java list使用基本操作

import java.util.ArrayList; import java.util.Collection; import java.util.Iterator;public class Main {public static void main(String[] args) {ArrayList list new ArrayList();list.add("张三");list.add("李四");list.add("王五");l…

高级 <HarmonyOS主题课>借助AR引擎帮助应用实现虚拟与现实交互的能力的课后习题

持而盈之,不如其已; 揣而锐之,不可长保。 金玉满堂,莫之能守; 富贵而骄,自遗其咎。 功成身退,天之道也。 VR (Virtual Reality): 虚拟现实技术 AR (Augmented Reality): 增强现实) XR.(Extend…

高校实验室安全巡检系统设计与实现(源码+定制+开发)高校实验室巡检系统、实验室安全管理平台、实验室安全监控系统、智能实验室巡查系统、高校实验室风险管理

博主介绍: ✌我是阿龙,一名专注于Java技术领域的程序员,全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师,我在计算机毕业设计开发方面积累了丰富的经验。同时,我也是掘金、华为云、阿里云、InfoQ等平台…

102、Python并发编程:Queue与生产者消费者模型实现解耦、协作

引言 在实际业务场景中,很多时候在处理复杂任务的时候,会拆分上下游各个环节,形成一个类似于流水线的处理方式。上游类似于生产者,下游要依赖上游的输出进行工作,类似于消费者。但是,很多时候,…

【梯度提升专题】XGBoost、Adaboost、CatBoost预测合集:抗乳腺癌药物优化、信贷风控、比特币应用|附数据代码...

全文链接:https://tecdat.cn/?p38115 分析师:Yang Yang,Kechen Zhao 在当今科技日新月异的时代,数据的有效利用成为各领域突破发展的关键。于医疗领域,乳腺癌的高发性与严重性不容忽视,优化抗乳腺癌候选药物的筛选与特…

机器学习与AI|如何利用数据科学优化库存周转率?

对于所有零售商来说,良好的库存管理都是非常重要的。众所周知,商品如果不放在货架上就无法出售,而如果库存过多则意味着严重的财务负担。 但是做好库存管理绝非易事,它依赖于对未来需求的准确预测和确保始终有合适库存的敏捷供应链…