webpack で babel-runtime を使おうとしてハマったメモ

polyfill を使うために babel-loader から babel-plugin-transform-runtime, babel-runtime を利用しようとしたらハマったのでメモ。

1. 正しく動作する導入手順

npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime

以下はどちらか 1 つ。

.babelrc

{
  "plugins": ["transform-runtime"],
  "ignore": ["node_modules"]
}

package.json

...
  "babel": {
    "plugins": ["transform-runtime"],
    "ignore": ["node_modules"]
  },
...

2. ハマった理由

node_modules ディレクトリに Babel が影響していたから。
babel-plugin-transform-runtime のドキュメントには node_modules のことが書かれていなかったので気が付きませんでした…。

webpack 側の設定で exclude することでも対処できますが、webpack 4 で設定ファイルなしで使っているときなども考えると、Babel 側で ignore する方が良いような気がします。

参考「webpackでbabel際はnode_modulesをexcludeし忘れるべからず - Qiita」
参考「babel-plugin-transform-runtime · Babel」