npm 包 @1stg/browserslist-config 使用教程

前言

随着前端技术的快速发展，我们的项目越来越复杂，需要面对各种不同的浏览器，因此，选择合适的浏览器列表（或者称之为 coverage）就变得至关重要。而在实际开发过程中，我们需要在不同的项目中使用相同的浏览器列表，这就需要我们将浏览器列表统一管理起来。npm 包 @1stg/browserslist-config 就是一种解决方案。

本文将详细介绍 @1stg/browserslist-config 的使用方法，以及它的内部实现。

准备工作

在开始使用 @1stg/browserslist-config 之前，我们需要确保自己已经安装了最新版本的 Node.js 和 npm。你可以通过以下命令来检查自己的版本：

$ node -v
v16.9.0

$ npm -v
6.14.13

如果版本不对，可以到 Node.js 官网 下载最新版本。

安装与配置

如果你在使用 npm 5.2 以上版本，那么只需要在项目根目录中输入以下命令即可安装 @1stg/browserslist-config：

$ npm install @1stg/browserslist-config --save-dev

安装完成后，你需要将 @1stg/browserslist-config 的配置添加到你的项目的 package.json 文件中。你可以将以下代码添加到 package.json 的 browserslist 字段中：

"browserslist": [
   "extends @1stg/browserslist-config"
],

这样，你就可以使用 @1stg/browserslist-config 提供的这个浏览器列表了。

如果你想覆盖 @1stg/browserslist-config 提供的默认配置，你可以直接将其内容复制到你的项目中的 package.json 文件的 browserslist 字段中，并进行修改。示例如下：

"browserslist": [
  "last 2 versions",
  "not dead",
  "not ie <= 11",
  "not op_mini all"
]

深入实现

如果你想深入了解 @1stg/browserslist-config 的实现原理，你可以访问 @1stg/browserslist-config 的 GitHub 仓库 了解详情。

总体上来说，@1stg/browserslist-config 的实现并不复杂。其代码仓库中存放了多个不同的配置文件，其中包括：

• production.js
• development.js
• modern.js
• legacy.js

不同的配置文件包括不同的浏览器列表，以满足开发、生产、现代浏览器和旧版浏览器的不同需求。在 package.json 中的配置 "extends @1stg/browserslist-config" 就意味着使用的是 production.js。

除了提供不同的配置文件外，@1stg/browserslist-config 还会定期更新浏览器列表，以确保最新的浏览器得到支持。

总结

通过本文，我们了解了如何使用 @1stg/browserslist-config 极其简介的实现原理。相信你已经对浏览器列表的管理有了更深入的理解。在实际开发中，你可以根据不同的场景选择不同的浏览器列表，提升项目的可维护性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/stg-browserslist-config