浏览器列表(Browserslist) 教程

浏览器列表(Browserslist) 教程

browserslist项目地址:https://gitcode.com/gh_mirrors/bro/browserslist

1. 目录结构及介绍

浏览器列表(Browserslist) 是一个用于前端工具如Autoprefixer, Babel等的共享配置，用来指定兼容哪些浏览器。其基本目录结构可能如下：

.
├── README.md         # 主要文档
├── index.js          # 入口文件，实现核心功能
├── cli.js            # 命令行接口
├── browserslist.js   # 解析查询并构建浏览器列表的文件
├── config.js         # 配置相关的代码
└── data              # 包含浏览器版本数据的目录
    ├── browsers.json
    └── ...

index.js: 主程序入口，实现了Browserslist的主要功能。

cli.js: 提供命令行界面，允许用户在终端中运行npx browserslist来检查配置。

config.js: 处理不同的配置来源，如.browserslistrc, package.json中的browserslist字段或环境变量。

data: 存储浏览器版本和市场份额等相关数据。

2. 项目启动文件介绍

由于Browserslist通常作为一个依赖库被其他工具使用，它没有传统的启动文件。你可以通过以下方式使用它的命令行工具:

npx browserslist # 在项目根目录运行以查看默认浏览器列表

或者在其他前端工具（如Webpack）中作为依赖引入，然后利用其提供的API。

3. 项目的配置文件介绍

.browserslistrc

这是Browserslist的配置文件，位于项目根目录下。它定义了要兼容的一系列浏览器查询，例如：

# .browserslistrc
defaults
> 0.5%
last 2 versions
Firefox ESR
not dead

上面的配置表示兼容defaults中的浏览器，市场份额大于0.5%，最近两个大版本，Firefox的长期支持版本，以及非废弃的浏览器。

package.json 中的 browserslist 字段

如果你不想创建单独的.browserslistrc，可以在package.json文件里添加一个browserslist字段，同样可以定义兼容性策略：

{
  "name": "your-project",
  "version": "1.0.0",
  "browserslist": [
    "defaults",
    "> 0.5%",
    "last 2 versions",
    "Firefox ESR",
    "not dead"
  ]
}

环境变量

还可以通过BROWSERSLIST环境变量设置浏览器列表，例如：

BROWSERSLIST="> 0.5%, last 2 versions" yarn build

在上述情况中，构建过程将基于给定的环境变量值来确定兼容的浏览器。

提示: 更多配置选项和最佳实践可以在项目文档中找到，包括如何处理不同环境的差异和如何分享配置。

browserslist项目地址:https://gitcode.com/gh_mirrors/bro/browserslist