請移步到我的Blog矾湃,獲得更好的閱讀體驗(yàn)苔悦!本文的鏈接請點(diǎn)這里
browserlist是什么秽誊?
browserlist用于在不同前端工具之間共用目標(biāo)瀏覽器和node版本的配置工具念脯。
簡單來說吊宋,就是用來控制瀏覽器版本的一個(gè)插件酥宴。
例如:
搭配babel轉(zhuǎn)義代碼啦吧,將老瀏覽器不支持的新API轉(zhuǎn)義為可運(yùn)行代碼(polyfill)
搭配Autoprefixer編譯CSS代碼,自動添加瀏覽器前綴
怎么用拙寡?
browserlist可以用在下面工具中:
只要將下面的json內(nèi)容添加到package.json中授滓,以上所有工具都會自動找到(適配)目標(biāo)瀏覽器:
"browserslist": [
"last 1 version",
"> 1%",
"maintained node versions",
"not dead"
]
或者在項(xiàng)目根目錄的.browserslistrc
配置文件中添加下面的配置:
# Browsers that we support
last 1 version
> 1%
maintained node versions
not dead
開發(fā)者通過設(shè)置瀏覽器版本查詢范圍,使開發(fā)者不用頻繁手動更新瀏覽器版本。browserslist 使用 Can I Use 網(wǎng)站的數(shù)據(jù)來查詢?yōu)g覽器版本范圍般堆。
browserslist 提供在線的查詢條件練習(xí)網(wǎng)站在孝,下面會用到,點(diǎn)擊 這里 前往淮摔。
可以點(diǎn)這里來學(xué)習(xí)每種工具如何使用browserlist私沮。
怎么查詢?
browserlist會使用下列配置方式來進(jìn)行查詢?yōu)g覽器和nodejs版本:
在package.json中加入
browserslist
配置項(xiàng)和橙。使用項(xiàng)目根目錄或父目錄下的
.browserslistrc
配置文件仔燕。使用項(xiàng)目根目錄或父目錄下的
.browserslist
配置文件。BROWERSLIST
環(huán)境變量魔招。如果沒有以上4種配置方式晰搀,browserlist會使用默認(rèn)的配置:
> 0.5%, last 2 versions, Firefox ESR, not dead
。
查詢條件
查詢關(guān)鍵字有or/,
办斑,and
外恕,not
,比如有條件> 0.5%
和last 2 versions
俄周。
則:
> 0.5% or last 2 versions
:取并集吁讨。> 0.5% , last 2 versions
:取并集。> 0.5% and last 2 versions
:取交集峦朗。> 0.5% not last 2 versions
:取> 0.5%
的差集建丧。
注:
or
/,
都是取并集。
查詢條件列表
> 5%
: 基于全球使用率統(tǒng)計(jì)而選擇的瀏覽器版本范圍波势。>=
,<
,<=
同樣適用翎朱。> 5% in US
: 同上,只是使用地區(qū)變?yōu)槊绹呦场VС謨蓚€(gè)字母的國家碼來指定地區(qū)拴曲。> 5% in alt-AS
: 同上,只是使用地區(qū)變?yōu)閬喼匏袊摇?a target="_blank">這里列舉了所有的地區(qū)碼凛忿。> 5% in my stats
: 使用定制的瀏覽器統(tǒng)計(jì)數(shù)據(jù)澈灼。cover 99.5%
: 使用率總和為99.5%的瀏覽器版本,前提是瀏覽器提供了使用覆蓋率店溢。cover 99.5% in US
: 同上叁熔,只是限制了地域,支持兩個(gè)字母的國家碼床牧。cover 99.5% in my stats
:使用定制的瀏覽器統(tǒng)計(jì)數(shù)據(jù)荣回。maintained node versions
:所有還被 node 基金會維護(hù)的 node 版本。node 10
andnode 10.4
: 最新的 node 10.x.x 或者10.4.x 版本戈咳。current node
:當(dāng)前被 browserslist 使用的 node 版本心软。extends browserslist-config-mycompany
:來自browserslist-config-mycompany包的查詢設(shè)置ie 6-8
: 選擇一個(gè)瀏覽器的版本范圍壕吹。Firefox > 20
: 版本高于20的所有火狐瀏覽器版本。>=
,<
,<=
同樣適用删铃。ios 7
:ios 7自帶的瀏覽器耳贬。Firefox ESR
:最新的火狐 ESR(長期支持版) 版本的瀏覽器。unreleased versions
orunreleased Chrome versions
: alpha 和 beta 版本泳姐。last 2 major versions
orlast 2 ios major versions
:最近的兩個(gè)發(fā)行版效拭,包括所有的次版本號和補(bǔ)丁版本號變更的瀏覽器版本暂吉。since 2015
orlast 2 years
:自某個(gè)時(shí)間以來更新的版本(也可以寫的更具體since 2015-03
或者since 2015-03-10
)dead
:通過last 2 versions
篩選的瀏覽器版本中胖秒,全球使用率低于0.5%并且官方聲明不在維護(hù)或者事實(shí)上已經(jīng)兩年沒有再更新的版本。目前符合條件的有IE10
,IE_Mob 10
,BlackBerry 10
,BlackBerry 7
,OperaMobile 12.1
慕的。last 2 versions
:每個(gè)瀏覽器最近的兩個(gè)版本阎肝。last 2 Chrome versions
:chrome 瀏覽器最近的兩個(gè)版本。defaults
:默認(rèn)配置> 0.5%, last 2 versions, Firefox ESR, not dead
肮街。not ie <= 8
: 瀏覽器范圍的取反风题。
注:你還可以添加
not
在任和查詢條件前面,表示取反嫉父。
瀏覽器列表
Android
for Android WebView.Baidu
for Baidu Browser.BlackBerry
orbb
for Blackberry browser.Chrome
for Google Chrome.ChromeAndroid
orand_chr
for Chrome for AndroidEdge
for Microsoft Edge.Electron
for Electron framework. It will be converted to Chrome version.Explorer
orie
for Internet Explorer.ExplorerMobile
orie_mob
for Internet Explorer Mobile.Firefox
orff
for Mozilla Firefox.FirefoxAndroid
orand_ff
for Firefox for Android.iOS
orios_saf
for iOS Safari.Node
for Node.js.Opera
for Opera.OperaMini
orop_mini
for Opera Mini.OperaMobile
orop_mob
for Opera Mobile.QQAndroid
orand_qq
for QQ Browser for Android.Safari
for desktop Safari.Samsung
for Samsung Internet.UCAndroid
orand_uc
for UC Browser for Android.kaios
for KaiOS Browser.