svelte + fetch + polyfill = IE11「だめです」

表題どおりで、svelteでSPAを丁寧に手作りしていました。

とあるAPIからデータを取得してきて描画、という要件があったので、async/await + fetch使って書くか。と夜なべして書いていました。

勿論モダンブラウザではサクサク動きます、この時点ではIE11で動作しないことは認識しています。
「polyfill.ioだけでなんとかなる時代だから便利だよなー」

polyfill.ioでES2015 + flat + promiseなどなどを選択してテストアップ！

さーて、IE11でみるか。

そうです、動かないのです。

'Promise' is undefined

は？

どうやらpolyfillだけでは動かないようです。なぜでしょう。

そうです、async/awaitです。
こいつをどうにかしないことにはどうにもなりません。

やはりbabelは必要でした。

babel/core core-jsあたりをインストールしてrollup.configのpluginに以下を追加。
出来上がりです

babel({
  extensions: ['.js', '.svelte'],
  exclude: ['node_modules/**'],
  presets: [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ],
}),

これでポリフィルは使わなくなったので、　HTML側に書いたこいつを消す。

<script src="https://polyfill.io/v3/polyfill.min.js?features=Promise%2CArray.prototype.flat%2Ces2015"></script>

これでどうにかなりました。

不思議なのが、複数APIから取得しているコンポーネント限定で起きていた問題でした。
もっと書き方がありそうな気もします。

IEで開発できるくらいにIEが高速になる未来があればよかったなー。