Vue + TypeScript でFetchしたい時のIE対応

経緯

機械学習を使った推定を返させるWebAPIをPythonで作って、それにリクエストを投げて結果を表示するVueコンポーネントをTypeScriptで作りました。
あとは既存Webページに作ったVueコンポーネントを組み込んで終わりだと思ってたら、あ、またIEだけうまく動かない…ってことでPolyfillを入れました。
備忘録としてPolyfillを入れる方法をメモっておきます。

動作環境

ブラウザ

• Internet Explorer 11

Vueコンポーネント

• vue-cliでTypeScriptを有効にして作成
• Web APIにFetch APIでリクエストを投げて結果を表示

App.vue

fetch(apiUrl, args)
   .then((response: Response) => {

Polyfillの入れ方

Promise

npm install --save-dev es6-promise

main.ts

import 'es6-promise';

Fetch API

npm install --save-dev whatwg-fetch

main.ts

import 'whatwg-fetch';

まとめ

• Fetch APIをIEで動作させるにはPromiseとFetch APIのPolyfillが必要
• vue-cliで作ってTypeScriptで書いたVueコンポーネントに対して簡単にPolyfillを導入できた