npm, browserify(reactify)をつかって、reactの開発環境を整える(jsxを事前に変換するようにする)

こんにちは。バナナを三本食べました。きたけーです。

前回、React.js をとりあえず触ってみた - きたけーTechブログの記事でreactを試してみましたが、
実際のアプリケーションでは、ページを表示する度に毎回jsxを変換するわけにはいかないので、
今回はbrowserify(reactify)をつかって、jsxを事前に変換するようなタスクをnpm run-scriptsで定義するようにします。

※ jsxの事前の変換自体は react-toolsパッケージで入るjsxコマンドでできますが、今回はbrowserifyで依存管理/解決もおこないたいのでreactifyをつかっています。

必要なパッケージをいれる

npm install react --save
npm install browserify --save-dev
npm install reactify --save-dev
npm install watchify --save-dev # ファイルの変更を監視して、変更があるたびに変換するために必要

タスクを定義する

package.jsonに以下の内容を記述します。
ポイントは、transformでreactifyを指定していることです。

  "main": "js/app.js",
  "scripts": {
    "start": "watchify . -d -o js/bundle.js -v",
    "build": "browserify . > js/bundle.js"
  },
  "browserify": {
    "transform": [
      "reactify"
    ]
  },

実際につかう場合は以下のコマンドを実行して、ファイルの編集をおこなっていきます。ファイルの変更がある度にjsxの変換処理が走ります。

npm run start

単純に一度だけ変換したい場合は以下のコマンドを実行します。

※ browserifyで生成されるファイルのサイズはかなり大きくなるので、
本番サーバーにデプロイするファイルを生成するときは、browserify .の結果をさらにuglifyjsなどをつかって圧縮したほうがよさそうです。

npm run build

今回はnpm run-scriptsのタスクで単純にbrowserifyのコマンドを呼び出していますが、必要な変換処理が増えてきたら、適宜gulpやgruntのタスクにするとよいと思います。

参考にしたところ

facebook/flux · GitHub の example のアプリケーションの設定を参考にしました。