前端如何做好项目规范（二）-五八三

本文是前端项目规范系列第二篇文章，主要介绍一下 Browserslist

Browserslist 是什么

browserslist 是一个用于在前端开发中确定要支持的目标浏览器和 Node.js 版本的工具。它允许开发者根据目标用户的浏览器市场份额和特定要求来配置其项目的浏览器兼容性策略。

为什么用 Browserslist

可以帮助我们在浏览器兼容性和包体积大小之间保持适当的平衡

我们用vuecli 创建一个vue项目，我们会发现 browserslist 的配置如下

> 1%
last 2 versions
not dead

not ie 11

此时我们build之后，会发现包体积大小如下

但是我们做的是一个内部系统，用户群体使用的都是 chrome 浏览器，那么我们就可以直接更改我们的 browserslist 配置为 last 10 Chrome versions，此时再进行build，会发现包体积会减小。

我们在实际项目开发中，可以根据业务进行动态调整 browserslist 的配置。

它是很多工具的前提

它会被我们熟知的很多前端工具使用，比如 babel，autoprefixer，postcss-preset-env等等。

比如 babel 会根据它来决定如何进行编译，需要哪些 polyfill等等。这也是上述例子中，为什么我们改变了 browserslist 的配置，包的体积为什么会有变化的原因。

Browserslist 基本使用

使用方式

配置文件

.browserslistrc 文件或者 browserslist 文件
```
> 0.5%
last 2 versions
Firefox ESR
not dead
```

package.json 中 browserslist字段

"browserslist": [ 
    "> 0.5%",
    "last 2 versions",
    "Firefox ESR",
    "not dead",
 ]

JS API 和命令行，这里不过多作已介绍，详情可前往 github 查看。

查询语法

选择具有特定使用情况的浏览器版本

> 5% // 所有版本中拥有超过 5% 全球受众的版本
> 5% in US // 所有版本中拥有超过 5% 美国受众的版本

选择最近的浏览器版本

last 2 versions // 每个浏览器的最近两个版本
last 2 Chrome versions // Chrome浏览器的最近两个版本
since 2020 // 从 2020 年开始发布的版本
last 1 years // 最近一年发布的浏览器版本
unreleased versions // 未发布的版本

选择特定的浏览器版本

Chrome 113 // Chrome浏览器的103版本
Firefox > 20 // Firefox 中大于 20 的版本
Firefox < 100 // Firefox 中小于 100 的版本
Chrome 20-100 // Chrome浏览器的20-100版本
Firefox ESR // Firefox 长期支持版

选择支持特定功能的浏览器版本

supports css-grid // 支持 CSS Grid 布局的版本
supports const // 支持 const 定义变量的版本

合并查询

> 0.5% or last 2 versions // or 代表两个查询的并集
> 0.5%, last 2 versions // , 与 or 的语法相同
> 0.5% and last 2 versions // and 代表两个查询的交集

取反查询 not
需要注意的是不能以 not 开头，not的左侧查询永远是 and

> 0.5% or not last 2 version // 版本中拥有超过 0.5% 全球受众的版本与不是浏览器的最近两个版本的交集
> 0.5% and not last 2 version // 
// 上述两个查询范围一致

选择特定的 Node.js 版本

node 10 // 最新的 10.x.x 版本的 Node.js。
node > 16 // 所有高于 16.0.0 版本的 Node.js。
last 2 node versions // 最近两个 Node.js 发布版本。
last 2 node major versions // 最近的两个主要版本的 Node.js 发布版本。

我们可以在 browserslist 提供的 playground 中去写更多的查询语句去验证，同时也可以看到命中的浏览器版本在特定范围的占比情况。

最佳实践

browserslist 提供了一个 defaults 的查询，为大多数用户提供了合理的配置。
defaults 的查询其实是 > 0.5%, last 2 versions, Firefox ESR, not dead 的缩写。
浏览器占比全世界用户 88.8%。

环境变量

我们可以为各种环境指定不同的浏览器查询，browserslist 将根据 BROWSERSLIST_ENV 或 NODE_ENV 变量选择查询。

.browserslistrc 文件

[production]
> 1%
not dead


[development]
last 1 chrome version
last 1 firefox version

[ssr]
node 12

写在最后

本文主要介绍了 browserslist 的作用以及使用方式，工作中根据业务进行动态的调整 browserslist 配置，做好包体积与兼容性的平衡。

文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。

THE END

前端
# 前端 # 浏览器 # 性能优化

前端如何做好项目规范（二）