BabelのAPI対応について

Question

__Babel__でトランスコンパイルしているのですが、__IE11__でサポートしていないコンストラクタ関数__Headers()__などが機能しません。
これはあくまで「記法」のみが変換・最適化されるからでしょうか？

Answer 1

IE11のようなレガシーブラウザには実装されていないコンストラクタや関数を使えるようするには@babel/polyfillを使う必要があります。polyfillを正しく組み込めば、ES2015以降に追加されたPromise等もIE11で使用できるようになります。ただし、ES2018全ての機能をサポートしているわけでは無い事に注意が必要です。

なお、@babel/polyfill以外にもpolyfillは存在し、そちらを使うという手段もあります。全部入りpolyfillは小さくないサイズですので、必要な機能だけを絞って使う、特定機能だけのpolyfillを使うというのもできます。細かいことはpolyfillというキーワードで検索してみてください。

【追記】

@babel/polyfillについてもう一つ注意しておかなくてはなりません。それは、このpolyfillはECMASCriptのpolyfillであって、JavaScriptのpolyfillではないと言うことです。JavaScriptの言語仕様はECMAScriptですが、そこにブラウザやネットワーク等で使う各APIを追加することでJavaScriptになっています。このブラウザやネットワーク等に関わるようなAPI部分はECMAScriptの仕様外であるため、babelでは一切考慮されません。

HeadersやfetchなどはJavaScript側に含まれるAPIです。ですので、@babel/polyfillでは対応できません。では、全く対応できないかというとそうではありません。それらの新しいAPIについては個別にpolyfillが存在する場合があるからです。

github/fetch: A window.fetch JavaScript polyfill.

上はFetch Standardのpolyfillです。fetchおよびfetch周りのAPIを網羅しています。他にも必要になれば、個別にpolyfillを探しだし、追加することで、どうにか動くようにできる場合があります。

ただし、注意してください。polyfillが実現出来るのは、古い実装でもその動作をエミュレートできる場合だけです。ブラウザそのものにAPIがないと不可能というものや、一部制限がでるといったこもあります。IE11については、どこかで妥協することも必要になるかも知れません。

Comments

[退会済みユーザー]

polyfillで概ね解決できたのですが、Headers()やfetch()には未だ対応していないようでした。
対応には時間がかかるものなのでしょうか

[raccy]

追記しました。要約すると、ECMAScriptの範囲外については個別にpolyfillをみつけてねってことです。