前端工程基础知识点--Browserslist (基于官方文档翻译）

简介

browserslist 是在不同的前端工具之间共用目标浏览器和 node 版本的配置工具。它主要被以下工具使用：

演示了上面列举的每个工具是如何使用 browserslist 的。所有的工具将自动的查找当前工程规划的目标浏览器范围，前提是你在前端工程的 package.json 里面增加如下配置：

{
  "browserslist": [
    "last 1 version",
    "> 1%",
    "maintained node versions",
    "not dead"
  ]
}
复制代码

# 注释是这样写的，以#号开头
last 1 version
> 1%
maintained node versions
not dead
复制代码

开发者通过设置浏览器版本查询范围(eg. last 2 versions)，使得开发者不用再频繁的手动更新浏览器版本。browserslist 使用网站的数据来查询浏览器版本范围。

browserslist 提供在线的查询条件练习网站，下面会用到，点击前往。

browerslist 衍生的工具

browserslit-ga：该工具能生成访问你运营的网站的浏览器的版本分布数据，以便用于类似> 0.5% in my stats查询条件, 前提是你运营的网站部署有 Google Analytics。
browserslist-useragent ：检验某浏览器的user-agent 字符串是否匹配 browserslist 给出的浏览器范围。
browserslist-useragent-ruby ：功能同上，ruby 库。
caniuse-api：返回支持指定特性的浏览器版本范围

查询来源

browerslist 将使用如下配置文件限定的的浏览器和 node 版本范围：

最佳实践

仅仅当你在特定浏览器上开发类似于信息亭之类的 web app 的时候，才可以用类似last 2 Chrome versions的查询条件来锁定特别具体的浏览器品牌和版本。市面上有各种各样的浏览器，同时浏览器的版本碎片化也很严重，如果你在开发一款通用的 webapp，那就应该考虑浏览器多样性导致的兼容问题。
如果你不想用 browserslsit 的默认设置，推荐使用last 1 version, not dead 和 > 0.2%(或者> 1% in US,> 1% in my stats).仅仅使用last n versions 将添加太多的废弃浏览器到工程里面来，同时也并没有有效的覆盖那些占有率仍然很高的老版本浏览器。Just > 0.2% make popular browsers even more popular, so we will have a monopoly and stagnation, as we had with Internet Explorer 6（这里没懂啥意思，才疏学浅见谅）.
不移除某些浏览器，是因为你不了解它们的分布。Opera mini 在非洲有一亿用户，全球范围内，它也比微软的 Edge 浏览器更加流行。QQ 浏览器的使用量比桌面端的火狐和 Safari 浏览器加起来还多。

查询条件列表

你可以用如下查询条件来限定浏览器和 node 的版本范围（大小写不敏感）：

> 5%: 基于全球使用率统计而选择的浏览器版本范围。>=,<,<=同样适用。
> 5% in US : 同上，只是使用地区变为美国。支持两个字母的国家码来指定地区。
> 5% in alt-AS : 同上，只是使用地区变为亚洲所有国家。列举了所有的地区码。
> 5% in my stats : 使用。
cover 99.5% : 使用率总和为99.5%的浏览器版本，前提是浏览器提供了使用覆盖率。
cover 99.5% in US : 同上，只是限制了地域，支持两个字母的国家码。
cover 99.5% in my stats :使用。
maintained node versions :所有还被 node 基金会维护的 node 版本。
node 10 and node 10.4 : 最新的 node 10.x.x 或者10.4.x 版本。
current node :当前被 browserslist 使用的 node 版本。
extends browserslist-config-mycompany :来自browserslist-config-mycompany包的查询设置
ie 6-8 : 选择一个浏览器的版本范围。
Firefox > 20 : 版本高于20的所有火狐浏览器版本。>=,<,<=同样适用。
ios 7 :ios 7自带的浏览器。
Firefox ESR :最新的火狐 ESR（长期支持版）版本的浏览器。
unreleased versions or unreleased Chrome versions : alpha 和 beta 版本。
last 2 major versions or last 2 ios major versions :最近的两个发行版，包括所有的次版本号和补丁版本号变更的浏览器版本。
since 2015 or last 2 years :自某个时间以来更新的版本（也可以写的更具体since 2015-03或者since 2015-03-10）
dead :通过last 2 versions筛选的浏览器版本中，全球使用率低于0.5%并且官方声明不在维护或者事实上已经两年没有再更新的版本。目前符合条件的有 IE10,IE_Mob 10,BlackBerry 10,BlackBerry 7,OperaMobile 12.1。
last 2 versions :每个浏览器最近的两个版本。
last 2 Chrome versions :chrome 浏览器最近的两个版本。
defaults :默认配置> 0.5%, last 2 versions, Firefox ESR, not dead。
not ie <= 8 : 浏览器范围的取反。
可以添加not在任和查询条件前面，表示取反

Debug

$ npx browserslist
and_chr 61
and_ff 56
and_qq 1.2
and_uc 11.4
android 56
baidu 7.12
bb 10
chrome 62
edge 16
firefox 56
ios_saf 11
opera 48
safari 11
samsung 5
复制代码

注意事项

Browserslist 会处理浏览器的每个版本，所以应该避免配置这样的查询条件Firefox > 0.

多个查询条件组和在一起之后，其之间的的覆盖是以OR 的方式，而是不是AND,也就是说只要浏览器版本符合筛选条件里面的一种即可。

所有的查询条件均基于的支持列表。例如：last 3 ios versions 可能会返回8.4, 9.2, 9.3(混合了主版本和次版本)，然而last 3 Chrome versions可能返回50, 49, 48（只有主版本），总之一切以 CanIUse网站收集的浏览器版本数据为准。

浏览器分类（大小写不敏感）

Android for Android WebView.
Baidu for Baidu Browser.
BlackBerry or bb for Blackberry browser.
Chrome for Google Chrome.
ChromeAndroid or and_chr for Chrome for Android
Edge for Microsoft Edge.
Electron for Electron framework. It will be converted to Chrome version.
Explorer or ie for Internet Explorer.
ExplorerMobile or ie_mob for Internet Explorer Mobile.
Firefox or ff for Mozilla Firefox.
FirefoxAndroid or and_ff for Firefox for Android.
iOS or ios_saf for iOS Safari.
Node for Node.js.
Opera for Opera.
OperaMini or op_mini for Opera Mini.
OperaMobile or op_mob for Opera Mobile.
QQAndroid or and_qq for QQ Browser for Android.
Safari for desktop Safari.
Samsung for Samsung Internet.
UCAndroid or and_uc for UC Browser for Android.

`package.json`

{
  "private": true,
  "dependencies": {
    "autoprefixer": "^6.5.4"
  },
  "browserslist": [
    "last 1 version",
    "> 1%",
    "IE 10"
  ]
}
复制代码

配置文件

Browserslist配置文件应该被命名为 .browserslistrc 或者 browserslist 每条查询条件独占一行。注释用 # 开头:

# Browsers that we support

last 1 version
> 1%
IE 10 # sorry
复制代码

也可以在BROWSERSLIST_CONFIG环境变量中直接指定配置文件的路径。

Shareable Configs

可以使用如下写法，从另外一个输出 browserslist 配置的包导入配置数据:

  "browserslist": [
    "extends browserslist-config-mycompany"
  ]
复制代码

为了安全起见，额外的配置包只支持前缀 browserslist-config- 的包命名. npm包作用域也同样支持 @scope/browserslist-config,例如： @scope/browserslist-config or @scope/browserslist-config-mycompany.

When writing a shared Browserslist package, just export an array. browserslist-config-mycompany/index.js:

module.exports = [
  'last 1 version',
  '> 1%',
  'ie 10'
]
复制代码

环境的差异化配置

你可以为不同的环境配置不同的浏览器查询条件。 Browserslist 将依赖BROWSERSLIST_ENV 或者 NODE_ENV查询浏览器版本范围 . 如果两个环境变量都没有配置正确的查询条件，那么优先从 production 对应的配置项加载查询条件，如果再不行就应用默认配置。

In package.json:

  "browserslist": {
    "production": [
      "> 1%",
      "ie 10"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version"
    ]
  }
复制代码

In .browserslistrc config:

[production staging]
> 1%
ie 10

[development]
last 1 chrome version
last 1 firefox version
复制代码

Custom Usage Data

If you have a website, you can query against the usage statistics of your site. will ask access to Google Analytics and then generate browserslist-stats.json:

npx browserslist-ga
复制代码

Of course, you can generate usage statistics file by any other method. File format should be like:

{
  "ie": {
    "6": 0.01,
    "7": 0.4,
    "8": 1.5
  },
  "chrome": {
    …
  },
  …
}
复制代码

Note that you can query against your custom usage data while also querying against global or regional data. For example, the query > 1% in my stats, > 5% in US, 10% is permitted.

JS API

var browserslist = require('browserslist');

// Your CSS/JS build tool code
var process = function (source, opts) {
    var browsers = browserslist(opts.browsers, {
        stats: opts.stats,
        path:  opts.file,
        env:   opts.env
    });
    // Your code to add features for selected browsers
}
复制代码

Queries can be a string "> 1%, IE 10" or an array ['> 1%', 'IE 10'].

If a query is missing, Browserslist will look for a config file. You can provide a path option (that can be a file) to find the config file relatively to it.

Options:

path: file or a directory path to look for config file. Default is ..
env: what environment section use from config. Default is production.
stats: custom usage statistics data.
config: path to config if you want to set it manually.
ignoreUnknownVersions: do not throw on direct query (like ie 12). Default is false.
dangerousExtend: Disable security checks for extend query. Default is false.

For non-JS environment and debug purpose you can use CLI tool:

browserslist "> 1%, IE 10"
复制代码

Coverage

You can get total users coverage for selected browsers by JS API:

browserslist.coverage(browserslist('> 1%'))
//=> 81.4
复制代码

browserslist.coverage(browserslist('> 1% in US'), 'US')
//=> 83.1
复制代码

browserslist.coverage(browserslist('> 1% in my stats'), 'my stats')
//=> 83.1
复制代码

browserslist.coverage(browserslist('> 1% in my stats', { stats }), stats)
//=> 82.2
复制代码

Or by CLI:

$ browserslist --coverage "> 1%"
These browsers account for 81.4% of all users globally
复制代码

$ browserslist --coverage=US "> 1% in US"
These browsers account for 83.1% of all users in the US
复制代码

$ browserslist --coverage "> 1% in my stats"
These browsers account for 83.1% of all users in custom statistics
复制代码

$ browserslist --coverage "> 1% in my stats" --stats=./stats.json
These browsers account for 83.1% of all users in custom statistics
复制代码

Cache

Browserslist caches the configuration it reads from package.json and browserslist files, as well as knowledge about the existence of files, for the duration of the hosting process.

To clear these caches, use:

browserslist.clearCaches();
复制代码

To disable the caching altogether, set the BROWSERSLIST_DISABLE_CACHE environment variable.

全部栏目