当前位置：首页 > news >正文

Browserlist 使用指南：应对浏览器兼容性问题的解决方案

news 来源：原创 2025/7/26 12:09:31

前言

在前端开发中，我们经常需要处理各种不同的浏览器兼容性问题。每个浏览器的版本众多，处理这些问题可能会让人感到头疼。幸运的是，有一个名为 Browserlist 的工具可以大大简化这项工作。本文将介绍 Browserlist 的作用和使用方法，并通过简单的示例帮助你快速上手。

什么是 Browserlist？

Browserlist 是一个配置文件，用于定义项目需要支持的浏览器及其版本。它与众多的前端工具集成，例如 Autoprefixer、Babel 和 ESLint，使得这些工具能够根据你指定的浏览器列表自动调整其行为。

为什么需要 Browserlist？

减少代码体积：通过仅支持特定的浏览器版本，可以避免为不需要的浏览器增加额外的代码。
提高开发效率：开发人员可以更专注于功能实现，而不需要花费大量时间处理浏览器兼容性问题。
自动化工具集成：许多前端工具都可以根据 Browserlist 的配置自动调整输出，无需手动配置每一个工具。

如何使用 Browserlist？

安装

Browserlist 是一个 npm 包，可以通过以下命令来安装：

npm install browserlist --save-dev

配置

Browserlist 的配置可以放在多个地方，如 package.json 文件、.browserslistrc 配置文件或 browserslist 字段的环境变量中。这里我们以 package.json 为例：

{"browserslist": ["last 2 versions","> 1%","not dead"]
}

配置选项解析

last 2 versions：支持每个浏览器的最后两个版本。
> 1%：支持市场占有率大于 1% 的浏览器。
not dead：不支持已停止更新和维护的浏览器。

高级配置

Browserlist 还支持环境配置，可以为不同的环境指定不同的浏览器列表。例如：

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

在上述配置中，production 环境下会支持市场占有率大于 0.2% 的浏览器，而 development 环境下则只支持最新的 Chrome 和 Firefox 版本。

实例：与 Autoprefixer 集成

Autoprefixer 是一个常用的工具，用于自动添加 CSS 前缀。它可以与 Browserlist 无缝集成：

npm install autoprefixer postcss --save-dev

然后在 postcss.config.js 中引入 Autoprefixer 并使用 Browserlist 配置：

module.exports = {plugins: [require('autoprefixer')]
};

这样，Autoprefixer 会自动根据 Browserlist 配置为 CSS 添加相应的前缀。

Browserlist 配置规则详解

Browserlist 支持多种配置规则，可以灵活地根据项目需求选择合适的配置。下面将详细介绍其主要规则和用法。

基本规则

版本选择：
- last n versions：选择每个浏览器的最近 n 个版本。
- last n Chrome versions：选择 Chrome 的最近 n 个版本。
- last n Firefox versions：选择 Firefox 的最近 n 个版本。
- last n major versions：选择每个浏览器的最近 n 个主版本。
市场份额：
- > 5%：选择市场占有率大于 5% 的浏览器。
- > 1% in US：选择在美国市场占有率大于 1% 的浏览器。
- > 2.5% in my stats：选择在自定义统计数据中市场占有率大于 2.5% 的浏览器。
浏览器名称：
- Chrome >= 80：选择版本大于或等于 80 的 Chrome 浏览器。
- Firefox ESR：选择 Firefox 的长期支持版本。
- iOS 7：选择 iOS 7 的浏览器。
组合规则：
- last 2 versions and > 1%：选择最近两个版本并且市场占有率大于 1% 的浏览器。
- not IE 11：排除 IE 11 浏览器。
- last 2 versions or > 5%：选择最近两个版本或市场占有率大于 5% 的浏览器。

环境变量配置

在不同的环境下（如开发环境和生产环境），我们可能需要支持不同的浏览器列表。Browserlist 支持通过环境变量配置：

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

在使用时，可以通过设置 BROWSERSLIST_ENV 环境变量来指定使用的环境：

BROWSERSLIST_ENV=development npm run build

如果没有设置 BROWSERSLIST_ENV，Browserlist 会默认使用 production 环境。

Browserlist 与其他工具集成

与 Babel 集成

