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 のコマンドに置き換えたのですが、うまくいかなかったので、とりあえず、この削除コマンドがなくても動作できるので消しました。
とりあえず、このハマりどころをクリアすれば、サンプルサイトのサンプルは動作できると思います。
