コンパイラかく語りき

import { Fun } from 'programming'

ReduxチュートリアルをWebpackでビルド

Reduxをもっと頭に定着させるため、今一度チュートリアルを写経しました。

ちなみに前回は写経したはいいものの、Webpackでのビルドが通りませんでした。

 

chuckwebtips.hatenablog.com

 

結論から言うと、bebel-preset-reactというパッケージが足りていませんでした。

なので、Webpackを実行してbabelローダーを噛ませるときにreactを解釈できなかったんですね。それでsyntax-errorが出ていたようです。

 

ビルドに成功したWebpack configがこちら。

gistf0633ffe806dbee6ffba

 

ちなみに、package.jsはこんな具合。

gist259a26a893eac20d2386

 

この状態で $ npm run webpackすると、bundle.jsが生成されます。

 

ビルドが通ったので、ブラウザで表示してみました。

f:id:chuck0523:20160316224518p:plain

すると、このとおり、Todoリストっぽいものが表示されました。やったね!

 

写経したコードがこちらです。

github.com

 

DEMOはこちらから試せます。お粗末ですが。。

http://chuck0523.github.io/JSPractise/redux/todoList/index.html

 

参考URL:

qiita.com