支持的浏览器

优质

小牛编辑

137浏览

2023-12-01

Docusaurus 允许网站通过浏览器列表配置（browserslist configuration）来定义其要支持的所有浏览器。

目的

网站需要在向后兼容性和文件体积之间做平衡。由于旧的浏览器不支持现代的 API 或语法，因此需要更多代码才能实现相同的功能，这会增加网站的加载时间，从而对所有其他用户造成不利的影响。为权衡起见，Docusaurus 打包工具仅支持浏览器列表中所定义的浏览器版本。

默认情况下，浏览器列表是通过 package.json 文件中的 browserslist 字段来设置的。

caution

Docusaurus 编译后的输出文件所使用的是不被老旧的浏览器所支持的（较新的）JS 语法，从而导致 React 无法初始化，用户最后只能看到没有 JS 功能的 HTML/CSS 网站。

默认值

使用默认的 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 个月中仍在获得官方的支持或更新（也就是还没“死”）；并且
不是 Opera Mini 浏览器。

在开发环境中支持的浏览器是：

最新版本的 Chrome 或 Firefox 或 Safari。

你可使用 browserlist 的命令行工具 "evaluate" 来对任何配置进行“求值”，从而获得实际的浏览器列表：

npx browserslist --env="production"

以下输出是生产环境中所支持的所有浏览器。该输出是 2021 年 5 月份运行的结果：

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

了解更多

你可能希望访问 browserslist 文档以了解更多规范，尤其是该工具所能接受的查询值和最佳用法。