GatsbyJSのIE11対応

GatsbyJS の IE11 対応

GatsbyJS で IE11 対応するにはどうすればいいか調べました。
かなり簡単に対応できるのでまだしてない方は是非どうぞ。

1. npm の追加

yarn add babel-preset-gatsby で babel の設定をまとめたものをプロジェクトに追加します

2. .babelrc の作成

プロジェクトルートに .babelrc ファイルを作成します。

↓ のコードをそのままコピー&ペーストします。

{
 "presets": [
  [
   "babel-preset-gatsby",
   {
    "target": {
     "browsers": [
      ">0.25%",
      "not dead",
      "IE 11"
     ]
    }
   }
  ]
  ]
 }

3. 足りない polyfill を追加

fetch と Promise が不足しているので gatsby-browser.js 等で import します。
私は全ページで読み込む Layout.jsx に polyfill.io への script タグを追加しました。

<Helmet>
 <script src="https://polyfill.io/v3/polyfill.min.js?features=fetch%2CPromise"></script>
</Helmet>

4. 注意点

1 ～ 3 の設定をしても開発環境では画面が白くなります

gatsby build && gatsby serve で本番用モジュールを作成して動作確認してください。

私は最後の注意点に気が付かなくてかなり迷いました。