前端工程基礎知識點–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.