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 …

十四:java web(6)-- Spring Spring MVC

目录 Spring MVC 1.1 Spring MVC 概述 1.1.1 什么是 MVC 模式 1.1.2 Spring MVC 工作原理 1.2 Spring MVC 核心组件 1.2.1 DispatcherServlet 1.2.2 控制器(Controller) 1.2.3 请求映射(RequestMapping) 1.2.4 视图解析器…

redis与本地缓存

本地缓存是将数据存储在应用程序所在的本地内存中的缓存方式。既然,已经有了 Redis 可以实现分布式缓存了,为什么还需要本地缓存呢?接下来,我们一起来看。 为什么需要本地缓存? 尽管已经有 Redis 缓存了,但…

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的公共数据集为例,介绍如何…

【C++】条件变量condition_variable

文章目录 1. 条件变量定义及特点2. 代码示例3. wait方法4. wait_for方法5. notify_all和notify_one6. 思考 1. 条件变量定义及特点 条件变量 用于在线程之间协调共享资源的访问。它允许一个线程等待特定条件的满足(如某个值的变化),而另一个线程在条件满足时通知(或…

C++ 线程初始化编译报错

这是一个很简单的开启一个线程, 用于演示一个线程和生命周期之间的错误,但是还没有把这个错误暴露出来, 就遇见了一个编译问题. 线程中执行指定逻辑的代码 线程的执行方法, 声明写在了ThreadRun.h 实现写在 ThreadRun.cpp中. class ThreadRun { public: void func(); };void T…

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

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

Backend - Python 爬取网页数据并保存在Excel文件中

目录 一、导入依赖 二、前端爬取页面数据 1. html 中 2. js 中 三、后端获取数据,并存储到 Excel 文件中 1. 后端接收数据 2. 后端存储数据 (1)系统代码固定存储位置 (2)用户可选择文件对话框的存储位置 一、…

Dubbo负载均衡

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

软件工程中的创建型设计模式:工厂方法模式与抽象工厂模式

目录 1. 工厂方法模式(Factory Method Pattern) 1.1 核心概念 1.2 应用场景 1.3 优点 2. 抽象工厂模式(Abstract Factory Pattern) 2.1 核心概念 2.2 应用场景 2.3 优点 3. 联系与区别 4. 拓展知识 5. 结语 在软件工程…

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

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

java中线程与集合的面试题

在 Java 面试中,线程和集合相关的知识是非常常见的考察点。以下是几个典型的问题及答案: 线程相关面试题 什么是线程? 线程是操作系统能够进行运算调度的最小单位。它被包含在进程之中,是进程中的实际运作单位。一个进程可以有多…

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

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

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

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