简介
@shopify/browserslist-config 是一个通用的浏览器支持列表，支持的浏览器版本包括 Chrome、Firefox、Safari、Edge 和 IE 等，适用于前端开发人员在编写代码时统一浏览器版本的选择。
安装
为了使用 @shopify/browserslist-config 包，你需要先安装它。使用下面的命令，就可以安装：
npm install --save-dev @shopify/browserslist-config
使用
你可以在你的项目中通过以下两种方式使用 @shopify/browserslist-config。
方式一：通过 package.json 文件
在 package.json 文件中，添加下面这一行：
"browserslist": [ "extends @shopify/browserslist-config" ]
在这种方式下，@shopify/browserslist-config 将被作为你的默认浏览器支持列表。你也可以根据自己的需要对它做额外的配置，比如禁用特定浏览器：
"browserslist": [ "extends @shopify/browserslist-config", "not dead" // 禁用已经停止维护的浏览器 ]
方式二：直接使用
你可以在你的项目根目录下创建一个名为 .browserslistrc 的文件，并在其中添加下面这一行：
extends @shopify/browserslist-config
这样 @shopify/browserslist-config 就会被作为你的默认浏览器支持列表，在你的项目中直接使用。
示例代码
-- -------------------- ---- -------
-- --------------- --- ---- --
--------- -
--------------- -------------
-
------ ---------------------- ----- -
---- -
----------------- ------
-
-在上面的 CSS 代码中，我们使用了 animation-name 和 @media 新特性。但是这些新特性并不是所有浏览器都支持的，@shopify/browserslist-config 就可以帮助我们选择一个通用的浏览器支持列表，以确保我们的代码能够在多数浏览器上正常工作。
总结
在学习了使用 @shopify/browserslist-config 的方法后，我们可以使用它来统一选择浏览器版本，从而让我们的代码能够在多数浏览器上正常工作。同时，我们还可以在自己的项目中做出额外配置，根据自己的需要禁用某些浏览器，以使我们的代码更加优秀。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3cd9aedbf7be33b25670bb