总结不出更好的了,感受官方文档已经写得够清楚了,翻译的很差,请你们斧正css
browserslist 是在不一样的前端工具之间共用目标浏览器和 node 版本的配置工具。它主要被如下工具使用:前端
browserslist示例 演示了上面列举的每一个工具是如何使用 browserslist 的。全部的工具将自动的查找当前工程规划的目标浏览器范围,前提是你在前端工程的 package.json 里面增长以下配置:node
{
"browserslist": [
"last 1 version",
"> 1%",
"maintained node versions",
"not dead"
]
}
复制代码
或者在工程的根目录下存在.browerslistrc
配置文件(内容以下):android
# 注释是这样写的,以#号开头
last 1 version
> 1%
maintained node versions
not dead
复制代码
开发者经过设置浏览器版本查询范围(eg. last 2 versions
),使得开发者不用再频繁的手动更新浏览器版本。browserslist 使用 Can I Use 网站的数据来查询浏览器版本范围。ios
browserslist 提供在线的查询条件练习网站,下面会用到,点击 这里 前往。git
browserslit-ga: 该工具能生成访问你运营的网站的浏览器的版本分布数据,以便用于相似> 0.5% in my stats
查询条件, 前提是你运营的网站部署有 Google Analytics。github
browserslist-useragent : 检验 某浏览器的user-agent 字符串是否匹配 browserslist 给出的浏览器范围。web
browserslist-useragent-ruby : 功能同上,ruby 库。chrome
caniuse-api: 返回支持指定特性的浏览器版本范围npm
npx browserslist :在前端工程目录下运行上面命令,输出当前工程的目标浏览器列表。
browerslist 将使用以下配置文件限定的的浏览器和 node 版本范围:
BROWERSLIST
环境变量。browserslist
配置文件。browserslistrc
配置文件。package.json
配置文件里面的browserslist
配置项(推荐)。> 0.5%, last 2 versions, Firefox ESR, not dead
。last 2 Chrome versions
的查询条件来锁定特别具体的浏览器品牌和版本。市面上有各类各样的浏览器,同时浏览器的版本碎片化也很严重,若是你在开发一款通用的 webapp,那就应该考虑浏览器多样性致使的兼容问题。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(这里没懂啥意思,才疏学浅见谅).你能够用以下查询条件来限定浏览器和 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
在任和查询条件前面,表示取反直接在工程目录下运行npx browserslist
来查看你配置的筛选条件筛选出的浏览器版本范围。
$ 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
,也就是说只要浏览器版本符合筛选条件里面的一种便可。
全部的查询条件均基于Can I Use的支持列表。例如: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 AndroidEdge
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
若是你想减小工程根目录下的配置文件的数量,能够在 package.json
中设置 browserslist
配置项,以下所示:
{
"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 将检查path
路径上每一级目录下面是否有配置文件. 因此,若是工具要处理的文件路径是这样的 app/styles/main.css
, 那么你能够将配置文件放置在根目录, app/
或者 app/styles
。
也能够在BROWSERSLIST_CONFIG
环境变量中直接指定配置文件的路径 。
可使用以下写法,从另一个输出 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
复制代码
If you have a website, you can query against the usage statistics of your site. browserslist-ga
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.
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"
复制代码
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
复制代码
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.