Version: 3.5.1

浏览器支持

¥Browser support

Docusaurus 允许站点通过浏览器列表配置定义支持的浏览器列表。

¥Docusaurus allows sites to define the list of supported browsers through a browserslist configuration.

目的

¥Purpose

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

¥Websites need to balance between backward compatibility and bundle size. As old browsers do not support modern APIs or syntax, more code is needed to implement the same functionality.

例如，你可以使用可选的链接语法：

¥For example, you may use the optional chaining syntax:

const value = obj?.prop?.val;

...不幸的是，只有 2020 年之后发布的浏览器版本才能识别。为了与早期的浏览器版本兼容，在构建生产站点时，我们的 JS 加载器会将你的代码转换为更详细的语法：

¥...which unfortunately is only recognized by browser versions released after 2020. To be compatible with earlier browser versions, when building your site for production, our JS loader will transpile your code to a more verbose syntax:

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

¥However, this penalizes all other users with increased site load time because the 29-character line now becomes 168 characters—a 6-fold increase! (In practice, it will be better because the names used will be shorter.) As a tradeoff, the JS loader only transpiles the syntax to the degree that's supported by all browser versions defined in the browser list.

默认情况下，浏览器列表通过 package.json 文件作为根 browserslist 字段提供。

¥The browser list by default is provided through the package.json file as a root browserslist field.

警告

在旧浏览器上，编译的输出将使用不受支持的（太新的）JS 语法，导致 React 无法初始化并最终得到一个只有 HTML/CSS 而没有 JS 的静态网站。

¥On old browsers, the compiled output will use unsupported (too recent) JS syntax, causing React to fail to initialize and end up with a static website with only HTML/CSS and no JS.

默认值

¥Default values

使用默认经典模板初始化的网站在 package.json 中有以下内容：

¥Websites initialized with the default classic template has the following in 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"
    ]
  }
  // ...
}

用自然语言解释，生产环境中支持的浏览器是：

¥Explained in natural language, the browsers supported in production are those:

市场占有率超过 0.5%；和

¥With more than 0.5% of market share; and
过去 24 个月内有过官方支持或更新（与 "dead" 相反）；和

¥Has official support or updates in the past 24 months (the opposite of "dead"); and
不是 Opera Mini。

¥Is not Opera Mini.

开发中使用的浏览器有：

¥And browsers used in development are:

最新版本的 Chrome 或 Firefox 或 Safari。

¥The latest version of Chrome or Firefox or Safari.

你可以使用 browserslist CLI "evaluate" 任何配置来获取实际列表：

¥You can "evaluate" any config with the browserslist CLI to obtain the actual list:

npx browserslist --env="production"

输出是生产中支持的所有浏览器。以下是 2022 年 1 月的输出：

¥The output is all browsers supported in production. Below is the output in January 2022:

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

目的​

默认值​

阅读更多​

目的

默认值

阅读更多