（色々と同じような記事がたくさんあるのだけれど、最近のフロントエンド開発周りについて行けてないので、ちゃんと理解するために自分用に記事にまとめる）

react の公式でも browserify or webpack の使用を勧めてるっぽいので、browserify を使って react を使う環境を整えてみる。

browserify とは？

browserify とは簡単にいうとブラウザでモジュールの依存管理周りをよしなにやってくれて1ファイルにまとめてくれるやつ。
詳しくは下記のリンクが詳しいです。

browserify をインストール

$ npm install --save-dev browserify

試してみる。

$ ./node_modules/.bin/browserify src/test.js -o lib/bundle.js

ちゃんとファイルが生成されていれば OK。

babel での JSX, ES2015 コンパイルを同時にやる

browserify で依存解決と1ファイルにまとめると同時に babelでの jsx,es2015 のコンパイルを同時にやる。

babel の環境構築についてはこちらの記事参照。

browserify は -t オプション(--transform オプション)で指定したものでコンパイルしてくれる。
ここで指定できる babel モジュールが babelify という別モジュールになってるので、
それをインストールする。

$ npm install --save-dev babelify

さっきのコマンドで -t オプションを試してみる。

$ ./node_modules/.bin/browserify src/test.jsx -t babelify -o lib/bundle.js

問題なく実行できれば OK。

次の課題

今回はとりあえず最低限のところまでをやってみましたが、browserify には他にも色々機能があるみたいです。
例えば下記。

Browserifyのオプションつけるとどんな出力になるのかを検証する。

まだ僕はそこまでの需要がないので必要になったらまた調べてみます。
それよりも先に webpack に移行する可能性もありますが。。。

~~でもとりあえず次は gulp 周りについて調べてみようと思ってます。~~
（追記）
色々調べた結果、gulpは必要なさそうな気がしてきた。
とりあえずは npm の scripts で事足りそうなので、それで事足りなくなったら（そんな日が来るかわからないけれど）必要に応じで導入を検討しようかと思う。

npm の scripts は普通の unix コマンドらしいので、gulp 使わなくて済むのであればそっちのほうがありがたい。

gulp が必要ないと思った参考リンクを幾つか貼っておきます。

(おまけ)webpack について

browserify と同じようなツールに webpack というものがあります。
webpack のほうが後発で、複数ファイルを出力できたり、色々と柔軟な設定ができるみたいで、最近では webpack のほうが流行りみたいです。

初めは webpack でやろうと思ったのですが、
何処かの記事の webpack.config.js を見た時にかなりハードルが高いと感じたので、
一旦シンプルそうな browserify を題材にし、ある程度理解が進んだら webpack に移行しようと思ったのです。

そのうち webpack についても調べてまとめようと思ってます。