Babel 是一个广泛使用的 JavaScript 编译器，通过 Browserlist 可以更好地管理和优化 Babel 的编译目标。

首先，安装 Babel 和相关插件：

npm install @babel/core @babel/preset-env --save-dev

然后在 Babel 配置文件中使用 @babel/preset-env：

{"presets": [["@babel/preset-env",{"targets": "> 0.25%, not dead"}]]
}

Babel 会自动根据 Browserlist 配置，选择合适的编译目标。

与 ESLint 集成

ESLint 是一个流行的 JavaScript 代码质量工具，通过集成 Browserlist，可以更精确地配置代码检查规则。

首先，安装 ESLint 和相关插件：

npm install eslint eslint-plugin-compat --save-dev

然后在 ESLint 配置文件中添加 eslint-plugin-compat 插件：

{"plugins": ["compat"],"rules": {"compat/compat": "error"}
}

ESLint 会根据 Browserlist 配置，检查代码中不兼容的 API 使用。

使用统计数据

除了官方提供的浏览器市场占有率数据，Browserlist 还支持自定义统计数据。比如，你可以使用 Google Analytics 的数据来生成自定义的浏览器使用统计，并基于这些数据配置 Browserlist。

创建自定义统计数据

假设你已经从 Google Analytics 导出了浏览器使用统计数据，可以将其保存为 browserslist-stats.json 文件。然后在 package.json 中引用该文件：

{"browserslist": ["defaults","not ie <= 8","not op_mini all"],"browserslist-stats.json": {"my custom stats": ["> 0.2% in my stats"]}
}

你可以使用 npx browserslist --stats 命令查看当前配置支持的浏览器列表及自定义统计数据的应用情况。

总结

Browserlist 是一个强大的工具，它帮助前端开发人员简化了处理浏览器兼容性问题的工作。通过简单的配置，我们可以快速定义项目需要支持的浏览器列表，并与众多前端工具集成，从而提高开发效率和代码质量。如果你还没有使用过 Browserlist，不妨试试看，相信它会成为你项目中不可或缺的一部分。

Browserlist 使用指南：应对浏览器兼容性问题的解决方案

前言在前端开发中，我们经常需要处理各种不同的浏览器兼容性问题。每个浏览器的版本众多，处理这些问题可能会让人感到头疼。幸运的是，有一个名为 Browserlist 的工具可以大大简化这项工作。本文将介绍 Browserlist 的作用和使用方法&#xf…...

编程日记 2025/7/26 12:09:31

[蓝桥杯 2023 省 A] 异或和之和

题目来自洛谷网站： 暴力思路： 先进性预处理，找到每个点位置的前缀异或和，在枚举区间。暴力代码： #include<bits/stdc.h> #define int long long using namespace std; const int N 1e520;int n; int arr[N…...

编程日记 2025/7/21 16:33:26

A 算法标签: 模拟 #include <iostream> #include <algorithm> #include <cstring> #include <map>using namespace std;const int N 8; map<string, string> mp;int main() {ios::sync_with_stdio(false);cin.tie(0), cout.tie(0);mp.insert({…...

编程日记 2025/7/24 9:35:10

React - LineChart组件编写（用于查看每日流水图表）

一、简单版本 LineChart.tsx // src/component/LineChart/LineChart.tsx import React, {useEffect,useRef,useImperativeHandle,forwardRef,useMemo,useCallback, } from react; import * as echarts from echarts/core; import type { ComposeOption } from echarts/core; …...

编程日记 2025/7/25 11:36:53

什么情况下需要使用二级指针

当你需要一个函数修改另一个函数中的指针变量时（改变指针变量的指向），你必须传递该指针的地址，也就是"指向指针的指针"。这是C语言中实现"引用传递"效果的标准方式。函数A中声明了一个结构体指针变量mys&am…...

编程日记 2025/7/22 6:09:35

动态规划（8.下降路径最小和（medium））

题目链接：931. 下降路径最小和 - 力扣（LeetCode） 解法： 关于这⼀类题，由于我们做过类似的，因此「状态表示」以及「状态转移」是比较容易分析出来的。比较难的地方可能就是对于「边界条件」的处理。 1. 状…...

编程日记 2025/7/17 18:53:12

自动插入分号机制

