瀏覽器支援
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 個字元，是六倍的增長！（實際來說會更好，因為使用的名稱會比較短。）折衷的做法是，JS 載入程式只會將語法轉譯成瀏覽器清單中定義的所有瀏覽器版本都能支援的程度。
預設情況下，瀏覽器清單會透過 package.json 檔案作為根目錄的 browserslist 欄位提供。
警告
在舊瀏覽器上，編譯輸出會使用不支援（太新）的 JS 語法，導致 React 無法初始化，最終出現只有 HTML/CSS 而沒有 JS 的靜態網站。
預設值
使用預設經典範本來初始化的網站，在 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。
您可以使用 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