Extra03 - Browserslist - 配置专案执行目标环境

此篇为番外,未收入在本篇是因为 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 以各种范围配置来设定目标执行环境,以减轻开发的负担。

参考资料


<<:  JS 33 - 在触控装置侦测手势的滑动方向!

>>:  以终为始

Day24. form_tag 与 simple_form_for 的用法 - 表单 part2

前一天,我们使用了simple_form_for提到了新增表单写法,而今天要讲一个上传情境。这个上传...

[13th][Day15] nil

nil 空值 什麽? nil 是一种资料型态? 还是 nil 值? 你在跟我开玩笑吗? 不只是 go...

[Day6] 注册API – model之AbstractUser

各位夥伴们大家好,今天是我们进入API阶段的第一天,在撰写API的逻辑之前,我们需要先到user\m...

指标

Golang 指标 研究到一半突然发现了一个很久很久没看到的词,「指标」! 我印象中 印象中 印象中...

Day42 ( 游戏设计 ) 九宫挌拼图

九宫挌拼图 教学原文参考:九宫挌拼图 这篇文章会介绍,如何在 Scratch 3 里使用变数、清单、...