简介
browserslist-config-google 是一个用于 Browserslist 的配置文件，其包含了谷歌公司对其产品所支持的浏览器和版本范围。使用该配置文件，我们可以更方便地在我们的项目中，根据不同浏览器的版本号添加相关的样式前缀。
安装
可以通过 npm 进行安装：
npm install --save-dev browserslist-config-google
使用
要使用 browserslist-config-google，我们需要在项目中进行配置。通常情况下，我们将其放入 package.json 文件中的 browserslist 字段中。示例如下：
{
"browserslist": [
"extends browserslist-config-google"
]
}上面的示例中，我们定义了一个 browserslist 配置，并继承了 browserslist-config-google 配置。
除此之外，你还可以在项目的 .browserslistrc 文件中配置：
extends browserslist-config-google
这样，当我们在项目中使用类似于 Autoprefixer 或者 PostCSS 这样的工具时，它们就会自动读取该配置文件并为我们生成相应的 CSS 样式前缀。
示例
假设我们有如下的 CSS 规则：
body {
display: flex;
}如果我们想要自动生成针对不同浏览器版本的 CSS 前缀，我们可以使用 Autoprefixer。在这里，我们将其作为 PostCSS 插件来使用：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------------ - ------------------------
----- --- - -
---- -
-------- -----
-
--
--------- ------------ --
------------- - ----- --------- --
------------ -- -------------------------当我们运行上述代码时，会自动生成以下的 CSS：
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}在这里，-webkit-box 和 -ms-flexbox 分别针对 Safari 和 IE 浏览器进行了前缀处理。
总结
browserslist-config-google 可以帮助我们更方便地管理我们的项目中的 CSS 样式前缀。通过本文的介绍，相信你已经掌握了如何使用该配置文件，并且可以更好地利用它来提高我们的工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/50549