npm 包 @jamieconnolly/browserslist-config 使用教程

前言

在前端开发中，处理浏览器兼容性问题是一个必不可少的环节。为了方便处理不同浏览器的兼容性问题，可以使用 @jamieconnolly/browserslist-config 这个 npm 包。

@jamieconnolly/browserslist-config 是什么？

@jamieconnolly/browserslist-config 是一个浏览器兼容性配置的 npm 包。它可以帮助你快速选择需要支持的浏览器版本，自动统一不同平台的浏览器使用数据，从而避免一些复杂的浏览器兼容性问题。一旦你使用了这个包，就可以简化配置文件并且可重用。

@jamieconnolly/browserslist-config 的使用方法

步骤 1：安装 @jamieconnolly/browserslist-config 包

在终端中输入以下命令：

npm install @jamieconnolly/browserslist-config --save-dev

步骤 2：在你的项目中使用

打开你的项目中的 .browserslistrc 文件，并在其中引用 @jamieconnolly/browserslist-config，如下所示：

extends @jamieconnolly/browserslist-config

步骤 3：选择需要兼容的浏览器版本

在 .browserslistrc 文件中，可以选择需要兼容的浏览器版本。你可以在 browserslist 的 GitHub 页面上找到所有可用的浏览器。

例如，你可以选择支持最新的两个浏览器版本和市场上的 5%。.browserslistrc 文件可以这么写：

extends @jamieconnolly/browserslist-config

last 2 versions
> 5%

此时，你就不需要在项目中添加浏览器前缀。

示例代码

假设你使用了 @jamieconnolly/browserslist-config，你可以这样写你的 CSS：

body {
  display: grid;
}

编译后的 CSS 将包含浏览器前缀，如下所示：

body {
  display: -webkit-box;
  display: -ms-grid;
  display: grid;
}

结语

通过 @jamieconnolly/browserslist-config 包，你可以快速选择需要支持的浏览器版本，减少不同平台的浏览器使用数据的差异，从而更快地解决前端开发中的浏览器兼容性问题。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e381e8991b448e06fe