浏览器支持

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

目的

网站需要在向后兼容性和文件大小间做出平衡。 由于旧浏览器不支持现代 API 和语法，实现相同的功能会需要更多代码，但这会让所有其他用户的网站加载时间变长。 作为取舍，Docusaurus 打包工具只支持在 browserslist 中定义的浏览器版本。

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

caution

在旧浏览器中，编译后的输出将使用不支持的（过新的）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。

您可以使用 browserlist cli 解析任意配置，并得到真正的浏览器列表：

npx browserslist --env="production"

输出信息为生产环境中所支持的全部浏览器列表。 下面是在 2021 年 5 月的输出：

and_chr 89and_uc 12.12chrome 89chrome 88chrome 87edge 89edge 88firefox 86ie 11ios_saf 14.0-14.5ios_saf 13.4-13.7safari 14safari 13.1samsung 13.0

了解更多

要深入了解，您可访问 browserslist 文档，特别是关于有效查询值及最佳实践的内容。