polyfill.io が便利すぎた

2019-03-28 追記

@babel/polyfill を import しとくだけでいいんじゃないかというマイブームが来ています。

IE で Array.prototype.flatMap() は使えた。詳しくは知らない。

TL;DR

index.html に下の 1 行を追加しただけ¹ で各種ブラウザ対応終わった。

+  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>

IE 対応

社内で真面目に IE 対応する雰囲気が出てきてしまってどうしようかと思ってたところ noteをNuxt.jsで再構築した話 を思い出したので、とりあえず polyfill.io 入れてみようかってことで入れてみた。

Polyfill.io reads the User-Agent header of each request and returns polyfills that are suitable for the requesting browser.
（Polyfill.ioは、各リクエストの User-Agent ヘッダーを読み取り、要求元のブラウザに適した polyfills を返します。）

便利すぎかよ。

こういうことね。すごい。

src の後ろで ?features= に続けてポリフィルしたい機能を指定することができるので、ソースコードの中で使ってる機能に限定してポリフィルすることもできる。こうすることで余計に大きなファイルはロードしなくて済むのでファイルサイズの最適化ができそう。
だけど、そんなの features の中から選んでちまちま指定するの嫌だったし、どこまでポリフィルしてるかを気にせずにコードを書いていきたかったし、polyfill.js は CDN (Fastly) から配信されるのでどうせ速いしパフォーマンスは誤差やろ（計測しろや）と思ったので、今回はグループエイリアス es6 とだけ書いて祈ることにした（便利）

IE 対応、javascript に関してはもうこれに任せて安心して寝たい気持ちがある。

もしかしたらポフィリル自体が低品質だったせいで結局うまく動作しないってことがあるかも知れないけど、今回は対応コスト超〜低めでやれたんで、あとは何か起きたときの自分のカバー力に託したいと思います。それでは、おやすみなさい。

1. うちは React 製 SPA なので ↩