语言►nodejs►库►browserslist

什么是Browserslist

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/07/23/%E4%BB%80%E4%B9%88%E6%98%AFBrowserslist/

摘要

本文主要讲述了：

  1. 作用
  2. 安装
  3. 配置
  4. 测试
  5. 语法

正文

在开始 Web 前端开发之前，开发者必须要明确目标环境。

例如：

  • IE 9 +
  • Firefox 60 +
  • Chrome 60 +

作用

Browserslist 用于配置目标环境。

安装

1
2
3
#!/usr/bin/env bash

npm install --save-dev browserslist

配置

Browserslist 的配置可以直接写在package.json的browserslist字段里（推荐），也可以写成名为.browserslistrc的配置文件，但二者不能同时使用。

package.json

示例：

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

.browserslistrc

示例：

1
2
> 1%
last 2 versions

测试

在控制台执行下面的命令会输出当前的目标环境。

1
2
3
#!/usr/bin/env bash

npx browserslist

语法

注意：大小写不敏感。

无配置

当package.json中不存在browserslist字段且.browserslistrc也不存在时，相当于

1
2
3
{
  "browserslist": ["defaults"]
}

或

1
defaults

有配置但为空

空

浏览器名称 + 版本号

示例：

1
2
3
{
  "browserslist": ["ie 10"]
}

浏览器名称 + 版本号范围

示例：

1
2
3
{
  "browserslist": ["ie > 8"]
}
1
2
3
{
  "browserslist": ["ie 10-11"]
}

浏览器版本的市场份额

示例：

1
2
3
{
  "browserslist": ["> 1%"]
}

浏览器版本的市场份额 + 地区

示例：

1
2
3
{
  "browserslist": ["> 1% in CN"]
}

集合运算

并集运算

运算符：,和or

示例：“市场份额超过1%的浏览器版本”和“每种浏览器的最新2个版本”的并集。

1
2
3
{
  "browserslist": ["> 1%, last 2 versions"]
}
1
2
3
{
  "browserslist": ["> 1% or last 2 versions"]
}

并集运算也可以不要运算符，直接写成多行。

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

交集运算

运算符：and

示例：“市场份额超过1%的浏览器版本”和“每种浏览器的最新2个版本”的交集。

1
2
3
{
  "browserslist": ["> 1% and last 2 versions"]
}

差集运算

运算符：and not、or not、, not

示例：“市场份额超过0.5%的浏览器版本”和“每种浏览器的最新2个版本”的差集

1
2
3
{
  "browserslist": ["> .5% and not last 2 versions"]
}
1
2
3
{
  "browserslist": ["> .5% or not last 2 versions"]
}
1
2
3
{
  "browserslist": ["> .5%, not last 2 versions"]
}
1
2
3
{
  "browserslist": ["> .5%", "not last 2 versions"]
}

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/07/23/%E4%BB%80%E4%B9%88%E6%98%AFBrowserslist/

本文对你有帮助？请支持我

支付宝
微信