Posted at

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

More than 1 year has passed since last update.

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