📜 JS 自动分号插入(ASI)机制详解自动分号插入(Automatic Semicolon Insertion)是 JavaScript 中一个独特而重要的特性，它影响着代码的解析和执行方式。 🌟 核心概念速览 ASI 引擎自动补充分号当 JavaScript 解析器遇到特定语法情况时&a…...

编程日记 2025/7/21 16:33:51

C语言贪吃蛇实现

When the night gets dark,remember that the Sun is also a star. 当夜幕降临时，请记住太阳也是一颗星星。 ————《去月球海滩篇》目录文章目录一、《贪吃蛇》游戏介绍二、WIN32部分接口简单介绍 2.1 控制台窗口大小设置 2.2 命令行窗口的名称的变更 2…...

编程日记 2025/7/22 23:41:11

基于数据挖掘的网络入侵检测关键技术研究

标题:基于数据挖掘的网络入侵检测关键技术研究内容:1.摘要随着互联网的迅速发展，网络安全问题日益严峻，网络入侵行为对个人、企业和国家的信息安全构成了巨大威胁。本文的目的是研究基于数据挖掘的网络入侵检测关键技术，以提高网络入侵检测…...

编程日记 2025/7/24 21:02:26

git上传大文件到远程仓库中

git 上传大文件报错上传大文件文件到远程仓库上面，出现错误（gitee-100M,github-50M） remote: error: File: f422c55c723a183a1944cbec840c0171042c8251 135 MB, exceeds 100.00 MB. 意思是单个文件超过100M导致上传失败。安装LFS curl…...

编程日记 2025/7/18 4:46:58

计算机网络基础之三种交换技术及其性能分析

一. 交换技术基础 1. 三种交换技术电路交换：用于电话网络报文交换：用于电报网络分组交换：用于现代计算机网络 2. 人类历史上的通信网络 #mermaid-svg-AeGvrkUbCkicFOIo {font-family:"trebuchet ms",verdana,arial,sans-serif;…...

编程日记 2025/7/26 16:05:35

ANYmal Parkour: Learning Agile Navigation for Quadrupedal Robots

ANYmal Parkour: Learning Agile Navigation for Quadrupedal Robots 研究动机解决方案技术路线感知模块运动模块导航模块补充实验结果 ANYmal Parkour: Learning Agile Navigation for Quadrupedal Robots 研究动机行走控制器不能依赖于稳定和周期性的步态，而必…...

编程日记 2025/7/27 4:16:35

【AI学习笔记】AI造神时代的潘式理论与智能进化

背景前摇： 周会分享选题，决定选择这篇华为蓝军部长潘少钦先生所著的文章，原题目为《AI如此强大，我是否要改行？》。选择这篇文章的理由是，其不仅有充实扎实的AI基础知识作为铺垫，更具有独特鲜明…...

编程日记 2025/7/26 9:38:26

CVE-2021-45232未授权接口练习笔记

CVE-2021-45232 是 Apache APISIX Dashboard 中的一个严重权限漏洞，类似于攻击者无需密码即可拿到整个网关系统的“万能钥匙”。攻击者利用此漏洞，可直接操控网关流量转发规则，甚至远程执行代码，引发服务器沦陷。默认账户密码导致…...

编程日记 2025/7/25 17:50:15

远场分量（平面波角谱）与倏逝波

远场分量（平面波角谱）与倏逝波的详细解释在光学和电磁学中，远场分量（平面波角谱）和倏逝波是描述光场传播特性的两个核心概念，尤其在衍射理论、近场光学和超分辨成像中至关重要。以下是它们的物理意义、数…...

编程日记 2025/7/16 14:42:27

修改Flutter工程中Android项目minSdkVersion配置

Flutter项目开发过程中，根据模板自动生成.android项目，其中app>build.gradle中minSdkVersion的值是19，但是依赖了一个三方库，它的Android sdk 最小版本只支持到21，运行报错如下： 我们可以手动修改.andro…...

编程日记 2025/7/17 10:05:29

后端返回了 xlsx 文件流，前端怎么下载处理

当后端返回一个 .xlsx 文件流时，前端可以通过 JavaScript 处理这个文件流并触发浏览器下载。实现步骤发送请求获取文件流： 使用 fetch 或 axios 等工具向后端发送请求，确保响应类型设置为 blob（二进制数据流）。创建…...

