ブラウザ対応

Docusaurusは、サイトがbrowserslistの設定を介して対応ブラウザの一覧を定義できるようにしています。

目的

Webサイトでは、後方互換性とバンドルサイズのバランスを取る必要があります。古いブラウザは最新の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テンプレートで初期化されたWebサイトの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のドキュメントを参照するとよいでしょう。

目的​

既定値​

もっと読む​

目的

既定値

もっと読む