wzrd - もっとも簡単なフロントエンドの為のbrowserifyサーバー

よくある問題

こういうディレクトリ構造で(単純化してます)

index.html
index.coffee # bundle.jsにコンパイルされる
bundle.js

index.coffeeを起点に、browserifyでjsに変形しつつbundle.jsに結合していたとします。
で、index.htmlは <script src="bundle.js"></script> で読み込んでるはず。

たぶん、こういう感じに実行していると思います

browserify -t coffeeify --extension=".coffee" index.coffee > bundle.js

このとき、.gitignore書いたり毎回ビルドしてブラウザのリロードの前にbundle.js管理するの面倒くさいですよね。

(注意: この例ではcoffeeifyを使うのでnpm install coffeeify が必要です)

Wzrdを使う

maxogden/wzrd

npm install wzrd -g

wzrdはパス解決時にbrowserifyによるビルド結果を返す簡易アセットサーバーを建てます。

browserify -t coffeeify --extension=".coffee" index.coffee > bundle.js

だと、次のようになります。

$ wzrd index.coffee:bundle.js -- -t coffeeify --extension=".coffee"
server started at http://localhost:9966

http://localhost:9966/index.html を開くと, bundle.jsを読みに行った時にbrowserifyで実行した結果を返してくれます。

何が嬉しいの

ファイル監視じゃなくてブラウザリロード時に読み込み直してるのがポイント。

index.html index.coffee package.json のミニマムスタートができて自分は非常に嬉しい。webpackはどうも設定が増えてごてごてしていく。

というわけで最小のフロントエンドプロジェクトテンプレートを作ってみた mizchi-sandbox/minskl

それではよきフロントエンドを。