前端工程基礎知識點--Browserslist (基於官方文檔翻譯）

總結不出更好的了，感受官方文檔已經寫得夠清楚了，翻譯的很差，請你們斧正

簡介

browserslist 是在不一樣的前端工具之間共用目標瀏覽器和 node 版本的配置工具。它主要被如下工具使用：

• Autoprefixer
• Babel
• post-preset-env
• eslint-plugin-compat
• stylelint-unsupported-browser-features
• postcss-normalize

browserslist示例 演示了上面列舉的每一個工具是如何使用 browserslist 的。全部的工具將自動的查找當前工程規劃的目標瀏覽器範圍，前提是你在前端工程的 package.json 裏面增長以下配置：

{
  "browserslist": [
    "last 1 version",
    "> 1%",
    "maintained node versions",
    "not dead"
  ]
}
複製代碼

或者在工程的根目錄下存在.browerslistrc配置文件（內容以下）：

# 註釋是這樣寫的，以#號開頭
last 1 version
> 1%
maintained node versions
not dead
複製代碼

開發者經過設置瀏覽器版本查詢範圍(eg. last 2 versions)，使得開發者不用再頻繁的手動更新瀏覽器版本。browserslist 使用 Can I Use 網站的數據來查詢瀏覽器版本範圍。

browserslist 提供在線的查詢條件練習網站，下面會用到，點擊 這裏 前往。

browerslist 衍生的工具

• browserslit-ga： 該工具能生成訪問你運營的網站的瀏覽器的版本分佈數據，以便用於相似> 0.5% in my stats查詢條件, 前提是你運營的網站部署有 Google Analytics。

• browserslist-useragent ： 檢驗 某瀏覽器的user-agent 字符串是否匹配 browserslist 給出的瀏覽器範圍。

• browserslist-useragent-ruby ： 功能同上，ruby 庫。

• caniuse-api： 返回支持指定特性的瀏覽器版本範圍

• npx browserslist ：在前端工程目錄下運行上面命令，輸出當前工程的目標瀏覽器列表。

查詢來源

browerslist 將使用以下配置文件限定的的瀏覽器和 node 版本範圍：

1. 工具 options，例如 Autoprefixer 工具配置中的 browsers 屬性。
2. BROWERSLIST 環境變量。
3. 當前目錄或者上級目錄的browserslist配置文件。
4. 當前目錄或者上級目錄的browserslistrc配置文件。
5. 當前目錄或者上級目錄的package.json配置文件裏面的browserslist配置項（推薦）。
6. 若是上述的配置文件缺失或者其餘因素致使未能生成有效的配置，browserslist 將使用默認配置> 0.5%, last 2 versions, Firefox ESR, not dead。

最佳實踐

• 僅僅當你在特定瀏覽器上開發相似於信息亭之類的 web app 的時候，才能夠用相似last 2 Chrome versions的查詢條件來鎖定特別具體的瀏覽器品牌和版本。市面上有各類各樣的瀏覽器，同時瀏覽器的版本碎片化也很嚴重，若是你在開發一款通用的 webapp，那就應該考慮瀏覽器多樣性致使的兼容問題。
• 若是你不想用 browserslsit 的默認設置，推薦使用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（這裏沒懂啥意思，才疏學淺見諒）.
• 不移除某些瀏覽器，是由於你不瞭解它們的分佈。Opera mini 在非洲有一億用戶，全球範圍內，它也比 微軟的 Edge 瀏覽器更加流行。QQ 瀏覽器的使用量比桌面端的火狐和 Safari 瀏覽器加起來還多。

查詢條件列表

你能夠用以下查詢條件來限定瀏覽器和 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在任和查詢條件前面，表示取反

Debug

直接在工程目錄下運行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 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.

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環境變量中直接指定配置文件的路徑 。

Shareable Configs

可使用以下寫法，從另一個輸出 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
複製代碼

Custom Usage Data

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.

JS API

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"
複製代碼

Coverage

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
複製代碼

Cache

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.