react componentを作ったら、demoページも用意してあげたいですよね。でも、demoページから使えるようにするには、ES6（で書いてる前提です）のコードをtranspileして、必要なライブラリを一つのjsにまとめて、といったことをする必要があり、「demoページ用のbuildタスク別に用意すんの？」という気分になります

そんなときはbudoを使うと幸せになれます。

budo

ページロード時に、指定のsourceに対して自動的にbrowserifyを実行してくれるサーバです。live reloadにも対応しているので、browserifyを使った開発用サーバというのが本来の用途になると思います。詳しくは上記サイトを見てください。

使い方

budo examples/bundle.js --dir examples -- -t babelify

最初の引数examples/bundle.jsが、ページロード時にbrowserifyを実行する時のsourceファイルとなります。

--dirは、ルートディレクトリを指定します。指定が無い場合、budoがbuild結果のjsを読み込んだ素のhtmlを勝手に作成してくれますが、自分で独自のindex.htmlを作ったり静的コンテンツを参照させたい場合はルートディレクトリを指定して、そこにindex.htmlなどを置きましょう。今回はcomponentを描画させるdivを指定したかったので、自分でindex.htmlを用意しました。

--以下はbrowserifyに渡されるオプションで、今回はES6からトランスパイルしたいので-t babelifyを渡しています。

ルートになるexamples/には、以下のようなindex.htmlを置いておきます。

<!DOCTYPE html>
  <body>
    <div id='sample1'></div>
    <div id='sample2'></div>
    <script type='text/javascript' src='bundle.js'></script>
  </body>
</html>

srcは、sourceに指定したファイル名になります。(デフォルトではディレクトリ名はいらないですが、--serveオプションを使うとビルド結果のjsのパスを任意に設定できます)

コマンドを実行すると、

[0001] info  Server running at http://192.168.59.3:9966/ (connect)
[0009] 8108ms    1.69MB (browserify)

といったログが出てくるので、http://192.168.59.3:9966/にアクセスすると、examples/index.htmlの内容と、ビルドされたbundle.jsに従って描画された画面が見れる事でしょう。

package.jsonのstartコマンドに定義しておけばnpm startで起動できて幸せ。

終わり

今回書いた内容で実際にデモページ入りのReact Componentのプロジェクトを作ったのでこちらに置いておきます。Text内のurlをaタグのリンクにして表示するReact Componentです。
https://github.com/hokuma/auto-text-link

budoで簡単にreact componentのdemoページを作る

budo

使い方

終わり