create-react-app创建的package.json中的browserslist的意义是什么

Question

采访中有人问我。我无法回答。

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

我可以看到它是一个数组。“ not ie <= 11”表示将无法在低于Internet Explorer v11的操作系统上运行。“ op_mini”必须与Opera mini相关。

但我想知道为什么要这样做。

Answer 1

什么是浏览器列表？

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

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

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

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

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

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

您可以在Browserslist 的 GitHub 存储库中找到有关它的更多信息（包括进一步的查询选项）。

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

Answer 2

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

如文档所述：

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

如果要使用ES功能，请确保指定的所有浏览器都支持该功能，否则必须手动添加polyfills。React不会自动为您执行此操作。

它不仅仅适用于 React，它还可以作为任何 javascript 技术的通用解决方案 (15认同)
不要忘记定期运行“npx browserslist@latest --update-db”。它将使用新的 caniuse-lite 版本更新您的包锁定文件。在这种情况下，您将确保“最后两个版本”或“>0.2%”将达到您的预期。 (10认同)
这里“0.2%”之类的百分比是什么意思？ (5认同)
@MahmoudMohamedZakria。这代表浏览器使用的百分比。 (2认同)