Browserslist 是一个好主意

作为前端开发人员，我们非常清楚不同的浏览器（和版本）支持不同的 Web 平台功能。 我们根据这些功能的支持情况以及分析数据告诉我们用户使用哪些浏览器来做出选择。 例如，如果我们的 Google Analytics 告诉我们只有 0.01% 的用户停留在 IE 9 上，也许我们会决定开始使用 Flexbox 和 .classList。

输入 Autoprefixer。 Autoprefixer 已成为 CSS 构建流程中无处不在的一部分，因为它帮助我们几乎毫不费力地实现跨浏览器支持。 即使 IE 10 仅支持较旧的 Flexbox 语法，我们也不必担心，因为 Autoprefixer 会尽力将现代语法移植到旧语法，而且它在这方面做得很好。

Autoprefixer 允许您配置要使用前缀定位的浏览器。 这意味着您不必为所有浏览器生成前缀（导致代码输出量可能比您想要的更多），而只需要为您决定支持的浏览器生成前缀。 有很多方法可以使用 Autoprefixer，但假设它是 Grunt 构建的一部分

grunt.initConfig({
  autoprefixer: {
    options: {
      options: {
        browsers: ['last 2 versions', 'ie 8', 'ie 9']
      }
    },
    your_target: {
      // Target-specific file lists and/or options go here.
    },
  },
});

如您所料，该 Autoprefixer 配置将根据所有主要浏览器的最后两个版本进行处理，并将专门对 IE 8 和 IE 9 执行必要的操作。

这很好，但是 Autoprefixer 不是唯一一个做出有关浏览器版本的选择的工具。

确实如此。

我敢肯定你们中的许多人已经使用过 Babel 或至少听说过它。 您可以编写尽可能现代的 JavaScript 代码，它会将其处理成可在旧版浏览器中运行的 JavaScript。 有一个名为 babel-preset-env 的项目，它允许您配置 Babel 将编译到的浏览器。 例如

"babel": {
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": ["Edge 15"]
        }
      }
    ]
  ]
},

我们在那里专门针对 Edge 15。 举个例子，Babel 甚至不会费心转换 const a = `string`; 中的任何内容，因为 Edge 15 支持 const 和 backticks。 但如果我们告诉它也针对 IE 10，我们会得到 var a = "string";。

Browserslist 旨在为所有需要了解您支持哪些浏览器的工具提供单一配置。

我们刚刚查看了两个可以根据支持的浏览器进行配置的主要工具：Autoprefixer 和 Babel。 将目标定位到相同的浏览器列表是否有意义？ （是的。）

输入 Browserslist.

browserl.ist 帮助您根据配置字符串确切地查看您定位的浏览器。

对于 Autoprefixer，只需拥有一个 Browserslist 配置，它就会自动使用它。

{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "IE 10"
  ]
}

这是一个在 package.json 文件中存储配置的示例。 但是，还有其他方法可以确保 Browserslist 配置可用，例如使用 BROWSERSLIST 环境变量或 .browserslistrc 配置点文件。

Babel 仍然需要 babel-preset-env.

还有其他有趣的工具使用 Browserslist。

例如，您的 linting 设置可以配置为在您使用不在 Browserslist 设置之外支持的代码时警告您。 这是通过 eslint-plugin-compat 插件 为 ESLint 完成的。

在 CSS 方面，可以使用 stylelint 和 stylelint-no-unsupported-browser-features 插件来完成相同操作。

这些事情感觉像是 Browserslist 的自然延伸，它们已经存在真的很酷。 也许更令人惊讶的是 PostCSS Normalize，它实际上基于您定位的浏览器构建了一个 CSS“重置”（Normalize 并不是真正的重置，但您知道我的意思，它处理了 CSS 中跨浏览器差异）。

如果您想了解更多信息，请查看这些项目背后的开发人员撰写的文章 Autoprefixer 7.0 和 Browserslist 2.0。

更好的是，查看一个示例 所有这些东西结合在一起的存储库，它是一个最小示例。