包含 .browserslistrc 和 browserslist

简介

在开发现代化 Web 应用程序时，我们经常需要确定应用程序的目标浏览器和设备。同时，我们还需要确保我们不会为所有浏览器生成冗余的代码。

.browserslistrc 和 browserslist 就是为此而设的。它们是两个用于定义目标浏览器和设备列表的工具，可以支持在许多前端工具中使用。.browserslistrc 是一个文件，其中包含了要考虑的浏览器和设备列表。

添加 .browserslistrc 文件

为了使用 .browserslistrc 文件，我们需要在根目录下创建一个 .browserslistrc 文本文件。

在文件中，我们可以指定目标浏览器和设备列表:

# 支持浏览器的列表
last 2 versions
not dead

# 支持的 node.js 版本
node 12.16.1

在此示例中，我们定义了最新两个版本的所有浏览器（但不包括已停用的浏览器），以及 node.js 版本 12.16.1。

安装和使用 browserslist 库

在安装和使用 browserslist 库之前，我们需要确保我们的 package.json 文件已更新。我们可以通过运行以下命令来添加库：

npm install --save-dev browserslist

然后，我们就可以在 JavaScript 中使用 browserslist 库来查询所选浏览器或设备的版本：

const browserslist = require('browserslist');

const selectedBrowsers = browserslist();
console.log(selectedBrowsers);

在此示例中，我们查询了 .browserslistrc 文件中定义的浏览器和设备列表。如果我们的目标浏览器发生更改，我们只需要更新 .browserslistrc 以及运行查询函数即可。

总结

通过使用 .browserslistrc 和 browserslist，开发人员可以轻松定义 Web 应用程序的目标浏览器和设备列表，并支持许多前端工具。这简化了开发，并确保我们不会为目标浏览器和设备生成冗余的代码。