1. devneko

    Posted

    devneko
Changes in title
+Node.js & webpack & babel で「 regeneratorRuntime is not defined」が発生する場合の対処
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,37 @@
+ちょっとハマった Node.js & webpack & babel の環境で発生する下記のエラーへの対処方法です。
+
+```
+regeneratorRuntime is not defined
+```
+
+##原因
+ES6にGeneratorという機能があるのですが、ソースコードでこれを使っているとBabelはこれを変換してGeneratorに対応していない処理系でも動くようにしてくれます。
+「regeneratorRuntime」はこの処理を実現するためにBabelのランタイムに定義されている関数です。
+つまり、Babelのランタイムが読み込まれていないから「regeneratorRuntime is not defined」が発生しているわけです。
+
+##たぶんベストの対処方法
+とりあえず発生させないようにする方法はいくつかあるのですが、一番良い方法はwebpack.config.jsでbabelのgeneratorの変換を止める方法です。
+nodejsを使う場合はGeneratorは実装されているので変換する必要がありません。
+変換してしまうとパフォーマンスが劣化したり想定外の動きになったりすることも考えられるため、nodejsの場合は変換しないのがベストな方法かと思います。
+
+```js:webpack.config.js
+loader: 'babel?blacklist[]=regenerator'
+```
+
+##その他の対処方法
+
+###babel/polyfillを使う
+
+```js
+require 'babel/polyfill'
+```
+
+###babel-runtimeを使う
+
+```bash
+npm i --save babel-runtime
+```
+
+```js:webpack.config.js
+loader: 'babel?optional[]=runtime'
+```