Browserslist 配置

news/2024/11/7 18:50:34/

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.ppmy.cn/news/1545139.html

相关文章

【Springboot问题】创建springboot项目后没有Resources文件夹及application文件

问题描述: 在创建springboot项目之后,由于项目识别的问题,没有出现资源文件夹以及application文件。 解决方法: 但是此刻依旧没有application.yml文件,创建

服务器上删除超大文件夹的解决方案

1.示例主脚本 delete_all_folders.sh 它会遍历指定目录下的所有子目录&#xff0c;并调用 delete_files.sh 脚本删除每个子目录中的文件和空目录 #!/bin/bash# 检查是否指定了根目录路径 if [ -z "$1" ]; thenecho "Usage: $0 <root_directory>"ex…

(十四)JavaWeb后端开发——MyBatis

目录 1.MyBatis概述 2.MyBatis简单入门 3.JDBC&#xff08;了解即可&#xff09; 4.数据库连接池​ 5.lombok 6.MyBatis基本操作 7.XML映射文件 8.动态SQL 8.1 if标签 8.2 foreach标签 8.3 sql/include标签​ 1.MyBatis概述 MyBatis是一款优秀的持久层&#xff08…

大模型的常用指令格式 --> ShareGPT 和 Alpaca (以 llama-factory 里的设置为例)

ShareGPT 格式 提出背景&#xff1a;ShareGPT 格式起初来自于用户在社交平台上分享与聊天模型的对话记录&#xff0c;这些记录涵盖了丰富的多轮对话内容。研究者们意识到&#xff0c;这类真实的对话数据可以帮助模型更好地学习多轮对话的上下文保持、回应生成等能力。因此&…

有源电力滤波器为什么能用在对电能质量要求高的场所?

有源电力滤波器&#xff08;APF&#xff09;主要应用于对电能质量要求较高的场所&#xff0c;并且常与产生谐波和无功功率的设备一起配合使用。 一、有源电力滤波器应用场所&#xff1a; 1、工厂生产线&#xff1a;在自动化生产线中&#xff0c;有大量的变频器用于电机调速。…

Go语言面向对象编程

文章目录 Go语言面向对象 一、结构体定义结构体定义结构体语法格式 二、实例化结构体结构体的使用结构体实例化语法new关键字 三、初始化结构体变量结构体初始化顺序初始化指定初始化 四、匿名结构体匿名结构体定义匿名结构体语法格式 五、结构体内嵌结构体内嵌语法、特性键值对…

使用 std::queue 来管理消息队列的单例模式实现多线程消息通知

直接上代码&#xff1a; // MessageQueue.h #ifndef MESSAGEQUEUE_H #define MESSAGEQUEUE_H#include <string> #include <optional> #include <mutex> #include <queue> #include <condition_variable>class MessageQueue { public:// 禁止拷贝…

【Ai测评】GPT Search偷偷上线,向Google和微软发起挑战!

最近&#xff0c;OpenAI 又推出了一个令人兴奋的新功能——GPT Search&#xff0c;已经正式上线了&#xff01; 功能介绍 GPT Search&#xff1a;为你带来全新搜索体验 目前&#xff0c;桌面端和移动端应用程序已经全面上线&#xff0c;所有 GPT Plus 和 Team 用户都可以立即…