在 browserslist 中，拥有不同环境配置的意义何在？答案

【问题标题】：In browserslist, what is the point of having different environments configurations?在 browserslist 中，拥有不同环境配置的意义何在？
【发布时间】：2021-06-12 16:31:09
【问题描述】：

简介：browserslist 是一种配置，用于让其他开发人员、包、插件等知道您的项目支持哪些浏览器。这是通过查询完成的，并且有一种方法可以将这些查询拆分到不同的环境中。

{
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
}

假设我使用了开发配置支持但生产不支持的 javascript 函数。

我的问题是：那么，如果我发现生产配置可能出现在开发早期未检测到的错误，那么在生产和开发之间拆分配置有什么意义？（是因为它提供了编译时间的速度或类似的优势吗？）

【问题讨论】：

标签： javascript webpack configuration environment-variables

【解决方案1】：

生产：这将缩小您的代码以实现快速网络性能，并具有生产内置功能

例如。在您的 CSS 样式中，您应该将所有 CSS 代码包装在一个文件中，或者在您决定部署项目时将 MiniCssExtractPlugin 包装起来

开发：这将在构建项目时提高生产力

例如。你应该有一个 DevServer 和 StylingLoaders 将样式放在 DOM 中，当你部署项目时，你可以实现 Css Plugin to create a file

您的生产配置给您一个错误，因为它可能需要更新一些依赖项或 npm 包

【讨论】：

我了解生产环境和开发环境之间的区别。根据某些浏览器，我的问题与查找可能的错误或不兼容更相关。例如：如果我想在 prod 中支持 IE 10，但它不适用于我使用的某些 css 属性，我如何使用 "development": [ "last 1 chrome version","last 1 firefox version","last 1 safari version" ] 检测到它？我不应该在该数组中包含 IE10 吗？还是由其他加载器（如 babel）使用 browserslist 在内部处理？