browserslist是什么？

前言

在平常开发中，对于低版本浏览器的兼容问题，我们通常使用babel或者postcss进行处理，然而怎么确定浏览器兼容的版本，那么就需要背后的browserslist进行支持。

1. browserslist介绍

1.1 什么是browserslist

是一个用特定语句查询浏览器列表的工具.

它是适用于 Autoprefixer、Babel、ESLint、PostCSS 和 Webpack 等流行 JavaScript 工具的共享浏览器兼容性配置。

例如：

查询"last 2 Chrome versions",使用npx browserslist "last 2 Chrome versions"

1.2 如何配置

有两种方式进行配置

使用package.json中browserslist字段配置

json 复制代码

  "browserslist": [
    "defaults and fully supports es6-module",
    "maintained node versions"
  ]

使用.browserslistrc文件配置

rc 复制代码

# Browsers that we support

defaults and fully supports es6-module
maintained node versions

一些常用的查询语法

根据用户份额:

> 5%: 在全球用户份额大于 5% 的浏览器
> 5% in CN: 在中国用户份额大于 5% 的浏览器

根据最新浏览器版本

last 2 versions: 所有浏览器的最新两个版本
last 2 Chrome versions: Chrome 浏览器的最新两个版本

不再维护的浏览器

dead: 官方不在维护已过两年，比如 IE10

浏览器版本号

Chrome > 90: Chrome 大于 90 版本号的浏览器

1.3 运行机制

Browserslist 的运行基于以下几个步骤：

读取配置：Browserslist 会首先查找并读取开发者设定的配置文件或者配置字符串。这些配置可以存在于多个地方，比如 package.json 文件的 "browserslist" 字段，或者一个独立的 .browserslistrc 文件。
解析配置：Browserslist 会解析这些配置，生成一个支持的浏览器列表。与 caniuse-lite Can I Use 数据一起用于此查询，其中每个项目都有其详细的支持度说明。
查询处理：开发者可以在配置中使用一些查询命令来指定要支持的浏览器版本或范围。比如 "last 2 versions" 会包括所有浏览器的最后两个版本，">1%" 则会包括全球使用率大于1%的每个浏览器的版本。可以在browsersl.istplayground 中查看配置的工作原理。
提供给其他工具：生成的浏览器列表会被提供给其他使用到的工具（如 Autoprefixer, Babel 等），这些工具会根据浏览器列表来决定它们的工作方式，比如添加何种 CSS 前缀，是否需要特性转换等。

注意因为 browserslist 并不维护数据库，因此它会经常提醒你去更新 caniuse-lite 这个库，由于 lock 文件的存在，因此需要使用以下命令手动更新数据库。

ruby 复制代码

$ npx browserslist@latest --update-db

该命令将会对 caniuse-lite 进行升级，可体现在 lock 文件中。

kotlin 复制代码

caniuse-lite@^1.0.30001578, caniuse-lite@^1.0.30001587:
  version "1.0.30001591"
  resolved "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001591.tgz#16745e50263edc9f395895a7cd468b9f3767cf33"
  integrity sha512-PCzRMei/vXjJyL5mJtzNiUCKP59dm8Apqc3PH8gJkMnMXZGox93RbE76jHsmLwmIo6/3nsYIpJtx0O7u5PqFuQ==

2. js和css的polyfill

无论是处理 JS 的 babel ，还是处理 CSS 的 postcss ，凡是与垫片相关的，他们背后都有 browserslist 的身影。

babel，在 @babel/preset-env 中使用 core-js 作为垫片
postcss 使用 autoprefixer 作为垫片

下面通过实际案例进行说明：

2.1 Babel 和 Browserslist

例如：需要通过babel转译箭头函数为兼容浏览器的代码

初始化项目后，新建src/index.js

js 复制代码

const func = () => {
    console.log('打印***111', 111)
}

安装 babel依赖

sql 复制代码

yarn add -D @babel/core @babel/cli @babel/preset-env

配置babel.config.json

json 复制代码

{
    "presets": [
        [
            "@babel/preset-env"
        ]
    ]
}

配置.browserslistrc文件

defaults

运行

css 复制代码

npx babel ./src/index.js --out-dir dist

输出

js 复制代码

"use strict";

const func = () => {
  console.log('打印***111', 111);
};

修改.browserslistrc文件

chrome > 30

再次运行输出

js 复制代码

"use strict";

var func = function func() {
  console.log('打印***111', 111);
};

比对两次输出，可以得出通过配置是否将箭头函数的语法进行转换。

2.2 Postcss 和 Browserslist

使用postcss自动添加css的浏览器前缀

新建style/index.css文件

js 复制代码

.container {
    display: flex;
}

安装postcss依赖

csharp 复制代码

yarn add -D postcss postcss-cli autoprefixer

新建postcss.config.js

js 复制代码

const autoprefixer = require('autoprefixer')

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

使用默认的browserslist 运行命令

bash 复制代码

npx postcss ./src/style.css -o dist/style.css

输出

css 复制代码

.container {
    display: flex;
}

修改.browserslistrc文件

chrome > 10

再次运行输出：

css 复制代码

.container {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

通过不同的浏览器版本，给css添加不同的前缀，提高兼容性。

4. 总结

本文主要介绍了browserslist的概念、配置方式、运行机制以及在JS和CSS中的应用。

通过配置browserslist，我们可以指定需要兼容的浏览器版本范围，从而让工具如babel和postcss可以根据这个配置来生成对应的兼容性代码。

在实际开发中，我们可以通过修改.browserslistrc文件来控制代码的兼容性处理，从而确保项目在不同浏览器中的正常运行。

如有错误，请指正O^O!

参考文章网站：

js：Browserslist用特定语句查询浏览器列表的工具与Babel和Postcss配置使用

Check compatible browsers

Browserslist 信息和配置使用整理