Help us understand the problem. What is going on with this article?

GatsbyJSのIE 11対処方法

GatsbyJS の IE11 対応

GatsbyJS で IE11 対応するにはどうすればいいか調べました。

1. npm の追加

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

2. .babelrc の作成

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

  "presets": [
        "target": {
          "browsers": [
            "not dead",
            "IE 11"

3. 足りない polyfill を追加

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

  <script defer src=""></script>

4. 注意点

1 ~ 3 の設定をしても開発環境では画面が白くなります
gatsby build && gatsby serveで本番用モジュールを作成して動作確認してください。



npmモジュール公開してみた @mako-tos/gatsby-transformer-for-microcms @mako-tos/gatsby-images-microcms
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away