第2章 Docusaurus 浏览器支持配置详解

版本：2.x 浏览器支持 Docusaurus 允许网站通过 browserslist 配置来定义支持的浏览器列表。 目的 网站需要在向后兼容性与包体积之间取得平衡。由于旧版浏览器不支持现代 API 或语法，要实现相同功能就需要更多代码。 例如，你可以使用可选链语法： const value = obj?.prop?.val;
... 遗憾的是，只有 2020 年及以后发布的浏览器版本才识别这种语法。为了兼容更早的浏览器版本，在生产环境构建网站时，我们的 JS loader 会将你的代码转译为更冗长的语法： var _obj, _obj$prop;

const value =
(_obj = obj) === null || _obj === void 0
? void 0
: (_obj$prop = _obj.prop) === null || _obj$prop === void 0
? void 0
: _obj$prop.val;
然而，这会因代码体积膨胀而拖累其他用户，增加网站加载时间，因为原本 29 个字符的一行变成了 168 个字符——足足增加了 6 倍！（实际上情况会更好些，因为压缩后变量名会更短。）作为一种权衡，JS loader 只会将语法转译到浏览器列表中定义的所有浏览器版本都支持的级别。 浏览器列表默认通过 package.json 文件中的根级 browserslist 字段提供。 警告在旧版浏览器上，编译后的输出可能使用其不支持（过新）的 JS 语法，导致 React 初始化失败，最终得到一个仅包含 HTML/CSS 而无 JS 的静态网站。 默认值 使用默认 classic 模板初始化的网站，其 package.json 中包含如下内容： package.json{
"name": "docusaurus",
// ...
"browserslist": {
"production": [">0.5%", "not dead", "not op_mini all"],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
// ...
}
用自然语言解释，生产环境支持的浏览器需满足以下条件： 市场份额超过 0.5%；且 在过去 24 个月内获得官方支持或更新（即非“dead”）；且 不是 Opera Mini。 开发环境使用的浏览器则是： Chrome 或 Firefox 或 Safari 的最新版本。 你可以使用 browserslist CLI 来“评估”任何配置，以获取实际的浏览器列表： npx browserslist --env="production"
输出结果即为生产环境支持的所有浏览器。以下是 2022 年 1 月的输出： and_chr 96
and_uc 12.12
chrome 96
chrome 95
chrome 94
edge 96
firefox 95
firefox 94
ie 11
ios_saf 15.2
ios_saf 15.0-15.1
ios_saf 14.5-14.8
ios_saf 14.0-14.4
ios_saf 12.2-12.5
opera 82
opera 81
safari 15.1
safari 14.1
safari 13.1
了解更多​ 如需更多配置说明，可以查阅 browserslist 官方文档，尤其是支持的查询写法和最佳实践部分。