编程日记 2025/7/24 4:29:49

js中async+await+promise的用法及常见问题总结

文章目录概况asyncawaitPromise总结常见问题概况在ts/js中，async 和 await 是用于简化异步操作的关键字，一般与Promise联用（不理解Promise可以看一下这篇《JS中Promise用法（简要说明）》）。它们的核心作…...

编程日记 2025/7/23 1:21:51

单纯形法之大M法

1. 问题背景与标准化在求解某些线性规划问题时，往往难以直接找到初始的基本可行解。特别是当约束中存在等式或 “≥” 类型的不等式时，我们需要引入人工变量来构造一个初始可行解。考虑如下标准形式问题（假设为最大化问题）&am…...

编程日记 2025/7/22 12:59:48

一个数组分为两个sum相等的数组

vector，问是否可以拆成两部分，使其两部分的总和相同，用代码写一下 #include <iostream> #include <vector>using namespace std;bool canPartition(vector<int>& nums) {int sum 0;for (int num : nums) {sum num;…...

编程日记 2025/7/26 7:39:21

Socket如何实现客户端和服务器间的通信

使用Socket实现客户端和服务器间的通信 Socket是一种网络编程接口，广泛用于实现客户端和服务器之间的通信。在网络应用程序中，Socket提供了一种简单而强大的机制来建立和管理网络连接。本文将详细介绍如何使用Python的Socket模块来实现基本的客户端和服…...

编程日记 2025/7/27 1:14:47

崖山数据库(YashanDB)部署全流程详解

文章目录引言第1部分：环境准备服务器要求初始环境调整第2部分：yasboot工具介绍 yasboot核心功能 yasboot进程架构第3部分：YashanDB安装步骤创建安装用户目录规划命令行安装流程步骤1：生成配置文件步骤2&a…...

编程日记 2025/7/22 18:07:22

07_JavaScript函数作用域_递归

目录一、作用域（重点） 二、变量的使用规则 （重点） 2.1 访问规则 2.2 赋值规则三、递归函数 （难点） 了解四、对象 4.1 对象的创建一、作用域（重点） 什么是作用域 ? 作用…...

编程日记 2025/7/24 7:56:07

基于大模型预测的初治菌阳肺结核诊疗方案研究报告

目录一、引言 1.1 研究背景与意义 1.2 研究目的二、初治菌阳肺结核概述 2.1 疾病定义与病理机制 2.2 流行病学特征 2.3 传统诊疗方法与局限性三、大模型在初治菌阳肺结核预测中的应用原理 3.1 大模型技术简介 3.2 数据收集与预处理 3.3 模型构建与训练 3.4 模型…...

编程日记 2025/7/25 9:13:59

C# Modbus TCP/IP学习记录

Modbus协议中，角色分为主站（Mater）、从站（Slave）；数据类型分为线圈（Coil）、离散输入（Input）、保持寄存器（HoldingRegister）、输入寄存…...

编程日记 2025/7/18 22:14:29

斜线、短横、空格，三种分隔日期的优雅解析（Python | DeepSeek）

标准日期解析操作，str.replace链式如灵蛇蜿蜒，三元表达式像空灵仙家妙法。笔记模板由python脚本于2025-03-25 22:32:24创建，本篇笔记适合三元表达式、字符串操作修习的coder翻阅。【学习的细节是欢悦的历程】博客的核心价值：在…...

编程日记 2025/7/25 21:27:24

Skynet 中 snlua 服务启动整体流程分析

前言： 在 Skynet 中，Lua 扮演了极其重要的角色。Skynet 大多数业务逻辑都跑在一个个 Lua 服务里，而能够将 Lua 环境嵌入到 Skynet 框架下，并与 Skynet 消息调度机制完美结合，正是 snlua 服务所承担的核心功能。本文将…...

编程日记 2025/7/24 9:48:06

RWA代币化崛起中的香港机遇：数字金融新枢纽的破局之道

引言：全球资产代币化浪潮中的香港坐标在2025年全球金融数字化重构的关键节点，RWA（现实世界资产代币化）市场以年均740%的增速重塑价值流动规则。香港凭借独特的政策创新、跨境枢纽优势及庞大的资产储备，正从传统金融中…...

