- browserslist簡介與基本應用
- 如何配置browserslist
- browserslist配置如何作用於項目
一、browserslist簡介與基本應用
1.1browserslist是什么？
browserslist是用來配置項目的目標瀏覽器和nodejs版本范圍，也就是通常說的兼容哪些瀏覽器的版本。
1.2browserslist配置存在何處？
如果所有配置信息都放到了package.json中的話就在配置信息中有這樣一段配置，沒有的話手動配置；
{ "browserslist": ["> 1%", "last 2 versions", "not dead" ] }
如果每個配置都被放到單獨的一個文件中的話，創建完成的項目根目錄下就會有這樣一個文件.browserslistrc，其初始內容是這樣的：
> 1% last 2 versions not dead
1.3怎么查看browserslist配置兼容哪些瀏覽器？
在項目根目錄下通過指令： npx browserslist 查詢。
and_chr 84 and_ff 68 and_qq 10.4 and_uc 12.12 android 81 baidu 7.12 chrome 84 chrome 83 chrome 81 edge 84 edge 83 edge 18 firefox 78 firefox 77 ie 11 ios_saf 13.4-13.5 ios_saf 13.3 ios_saf 12.2-12.4 kaios 2.5 op_mini all op_mob 46 opera 69 opera 68 safari 13.1 safari 13 samsung 12.0 samsung 11.1-11.2
二、如何配置browserslist
2.1browserslist的配置語句表達了什么？
>1%
基於全球使用率統計而選擇的瀏覽器版本范圍。>=，<，<=同樣適用。
last 2 versions
最新的兩個發行版本。
not dead
通過last 2 versions 篩選的瀏覽器版本中，全球使用率低於0.5%並且官方申明不再維護或者事實上已經兩年沒有在更新的版本，不再兼容這些版本。
2.2browserslist配置依據？
從前面的配置語句中我們可以看到全球統計，那么browserslist依據的全球統計數據來源何處？
browserslist使用Can I Use網站的數據來查詢瀏覽器版本范圍，需要練習或者測試browserslist配置語句可以點擊這里前往。
2.3browserslist條件語句示例：
> 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在任和查詢條件前面，表示取反
2.4環境差異化配置：
package.json中配置
"browserslist": { "production": [ "> 1%", "ie 10" ], "development": [ "last 1 chrome version", "last 1 firefox version" ] }
.browserslistrc中配置
[production staging] > 1% ie 10 [development] last 1 chrome version last 1 firefox version
三、browserslist配置如何作用於項目
3.1查看browserslist配置兼容的瀏覽器和node版本：
npx browserslist
3.2browserslist是在不同的前端工具之間共用目標瀏覽器和node版本的配置工具，它本身之提供兼容的瀏覽器和node配置數據，這些配置還需要基於其他的實際功能插件產生作用，比如為JS轉碼的babel等。
一些處理瀏覽器和node兼容的開發插件：
Autoprefixer Babel post-preset-env eslint-plugin-compat stylelint-unsupported-browser-features postcss-normalize
3.3browerslist衍生工具
-
browserslit-ga： 該工具能生成訪問你運營的網站的瀏覽器的版本分布數據，以便用於類似
> 0.5% in my stats查詢條件, 前提是你運營的網站部署有 Google Analytics。 -
browserslist-useragent ： 檢驗 某瀏覽器的user-agent 字符串是否匹配 browserslist 給出的瀏覽器范圍。
-
browserslist-useragent-ruby ： 功能同上，ruby 庫。
-
caniuse-api： 返回支持指定特性的瀏覽器版本范圍
-
npx browserslist ：在前端工程目錄下運行上面命令，輸出當前工程的目標瀏覽器列表。