浏览器支持

道格龙（Docusaurus）允许网站通过 browserslist 配置来定义支持的浏览器列表。

目的

网站需要在向后兼容性和打包文件体积之间取得平衡。由于旧版浏览器不支持现代 API 或语法，因此需要更多代码来实现相同的功能。

例如，你可能使用了可选链语法：

const value = obj?.prop?.val;

...不幸的是，只有 2020 年之后发布的浏览器版本才认识这个语法。为了兼容更早的浏览器版本，在为生产环境构建网站时，我们的 JS 加载器会将你的代码转译成更冗长的语法：

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 加载器只会将语法转译到浏览器列表中定义的所有浏览器版本都支持的程度。

默认情况下，浏览器列表通过 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 文档以获取更多规范，特别是可接受的查询值和最佳实践。