编程日记 2025/7/24 23:31:46

Docker Compose介绍

基本概念 Docker-Compose是Docker官方的开源项目，负责实现对docker容器集群的快速编排。可以这么理解，docker compose是docker提出的一个工具软件，可以管理多个docker容器组成一个应用，只需要编写一个YAML格式的配置文件docker…...

编程日记 2025/7/18 5:47:33

【LeetCode 题解】算法：15.三数之和

一、问题描述在 LeetCode 上有这样一道经典的算法题，题目要求给定一个整数数组 nums，找出所有不重复的三元组 [nums[i], nums[j], nums[k]]，需要满足以下两个条件： 三个元素的索引互不相同，即 i ! j，i ! …...

编程日记 2025/7/24 10:09:09

springboot使用阿里限流框架-sentinel

当前项目源码控制台下载启动bin中的看板服务：账号密码:sentinel/sentinel 官方文档地址项目引入依赖  <dependency><groupId>com.alibaba.csp</groupId><artifactId>sentinel-annotation-aspectj<…...

编程日记 2025/7/26 17:10:12

Ubuntu20.04系统安装IsaacSim4.5与IsaacLab环境

Introduction 今天用自己的Ubuntu20.04系统安装最新更新的IsaacSim 4.5 与最新版的IsaacLab遇到了问题，且这个问题组里师兄之前也遇到了，我的解决方法是从头来过，所及记录一下。 IsaacSim现在支持pip安装，但是Ubuntu20.04的pip…...

编程日记 2025/7/27 5:51:01

【大模型】数字人 EchoMimicV2 的环境配置和使用

一、EchoMimicV2的简单介绍 EchoMimicV2是EchoMimicV1的升级版本，旨在通过音频驱动生成更加自然和流畅的半身人类动画。它能够让用户仅通过简单的音频输入，生成与声音内容相匹配的动画效果，使虚拟人物看起来更加生动。作者：由蚂蚁…...

编程日记 2025/7/16 20:09:33

导入 Excel 规则批量修改或删除 PDF 文档内容

需要对 PDF 文档内容进行修改的时候，通常我们会需要借助一些专业的工具来帮我们完成。那我们如果需要修改的 PDF 文档较多的时候，有什么方法可以帮我们实现批量操作呢？今天这篇文章就给大家介绍一下当我们需要批量修改多个 PDF 文档的时候&am…...

编程日记 2025/7/25 4:36:40

2.Excel ：快速填充和拆分重组

一案例1：快速填充电子邮件中包含每个人的人名，现在要提取电子邮件中的姓名到名字列。方法1：将 Nancy 复制到单元格后，邮件会高亮，然后输入A的时候系统就会知道提取名字了。补充：如果第三个位置输入错误…...

编程日记 2025/7/24 10:06:06

python tkinter 开发蓍草占卜系统

1. 项目概述 1.1 简介蓍草占卜是中国传统的占卜方法，用于演算六十四卦。本系统通过现代编程技术，将传统的蓍草占卜方法数字化，提供一个准确、便捷的占卜工具。蓍草占卜，作为中国古代的一种传统占卜方法，承载着深厚…...

编程日记 2025/7/19 22:24:23

综合小实验之电视机

综合小实验1 一、实验拓扑图二、实验要求按照图示配置IP地址；按照图示区域划分配置对应的动态路由协议；在R7上配置dhcp服务器，能够让pc可以获取IP地址；将所有环回⼝宣告进ospf中，将环回⼝7宣告进rip中，…...

编程日记 2025/7/23 19:57:48

全排列|| 分发饼干摆动序列

