Browser list詳解

請移步到我的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 and node 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 or unreleased Chrome versions : alpha 和 beta 版本泳姐。

  • last 2 major versions or last 2 ios major versions :最近的兩個(gè)發(fā)行版效拭,包括所有的次版本號和補(bǔ)丁版本號變更的瀏覽器版本暂吉。

  • since 2015 or last 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 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.

  • kaios for KaiOS Browser.

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末沛硅,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子绕辖,更是在濱河造成了極大的恐慌摇肌,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件仪际,死亡現(xiàn)場離奇詭異围小,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)树碱,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進(jìn)店門肯适,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人成榜,你說我怎么就攤上這事框舔。” “怎么了赎婚?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵刘绣,是天一觀的道長。 經(jīng)常有香客問我惑淳,道長额港,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任歧焦,我火速辦了婚禮移斩,結(jié)果婚禮上肚医,老公的妹妹穿的比我還像新娘。我一直安慰自己向瓷,他們只是感情好肠套,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著猖任,像睡著了一般你稚。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上朱躺,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天刁赖,我揣著相機(jī)與錄音,去河邊找鬼长搀。 笑死宇弛,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的源请。 我是一名探鬼主播枪芒,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼谁尸!你這毒婦竟也來了舅踪?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤良蛮,失蹤者是張志新(化名)和其女友劉穎抽碌,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體背镇,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡咬展,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了瞒斩。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片破婆。...
    茶點(diǎn)故事閱讀 38,654評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖胸囱,靈堂內(nèi)的尸體忽然破棺而出祷舀,到底是詐尸還是另有隱情,我是刑警寧澤烹笔,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布裳扯,位于F島的核電站,受9級特大地震影響谤职,放射性物質(zhì)發(fā)生泄漏饰豺。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一允蜈、第九天 我趴在偏房一處隱蔽的房頂上張望冤吨。 院中可真熱鬧蒿柳,春花似錦、人聲如沸漩蟆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽怠李。三九已至圾叼,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間捺癞,已是汗流浹背夷蚊。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留翘簇,地道東北人撬码。 一個(gè)月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像版保,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子夫否,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評論 2 349

推薦閱讀更多精彩內(nèi)容