UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Babel】7.4.0で推奨されているcore-js@3がIE11でうまく動作しない

Babel7では、polyfillは@babel/polyfillからcore-js@3を使うことが推奨されている

これに対応したのだがcore-js@3を使ったpolyfilではvuexがIE11でうまく動作しなかった uga-box.hatenablog.com

以下のエラーがでて画面が真っ白になってしまう

[vuex] vuex requires a Promise polyfill in this browser.

vuexではないが、IE11の利用可能にするには難しいとこちらの記事でもそう書かれていた

最新版で学ぶwebpack 5入門 - Babel 7でES2020環境の構築(React, Vue, Three.js, jQueryのサンプル付き) - ICS MEDIA

※最新版のBabelでは@babel/polyfillではなく、core-jsを利用する方法を推奨されています。しかし、2020年1月現在、core-jsを組み込む方法は注意する点が多くあります(特にIE11で利用可能にするのは難しい)。本記事では@babel/polyfillでの方法でしばらく継続して掲載します。

なので @babel/polyfillを使う

yarn add @babel/polyfill

エントリーポイントのJavaScriptファイルにpolyfillを取り込むようにする

src/path/to/entry/index.js

import "@babel/polyfill"
import Vue from "vue"
import Vuex from "vuex"

無事表示された