1.给定一个可包含重复数字的序列 nums ，按任意顺序返回所有不重复的全排列。示例 1： 输入：nums [1,1,2] 输出： [[1,1,2], [1,2,1], [2,1,1]] 示例 2： 输入：nums [1,2,3] 输出：[[1,2,3…...

编程日记 2025/7/24 20:04:05

【开源宝藏】用 JavaScript 手写一个丝滑的打字机动画效果

你当前项目实现了一个非常丝滑的打字机文字效果动画，使用的是自定义的 typical.js 脚本。下面我将给出一份逐步拆解的中文教程，帮你或其他初学者快速上手并自定义这个打字效果。 ✨ 最终效果打开页面后，中央会逐字显示： Hello…...

编程日记 2025/7/27 1:24:30

64. MfgTool烧写工具详解

一、MfgTool工具简介 1、mfgtool是NXP官方做的向I.MX系列烧写系统的软件，运行在windows下。可以烧写uboot.imx、zImage、dtb，rootfs。通过USB烧写。 Mfgtool里面默认存放了NXP官方开发板的系统文件， 2、基本原理向开发板烧系统分两部分&am…...

编程日记 2025/7/23 23:28:02

3、孪生网络/连体网络（Siamese Network）

目的：用Siamese Network (孪生网络) 解决Few-shot learning (小样本学习)。 Siamese Network并不是Meta Learning最好的方法，但是通过学习Siamese Network，非常有助于理解其他Meta Learning算法。这里介绍了两种方法：Siamese Network (孪生网络)、Trplet Loss Siam…...

编程日记 2025/7/22 2:21:59

前端学习笔记--CSS

HTMLCSSJavaScript 》结构表现交互如何学习 1.CSS是什么 2.CSS怎么用？ 3.CSS选择器（重点，难点） 4.美化网页（文字，阴影，超链接，列表，渐变。。。） 5…...

编程日记 2025/7/23 19:50:14

开个坑记录一下树莓派4B部署yolo的一些问题

问题一：操作系统与内核信息这个问题困扰了我一天半，下载的时候显示的信息是aar64的系统，但是这并无意味着一个问题，那就是你的操作系统是64位的。需要采用如下的指令查看： getconf LONG_BIT 我在树莓派得出来的操作…...

编程日记 2025/7/26 23:43:57

1.1 结构体与类对象在List中使用区别

一、问题的起源如下的代码是错误的，无法编译通过 struct Point {public int X;public int Y; }List<Point> points new List<Point> { new Point { X 1, Y 2 } }; points[0].X 10; // 编译错误！无法修改副本的字段二、原因分析在C#中&…...

编程日记 2025/7/26 8:20:36

详细说明windows系统函数::SetUnhandledExceptionFilter(ExceptionFilter)

::SetUnhandledExceptionFilter(ExceptionFilter); 是 Windows 编程中用于设置顶层未处理异常过滤器的关键 API 调用。它属于 Windows 结构化异常处理（SEH, Structured Exception Handling）机制的一部分，主要用于捕获那些未被程序内部处理的异…...

编程日记 2025/7/22 5:53:29

力扣刷题39. 组合总和

39. 组合总和 - 力扣（LeetCode） 需要定义一个index变量用来记录访问数组的下标，每次递归进行传参，在搜索过程中，因为为了避免重复数据，而且允许一个元素的重复出现，传入index时传入当前遍历的i…...

编程日记 2025/7/22 6:10:26

正弦函数的连续傅里叶变换正弦序列的DTFT

正弦序列时域 x [ n ] sin ⁡ ( ω 0 n ) x[n] \sin(\omega_0 n) x[n]sin(ω0n)频域 X ( e j ω ) j π 2 [ δ ( ω − ω 0 ) − δ ( ω ω 0 ) ] X({\rm e}^{{\rm j}\omega}) \frac{{\rm j}\pi}{2} \left[ \delta(\omega - \omega_0) - \delta(\omega \omega_0…...

编程日记 2025/7/25 16:28:47

winstart.wsf 病毒清理大作战

0x00 背景发现感染了winstart.wsf 病毒如何清理。 0x01 现象遍历Users下每个目录以及C:\和C:\Windows\Temp 2个目录写入病毒文件。 C:\Users\Administrator\AppData\Local\Temp\winstart.wsf C:\Users\Administrator\AppData\Roaming\Microsoft\Windows\Start Menu\Program…...

编程日记 2025/7/22 10:34:35

leetcode 20.有效括号

20. 有效的括号 - 力扣（LeetCode） class Solution:def isValid(self, s: str) -> bool:stack []for i in s :if i in ((,{,[ ):stack.append(i)elif i in () ):# 这种情况是栈弹出元素为空时候 ，右半部分的括号多出来一些比如&#x…...

编程日记 2025/7/18 20:18:47

前言