iT邦幫忙

2021 iThome 鐵人賽

0
Modern Web

尋覓網站開發的神兵利器系列 第 34

Extra03 - Browserslist - 配置專案執行目標環境

  • 分享至 

  • xImage
  •  

此篇為番外,未收入在本篇是因為 Browserslist 並不是個工具,而是個會常被各種轉譯器採用的一種設定方式。

使用 Browserslist 設定執行的環境並將設定共享給不同的工具。

介紹 Browserslist

Browserslist 的配置被各類工具用來判斷目標執行環境。

Browserslist 的配置為多個 query ,除了明確設定各瀏覽器或是 Node.js 環境的版本清單外,也可以採用 Browserslist 制定的規則來描述版本資訊:

> 1%
last 2 versions

上例的 queries 有 > 1%last 2 versions ,所選定的範圍為此環境版本的市占率要大於 1% 或是要是最新的兩個版本。

Browserslist 會藉由 caniuse-lite 獲取 Can I Use 的資料來判斷各個支援的環境與版本。

以上面的設定舉例,它會被轉為下面的清單:

and_chr 92
and_ff 90
and_qq 10.4
and_uc 12.12
android 92
baidu 7.12
bb 10
bb 7
chrome 92
chrome 91
chrome 90
edge 92
edge 91
firefox 90
firefox 89
ie 11
ie 10
ie_mob 11
ie_mob 10
ios_saf 14.5-14.7
ios_saf 14.0-14.4
kaios 2.5
op_mini all
op_mob 64
op_mob 12.1
opera 77
opera 76
safari 14.1
safari 14
samsung 14.0
samsung 13.0

各類工具就可以使用這些資訊決定要處理的方式。

Browserslist 的 query

使用 Browserslist 前需要先以 query 設定目標環境。

在配置檔中不同行視為不同的 query , query 間是以 or 組成, 如果在同一行設定多個 query 則會以下列規則合併:

  • 使用 , 或是 or 分隔 query ,則結果為兩個 query 的聯集。
  • 使用 and 分隔 query ,則結果為兩個 query 的交集。
  • ,orand 後面接 not ,則結果為第一個 query 的範圍扣除第二個 query 的範圍。

各個 query 的效果可以參考 query 的列表

配置 Browserslist

Browserslist 可以將配置設定於 package.json 中的 browserslist 屬性,或是獨立一個配置檔 .browserslistrc

package.json

package.json 中的 browserslist 屬性可以設定 query :

{
  "browserslist": ["> 1%", "last 2 versions"]
}

.browserslistrc

.browserslistrc 是個配置檔,每一行表示一個 query :

> 1%
last 2 versions

本文重點整理

  • 如果工具在匹配環境時需要一個個設定支援的環境,那會造成配置複雜,而且每次環境更新版本時,需要再次修改配置以符合最新的環境,使工作量增加。
  • Browserslist 幫助使用者更容易設定目標環境的範圍,避免使用特定的環境版本設定,改以 query 以各種範圍配置來設定目標執行環境,以減輕開發的負擔。

參考資料


上一篇
Extra02 - Ignore - 配置忽略的檔案與目錄
下一篇
Extra04 - Git - 程式碼版本控制
系列文
尋覓網站開發的神兵利器40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言