webpack4, @babel, IE11でforEachがエラー

@babelでトランスパイルしているのにIE11でNodeList.forEach()が使えない。

なんで？ ...そうか、ポリフィルが必要だった。

ポリフィルはブラウザの種類やバージョンによって追加されたり変更・削除されたコードを補完するものです。

forEach()は文法ではなくAPI

自分のサイトを見ている人の11%はIEを使ってます。そのうちの99%以上はIE11。

ということでJavaScriptをIE11でも動くようにしようと思ったのですがうまくいきません。

（IE11以外は対象外。）

@babel使ってるんだけど？ IE11も入ってるはずだけど？

そう思って自分は悪くないっ！てしてましたが、そういうとき、悪いのはたいがい自分です。

ここでも100%自分がまちがってた。トランスパイルはしているけどポリフィルをしていません。

そりゃそうだ。forEach()はトランスパイルではムリだもん。

@babelのポリフィル

ということで、@babelのポリフィルを設定します。

まずは変更前の設定から。babel専用の.babelrc.jsを使っています。

webpack.config.jsに設定してもいいですが、.babelrc.jsは@babel専用の設定でwebpack以外でも使えるのでこちらのほうがいいです。

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    '@wordpress/babel-plugin-import-jsx-pragma',
    '@babel/transform-react-jsx',
  ],
};

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage",
      },
    ],
  ],
  plugins: [
    "@wordpress/babel-plugin-import-jsx-pragma",
    "@babel/transform-react-jsx",
  ],
};

@babel/preset-envのuseBuiltInsオプションを使います。

pluginsのオプションは無視してください。WordPressとreactで@babelを使うためのもので、ポリフィルとは関係ありません。

core-jsが必要

まだ作業は終わりません。いまwebpackを実行するとこんなエラーが出ます。

WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3

（省略）

ERROR in ./src/***/***.js
Module not found: Error: Can't resolve 'core-js/modules/es6.array.for-each' in '***\***\js'
resolve 'core-js/modules/es6.array.for-each' in '***\***\js'
  Parsed request is a module

（省略）

警告: core-jsのバージョンを宣言せずにuseBuiltInsオプションを使っています。今のところ、バージョンが指定されていないときは2.xを想定しています。

このデフォルトバージョンは将来のBabelで変更される可能性が高いので、corejsオプションで明示的に指定することをおススメします。

（以下省略）

筆者訳

core-jsのインストールコマンドが表示されてるのでコピペで実行しましょう。

（もちろんバージョン3）

設定も修正します。

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage",
        corejs: { version: 3, proposals: true },
      },
    ],
  ],
  plugins: [
    "@wordpress/babel-plugin-import-jsx-pragma",
    "@babel/transform-react-jsx",
  ],
};

設定の注意点

usageにはふたつの設定があるようで、

when using useBuiltIns: "usage" you have two different alternatives:

（"usage" を使用する場合、次の2つの選択肢があります。）

set the shippedProposals option to true. This will enable polyfills and transforms for proposal which have already been shipped in browsers for a while.

（shippedProposals オプションを true に設定します。これにより、しばらくの間、ブラウザで既に出荷されているプロポーザル用のポリフィルやトランスフォームが有効になります。）

use corejs: { version: 3, proposals: true }. This will enable polyfilling of every proposal supported by core-js.

（これにより、core-jsでサポートされているすべてのプロポーザルのポリフィルが可能になります。）

筆者訳

shippedProposalはブラウザに影響されるようなので、corejsオプションだけを採用。

'entry' と 'usage'のちがい

useBuiltInsには'entry' も指定できますが、これは自分でcore-jsをimportをしないといけません。

import "core-js";

しかも、すべてのポリフィルをimportするので無駄なコードまでも入ります。

さらに、個別にimportしてコードを最小にできますが、importするパッケージを覚えないといけないのが面倒。

一方、'usage' は、importが不要です。

自動で使うパッケージだけを最小限でimportします。

それでもまだ動かない

これでいけるか？ と思いましたがまだダメでした。設定が不十分です。

結果から言うとこの設定です。

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          ie: 11,
          esmodules: true,
        },
        useBuiltIns: "usage",
        corejs: { version: 3, proposals: true },
      },
    ],
  ],
  plugins: [
    "@wordpress/babel-plugin-import-jsx-pragma",
    "@babel/transform-react-jsx",
  ],
};

targetsのesmodulesがtrueじゃないとダメです。また、esmodulesを設定するとブラウザのバージョン指定（targets.browsers）が無視されるので、ieオプションが必要です。

（もちろん .browserslistrc も無視される。）

結論！ IE11は捨てる。

長々と説明してきてそれは無いわ～、ですが、結果的にIE11は捨てることにしました。

理由は、

ほかのブラウザ、スマホ・タブレットなどの中小型デバイスに対応するのに加えIE11まで対応するのは、時間はかかるのに割に合いません。

IEの利用者は減っていくことは確実なので。Edgeで見てくれってことですね？

（スマホ・タブレットを最優先しているというのもある。）

今回の話をすべて否定はしません。IE11と他のブラウザの共存を諦めただけで。

もちろんですけど、お金と時間がふんだんにあるのならやります。