babel-polyfillの導入方法につきまして

[kochizufan]

はじめまして、有用なテンプレートの開発ありがとうございます。

ブラウザサイドでcoやyield、generatorを使いたくて、babel-polyfillもこれで導入しようとしましたが、ブラウザでもPhantomJSのテストでも、

ReferenceError: Can't find variable: regeneratorRuntime

と出てうまく読み込めません。

こちらのサンプル
https://github.com/jamesknelson/webpack-black-triangle
のwebpack.config.jsだと、jsにcoやyieldを混ぜてもうまく動くので、これを参考にして

webpack.config.jsに

    entry: { 
        app: ['babel-polyfill', './src/pc/js/app.js'],
    },

を混ぜたり、.babelrcの設定をしたりいろいろやってみましたが、どうしてもregeneratorRuntimeが定義されていないというエラーが消えずうまく動きません。
もしpolyfillの導入方法がお分かりになりましたら、教えていただければ大変嬉しいです。
よろしくお願い致します。

[sable-virt]

こんにちは。
babel-polyfill ではなく、 babel-plugin-transform-runtime の方が良いかと思います。

http://babeljs.io/docs/plugins/transform-runtime/

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

babel-plugin-transform-runtime をインストールして、
.babelrc を作成&以下を追加

{
  "plugins": ["transform-runtime"]
}

babel-plugin-transform-runtime にはpolyfillもruntimeも内包されているようです。

[sable-virt]

Polyfillは例えばPromiseを使おうが使うまいが、出力後のJSに追加されます。
一方でruntimeはbabelで変換時に使用されているPolyfillが必要なものを追加していってくれるので、Promiseを使えばPolyfillが追加され、使わなければ追加されず無駄が少ない、という感じです。

[kochizufan]

こんばんは！

大変ありがとうございます。
.babelrcの中身を、

{
  "plugins": [
    ["transform-runtime", {
      "polyfill": false,
      "regenerator": true
    }]
  ]
}

みたいな感じにしたら動きました。
ありがとうございました。

一応確認したものを
https://github.com/kochizufan/FrontPlate_SelfStudy1
に置いておきます。

[sable-virt]

良かったです。ではこちらはクローズします。
また何かあればお気軽にIssueくださいませ。