Windows でReact.js お試しコードの環境構築2

前回に引き続き、以下のURL のサンプル作成に取り掛かります。
http://c16e.com/1510161700/
まず、webpack の設定からハマります。
新しいbabel とwebpack の互換性がなくなっているようで、loader の設定値を正しくしないと動きません。
で、色々調べた結果、以下のサイトを見たのですが、webpack.config.js に、ちょいと間違いがあるようで、正しく動作しません。
https://yoheikoga.github.io/2016/06/22/error-is-occur-in-30-minutes-like-button-tutorial-of-React/
で、色々試して、以下のパッケージをインストールします。

npm install babel-core babel-preset-es2015 babel-preset-stage-0 --save-dev

インストールしたら、以下の記載をwebpack.config.js に書いたら、build できました。

module.exports = {
  entry: __dirname + "/src/main.js",
  output: {
    path: __dirname + "/dist",
    filename: "like-button.js"
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: "babel-loader", query: { presets: ['es2015', 'stage-0', 'react'] } }
    ]
  }
};

次は、webpack でビルドするために、webpack をインストールした時に生成される、package.json にscripts に記載を追加します。

"scripts": {
    "build": "webpack",
    "watch": "webpack -w"
  },

最後の「,」はpackage.json の最後の要素なら不要です。元々のサンプルサイトでは、「rm -rf dist/*.js && 」という記載がありますが、これは、dist フォルダ以下のファイルを削除後にwebpack コマンドで新規生成されるファイルを出力しますよってことで、Windows のコマンドに置き換えたのですが、うまくいかなかったので、とりあえず、この削除コマンドがなくても動作できるので消しました。

とりあえず、このハマりどころをクリアすれば、サンプルサイトのサンプルは動作できると思います。