create-react-app 创建的 package.json 中的 browserslist 有啥意义

Posted 2023-03-07

【中文标题】create-react-app 创建的 package.json 中的 browserslist 有啥意义

【英文标题】：What is the significance of browserslist in package.json created by create-react-appcreate-react-app 创建的 package.json 中的 browserslist 有什么意义

【发布时间】：2019-08-25 21:11:13

【问题描述】：

我在一次采访中被问到这个问题。我无法回答。

"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]

我可以看到它是一个数组。 "not ie

但我想知道为什么需要它。

【问题讨论】：

你也可以运行npx browserslist来查找支持的浏览器

【参考方案1】：

这是一个 React 配置选项，用于了解构建过程应针对哪些浏览器。

正如文档所说：

browserslist 配置控制输出的 javascript，以便发出的代码与指定的浏览器兼容。

如果您打算使用 ES 功能，请确保指定的所有浏览器都支持它，否则您必须手动包含 polyfill。 React 不会自动为你做这件事。

查看更多信息：https://facebook.github.io/create-react-app/docs/supported-browsers-features 和 https://create-react-app.dev/docs/supported-browsers-features/

【讨论】：

它不仅适用于 React，它还可以作为任何 javascript 技术的通用解决方案

0.2% 这样的百分比在这里是什么意思？

@MahmoudMohamedZakria。这代表浏览器使用的百分比。

别忘了定期运行npx browserslist@latest --update-db。它将使用新的 caniuse-lite 版本更新您的包锁定文件。在这种情况下，您将确定“最后两个版本”或“>0.2%”将针对您的预期。

【参考方案2】：

什么是浏览器列表？

Browserslist 是一个工具，它允许通过在配置文件中指定“查询”来指定前端应用程序应支持的哪些浏览器。它被 React、Angular 和 Vue 等框架/库使用，但不限于它们。

我们为什么要它？

在开发过程中，我们希望使用最新的 javascript 功能（例如 ES6），因为它使我们的工作更轻松，代码更简洁，性能可能更好。

随着 javascript 的发展，浏览器不会以同样的速度支持新功能，例如，并非所有浏览器都内置了对 ES6（又名 ES2015）的支持。通过使用 browserslist，编译器/捆绑器知道您想要支持哪些浏览器，因此他们可以将浏览器“分组”到不同类别并生成单独的捆绑包，例如：

Legacy Bundle：包含 polyfill，更大的包大小，与不支持 ES6 的旧浏览器兼容。 现代捆绑包：更小的捆绑包大小，针对现代浏览器进行了优化。

所以我们的入口点（例如 index.html）的生成方式会根据用户当前使用的浏览器加载所需的包。

这个过程由 Angular、Vue 和 React 完成。将来，捆绑工具可能会根据浏览器的不同生成更多捆绑包，每组浏览器一个捆绑包。生成更多捆绑包可以进一步优化您的应用，但代价是构建速度更慢（且更复杂），这是一种权衡。

---

让我们看看您的示例中的每个单独的查询：

0.2%：

拥有至少 0.2% 全球市场份额的所有浏览器

未死：

排除过去 24 个月内没有官方支持的浏览器

not ie 排除 IE 11 及更早的版本

not op_mini all：

排除 Opera Mini

您可以在Browserslist's GitHub repository 中找到有关它的更多信息（包括更多查询选项）。

【讨论】：

为什么很多都排除“opera mini”？

@jamesemanon 因为 Opera Mini 没有内置对 ES6 功能的支持，所以如果您使用 ES6 并希望您的应用在 Opera Mini 上运行，您需要为其添加 polyfill，这意味着您需要 1) 为它构建一个单独的包，或者 2) 强制您的整个包包含 ES5 polyfills。选项 1) 使您的构建速度几乎慢了两倍（我不确定所有 js 框架都可以做到这一点），而选项 2) 使您的包大小相当大，这对现代浏览器用户来说是不利的。选项 3) 是排除不支持 ES6 的浏览器。

例如未死：排除过去 24 个月内没有官方支持的浏览器 > 这意味着捆绑器将为未死选项生成单独的捆绑包@Alisson