本博文是翻譯:https://github.com/browserslist/browserslist的內容。
Vue-cli官方文檔開發模塊的瀏覽器兼容這一塊,提到了browserslist,原文如下:
你會發現有
package.json
文件裏的browserslist
字段 (或一個單獨的.browserslistrc
文件),指定了項目的目標瀏覽器的範圍。這個值會被 @babel/preset-env 和 Autoprefixer 用來確定需要轉譯的 JavaScript 特性和需要添加的 CSS 瀏覽器前綴。現在查閱這裏瞭解如何指定瀏覽器範圍。
下面是來自:https://github.com/ai/browserslist的官方文檔翻譯的內容:
Browserslist
在不同的前端工具之間共享目標瀏覽器和Node.js版本的配置。它用於:
當您將以下內容添加到package.json文件中時,所有工具都會自動找到目標瀏覽器:
"browserslist": [
"defaults",
"not IE 11",
"not IE_Mob 11",
"maintained node versions",
]
或者在 .browserslistrc 配置文件中配置:
# Browsers that we support
defaults
not IE 11
not IE_Mob 11
maintained node versions
開發人員在設置版本列表後,比如設置了
last 2 version
(最後2個版本),可以避免手動更新版本.
Browserslist將從配置文件中去查找:browserslist配置文件,.browserslistrc配置文件,或者package.json文件中的browserslist字段,或者各種環境配置等。
Browserslist Example這個倉庫顯示了各個工具如何使用Browserslist。
目錄
- 工具
- 最佳實踐
- 查詢指令
- 配置文件
- 可共享的配置
- 不同環境下的配置
- 自定義使用數據
- JS API
- 環境變量
- 緩存
工具
- browserl.ist 是用於檢查某些查詢將選擇哪些瀏覽器的在線工具.
browserslist-ga
andbrowserslist-ga-export
download your website browsers statistics to use it in > 0.5% in my stats query.- browserslist-useragent-regexp將Browserslist查詢編譯到RegExp以測試瀏覽器useragent。
- browserslist-useragent-ruby是一個Ruby庫,用於按用戶代理字符串檢查瀏覽器是否與Browserslist相匹配。
- browserslist-browserstack爲Browserslist配置中的所有瀏覽器運行BrowserStack測試。
- caniuse-api返回支持某些特定功能的瀏覽器.
在項目目錄中運行npx browserslist
以查看項目的目標瀏覽器。 此CLI工具是內置的,可在具有Autoprefixer的任何項目中使用.
最佳實踐
- 下面是一個默認查詢,它爲大多數用戶提供了合理的配置:
"browserslist":{
defaults
}
- 如果要更改我們推薦的默認瀏覽器集,請將
last 2 versions
、not dead
與使用編號(如>0.2%
)合併。這是因爲last n versions
本身不會添加流行的舊版本,而只使用高於 0.2% 的百分比,從長遠來看,會使流行的瀏覽器更受歡迎。就像我們使用Internet Explorer 6一樣,我們可能會陷入壟斷和停滯狀態。請謹慎使用此設置。- 僅當您使用一個瀏覽器爲信息資訊製作網絡應用程序時,才直接選擇瀏覽器(最近2個Chrome版本)。 市場上有很多瀏覽器。 如果您要製作通用的Web應用程序,則應尊重瀏覽器的多樣性。
- 不要因爲不瞭解瀏覽器就刪除它們。Opera Mini在非洲擁有1億用戶,在全球市場上比微軟Edge更受歡迎。中國QQ瀏覽器的市場份額比Firefox和Safari加起來還要大。
查詢指令
Browserslist將使用來自以下來源之一的瀏覽器和Node.js版本查詢:
- 當前目錄或父目錄中package.json文件中的
browserslist
字段配置。 我們建議採用這種方式。- 在
.browserslistrc
或者browserslist
配置文件中配置。- BROWSERSLIST環境變量中配置。
- 如果以上方法未產生有效結果,則Browserslist將使用默認值:
>0.5%,last 2 versions,Firefox ESR,not dead
.
組合查詢
or組合器可以使用關鍵字
or
或者使用,
,last 1 version or >1%
與last 1 version , >1%
的表示方式是一樣的。
and
支持查詢組合來執行前一個查詢的交集:last 1 version and >1%
如下所示,有3種不同的方法來組合查詢。首先,您從單個查詢開始,然後我們將這些查詢組合起來以得到最終的列表:
顯然,您不能從not
組合器開始,因爲沒有左側查詢可以將其與之合併。
查詢組合器類型 | 圖表表示 | 示例 |
---|---|---|
or/, combiner (union) | 並集 | > .5% or last 2 versions / > .5%, last 2 versions |
and combiner (intersection) | 交集 | > .5% and last 2 versions |
not combiner (relative complement) | not | > .5% and not last 2 versions / .5% or not last 2 versions / .5%, not last 2 versions |
測試查詢的一種快速方法是在終端中執行
npx browserslist '> 0.5%, not IE 11'
。
全部列表
可以通過查詢指定瀏覽器和Node.js版本(不區分大小寫):
- defaults: Browserslist’s default browsers (> 0.5%, last 2 versions, Firefox ESR, not dead).
>
5%: browsers versions selected by global usage statistics. >=, < and <= work too.
調試
在終端中運行
npx browserslist
命令,查看您的查詢選擇了哪些瀏覽器:
and_chr 78
and_ff 68
and_qq 1.2
and_uc 12.12
android 76
baidu 7.12
chrome 79
chrome 78
chrome 77
chrome 49
edge 18
edge 17
firefox 71
firefox 70
firefox 68
ie 11
ie_mob 11
ios_saf 13.3
ios_saf 13.2
ios_saf 13.0-13.1
ios_saf 12.2-12.4
kaios 2.5
op_mini all
op_mob 46
opera 64
opera 63
safari 13
safari 12.1
safari 5.1
samsung 10.1
samsung 9.2
瀏覽器
名稱不區分大小寫:
- 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.
配置文件
package.json
{
"private": true,
"dependencies": {
"autoprefixer": "^6.5.4"
},
"browserslist": [
"last 1 version",
"> 1%",
"IE 10"
]
}
.browserslistrc
# Browsers that we support
last 1 version
> 1%
IE 10 # sorry