Rails+WebpackerでのIE11対策

環境: Rails 6.0、Webpacker 4.2、Vue.js 2.6

参考にした記事:

• Babel7.4で非推奨になったbabel/polyfillの代替手段と設定方法
• @babel/preset-env · Babel
• zloirock/core-js: Standard Library

Babelが最新版（7.4以上）であることを確認します。

$ yarn list --pattern @babel 

useBuiltIns: 'entry' の場合

babel.config.jsのpresetsの設定がuseBuiltIns: 'entry'となっていることと確認します。

babel.config.js

      (isProductionEnv || isDevelopmentEnv) && [
        '@babel/preset-env',
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ]

エントリポイントとなるJS（application.js）に次の2行を入れます。これだけです。

app/javascript/application.js

import "core-js/stable";
import "regenerator-runtime/runtime";

stableを付けないでimport "core-js"とすると、提案中のECMAScriptの機能（proposals）が入って、コンパイル後のファイルサイズがちょっと大きくなります。

regenerator-runtime が何をやっているかはよくわかりませんでした。Generator に関連しているようですが、この行なしでもIE11でGeneratorが使えます。

2020-03-21追記: regenerator-runtime/runtime は、asyncとawaitを使うときに使われます。asyncとawaitがコード中にまったくない場合は、regenerator-runtime なしでも動くと思います。

useBuiltIns: 'usage' の場合

babel.config.jsのpresetsの設定を変更して、Babel7.4からの新機能useBuiltIns: 'usage'を使ってみます。

babel.config.js

      (isProductionEnv || isDevelopmentEnv) && [
        '@babel/preset-env',
        {
          forceAllTransforms: true,
          useBuiltIns: 'usage',
          corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ]

この場合は、application.jsにimportを書かなくても、使っているJavaScriptの機能に合わせてモジュールが入ります。必要なものだけ入るので、コンパイル後のファイルサイズがだいぶ小さくなります（私のテストプログラムでは、developmentで1.2MB→750KB、productionで300KB→200KB）。

ただし、IE11でVue.jsを試したところ、「Promiseがない」というエラーが出ました。次の1行をapplication.jsに足すと動きましたが、ちょっと格好悪いですね。

app/javascript/application.js

- Promise;

2020-03-22追記: 再度試したところ、Promise; がなくてもIE 11で動作しました。