BabelでIE11対応するのためのポリフィル適用はどのように実装すべきでしょうか？

Question

現在Vue.jsによるアプリケーションを開発しています。

IE11を含むES6未対応環境に対応させるため、下記の通りBabelの設定を行いました。
（package.jsonのdevDependenciesには "@vue/cli-plugin-babel": "^4.3.1" との記載があります）

• babel.config.js

module.exports = {
	presets: [["@vue/cli-plugin-babel/preset", {
		useBuiltIns: 'usage',
		corejs: '3'
	}]]
}

• .browserslistrc

defaults
Chrome > 45
IE 11

---

上記設定だけで問題ないと思っていましたが、ポリフィルが適用されていないようで、IE11の場合にfetch処理にてエラーとなってしましました。
そこでindex.htmlにて下記のコードを追加し、IE11でも動くようになりました。

    <script>
      if (ua.indexOf('Trident') != -1 || ua.indexOf('MSIE') != -1) {
        // polyfill for IE
        document.write('<script src="https://unpkg.com/core-js-bundle@3.0.0-alpha.1"></script>');
        document.write('<script src="https://unpkg.com/whatwg-fetch@2.0.4/fetch.js"></script>');
      }
    </script>

---

＜質問＞

Babel側の設定だけでトランスパイル＋ポリフィル適用となるものと思っていましたが、ポリフィルが適用されないのは何か設定が不足しているからでしょうか？
babel.config.jsのpresetsの役割についても、十分理解できていないため何か設定が間違っているのかもしれません。
何か気づいた点がありましたらご指摘頂けると助かります。

Comments

[miyabi_pudding]

エラーの内容も記載して下さい。

[plasticgrammer]

コメントありがとうございます。
問題の解決はできておりましたので、エラーの詳細は不要と考えておりました。
一旦解決できましたので、質問内容は変更なしとさせていただきます。

Answer 1

ポリフィルが適用されていないようで、IE11の場合にfetch処理にてエラーとなってしましました。

fetchはブラウザサイドの機能なので、BabelのPolyfillに含まれるものではありません。あくまでBabelは、純粋なプログラミング言語としてのJavaScriptのバージョン変換を行うものです。

Comments

[maisumakun]

fetchを定めているのはWHATWGであり、ECMAScriptとは別枠です。

https://fetch.spec.whatwg.org/

[plasticgrammer]

ご回答ありがとうございました。理解が進みました。
追加で質問させて頂きますので、わかるようでしたらコメントください。
----------
fetch.jsのみの読み込みだと（core-js-bundle@3.0.0-alpha.1 のスクリプトを読み込まないと）、以下のエラーとなりました。
Uncaught TypeError: Cannot delete property 'from' of function Int8Array() { [native code] }
----------
core-js-bundleの役割も、ブラウザ側機能のPolyfillということなのでしょうか？

[maisumakun]

そうですね。

BabelのPolyfillのかけ方によっては、「Polyfillをブラウザ全体に出さず、Babelで変換するコードにだけ適用する」ような形とすることがありますので、全く別にfetchを読み込む場合にはfetch用のPolyfillが別途必要となる場合もあります。

[plasticgrammer]

回答ありがとうございます。

> 「Polyfillをブラウザ全体に出さず、Babelで変換するコードにだけ適用する」
確かにエラーとなっているのは自分のコードではなく、利用しているライブラリ側だった気がします。
もう少し理解を深める必要がありそうですが、現時点での対応としては core-js-bundle, fetch.js を別途読み込む対応で問題ないように感じました。
「BabelのPolyfillのかけ方」について、参考になるサイト等ありましたらコメント頂けると助かります。