---
title: browserslist使用手册
date: 2018-06-09 16:29:00
updated: 2018-06-10 12:00:00
categories:
- 网页开发
- 样式兼容
tags:
- nodejs
---

网页样式浏览器兼容解决;查找目标浏端——解决哪些浏览器版本，node版本是我们想兼容的。

for css

# 默认的browserslist@ 配置
//.browserslistrc
iOS >= 7
Android > 4.1
Firefox > 20
last 2 versions

> 0.5%, last 2 versions, Firefox ESR, not dead

//or use in package.json
{
  "browserslist": [
    "iOS >= 7",
    "Android > 4.1",
    "Firefox > 20",
    "last 2 versions"
  ]
}

工具

# npx browserslist

配置文件

目录：
名字：

配置查找

Browserslist will use browsers query from one of this sources

1.Tool options. For example browsers option in Autoprefixer.
2.BROWSERSLIST environment variable.
3.browserslist config file in current or parent directories.
4..browserslistrc config file in current or parent directories.
5.browserslist key in package.json file in current or parent directories. 6.We recommend this way.
6.If the above methods did not produce a valid result Browserslist will use defaults: > 0.5%, last 2 versions, Firefox ESR, not dead.

最佳实践

# 单某浏端
#2 单单谷歌："browserslist": [ "last 2 Chrome versions"]
# 默认配置
"browserslist": [ "defaults"]

# 最新版本
#2 "browserslist": [ "last 1 version, not dead > 0.2%"] 

# 某个区域
#2 全球
 "browserslist": [ "> 1% "] 
#2 亚洲
 "browserslist": [ "> 1% in alt-AS"] 
#2 中国
"browserslist": [ "> 1% inCN"] 
#2 美国
 "browserslist": [ "> 1% in US"] 
#2 自定数据
 "browserslist": [ "> 1% in my stats"] 

查询组合

# 大小判断：>=, < ， <=

# 表示或者：or,,
#2 "browserslist": [ "last 1 version, > 0.2%"]
#2 "browserslist": [ "last 1 version or  > 0.2%"]

# 表示并且：and
#2 "browserslist": [ "last 1 version and > 0.2%"]

# 表示否定：not
"browserslist": [ "last 1 version and not > 0.2%"]

版本兼容

#版本范围

#区域选择
#2亚洲：> 5% in alt-AS

#2自定数据
> 5% in my stats

查看配置

npx browserslist

浏览器表

//注：浏览器名大写小写敏感

//安卓
`Android` for Android WebView.

//苹果
`iOS` or `ios_saf` for iOS Safari.
`Safari` for desktop Safari.

//百度
`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.

//IE
`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.

//Opera
`Opera` for Opera.
`OperaMini` or `op_mini` for Opera Mini.
`OperaMobile` or `op_mob` for Opera Mobile.

//QQ
`QQAndroid` or `and_qq` for QQ Browser for Android.

//三星
`Samsung` for Samsung Internet.

//UC
`UCAndroid` or `and_uc` for UC Browser for Android.

参考：https://github.com/browserslist/browserslist#Browsers

共享配置

//steps-01:
//package.json
  "browserslist": [
    "extends browserslist-config-mycompany/desktop",
    "extends browserslist-config-mycompany/mobile"
  ]

//steps-02:
//browserslist-config-mycompany/index.js
module.exports = [
  '> 1%',
  'ie 10'
]

不同环境

[production]
> 1%
ie 10
 
[modern]
last 1 chrome version
last 1 firefox version
 
[ssr]
node 12

自定数据

//step-01:生成文件
//方式1：命令
npx browserslist-ga

//方式2：手写
{
  "ie": {
    "6": 0.01,
    "7": 0.4,
    "8": 1.5
  },
  "chrome": {
    …
  },
  …
}

脚本接口

var browserslist = require('browserslist');

var process = function (source, opts) {
    var browsers = browserslist(opts.browsers, {
        //自定数据
        stats: opts.stats,
        //配置文件
        path:  opts.file,
        //config:opts.config,
       //环境标识
        env:   opts.env,
       //安全检查
       dangerousExtend:opts.dangerousExtend,

    });
    // Your code to add features for selected browsers
}

转换

//node
browserslist.coverage(browserslist('> 1% in US'), 'US')
//=> 83.1

//cli
$ browserslist --coverage=US "> 1% in US"
These browsers account for 83.1% of all users in the US

缓存

//清除
browserslist.clearCaches();

参考文献

browserslist-offical-readme.md
Country-code-defined-in-ISO-3166-1