Question

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

{
    "elements": [
        {
            "dateRange": {
                "start": {
                    "month": 3,
                    "year": 2019,
                    "day": 3
                },
                "end": {
                    "month": 3,
                    "year": 2019,
                    "day": 3
                }
            },
            "clicks": 11,
            "impressions": 2453,
            "pivotValues": [
                "urn:li:sponsoredCampaign:1234567"
            ]
        },
        {
            "dateRange": {
                "start": {
                    "month": 3,
                    "year": 2019,
                    "day": 7
                },
                "end": {
                    "month": 3,
                    "year": 2019,
                    "day": 7
                }
            },
            "clicks": 1,
            "impressions": 629,
            "pivotValues": [
                "urn:li:sponsoredCampaign:1234565"
            ]
        },
        {
            "dateRange": {
                "start": {
                    "month": 3,
                    "year": 2019,
                    "day": 21
                },
                "end": {
                    "month": 3,
                    "year": 2019,
                    "day": 21
                }
            },
            "clicks": 3,
            "impressions": 154,
            "pivotValues": [
                "urn:li:sponsoredCampaign:1323516"
            ]
        }
    ],
    "paging": {
        "count": 10,
        "start": 0,
        "links": []
    }
}

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

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

Answer 1

什么是浏览器列表？

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

我们为什么想要它？

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

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

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

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

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

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

0.2%：拥有至少 0.2% 全球市场份额的所有浏览器
未死：排除过去 24 个月内没有官方支持的浏览器
not ie <= 11：排除 IE 11 及更早版本
并非 op_mini 全部：排除 Opera Mini

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

Answer 2

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

如文档所述：

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

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

更多内容，请访问：https://facebook.github.io/create-react-app/docs/supported-browsers-features

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

2 个答案:

什么是浏览器列表？

我们为什么想要它？