Browserifyでの作業でオススメ「beefy」

こんにちは、つみきのフロントエンドエンジニアの佐藤です。

今回は beefy についてご紹介してみたいと思います。

https://github.com/chrisdickinson/beefy

beefy は Browserify を利用した作業の際に簡単にローカルサーバを提供してくれるツールです。

特徴としては以下が挙げられるかと思います。

  • ファイルの変更を監視してブラウザをオートリロードするモード有り
  • だいたいどのバージョンの Browserifyでも利用可能
  • HTML ファイルの用意がいらない

Browserify については当ブログの 過去記事 をご参照いただければと思います。

有効なbeefyの利用シーン

例えば Browserify を簡単に試してみたい場合に、エントリポイントの js ファイルのみ用意すれば、 beefy main.js でブラウザで確認しながらコーディングすることができます。

ですので js で何か作る場合のプロトタイピングツールとしても、素早く始められて良いかと思います。

準備

それではインストールしてみましょう。 Node はインストール済みとします。

npm i beefy browserify -g

エントリポイントとなる js ファイルと require で読み込むモジュールとなる js ファイルを用意しましょう。

// main.js

var hoge = require('./hoge');

hoge('sato');

 

// hoge.js

module.exports = function hoge(name) {
  alert('Im ' + name + ' !');
};

実行してみる

それではターミナルで以下のように実行してみましょう。

beefy コマンドにエントリポイントとなる js ファイルを指定します。また --open オプションで自動でブラウザを開いてくれます。

beefy main.js --open

これでブラウザにアラートで 「Im sato !」と表示されるはずです。

HTML ファイルの用意もいりません。実行時に見つからなければ beefy デフォルトのもが利用されます。

--live オプションはファイル変更の監視モードで実行され、ブラウザを自動でリロードしてくます。

beefy main.js --open --live

Browserify のオプション

Browserify のオプションは -- 以降に渡します。

coffeeify を利用し、CoffeeScript ファイルを require する例が以下となります。

beefy main2.js --open -- -t coffeeify --extension='.coffee'

API

beefy の API を直接利用する例です。

app.js として以下のように用意してみました。

// app.js

var beefy = require('beefy');
var http = require('http');

var handler = beefy({
  entries: ['main2.js'],
  cwd: __dirname,
  live: true,
  bundlerFlags: ['-t', 'coffeeify', '--extension', '.coffee']
});

http.createServer(handler).listen(8124);

Node の組み込み http モジュールを利用した例です。 .createServer() の第一引数に、リクエストのコールバック関数として、 beefy で生成したリスナー関数を渡します。

あとはターミナルで node app.js と実行し、ブラウザで http://localhost:8124 にアクセスして確認できます。

サンプル

サンプルを用意しました。

https://github.com/sugarshin/beefy-example

それぞれ上記の例をお試しいただけます。

まとめ

Browserfiy で何か簡単に試してみたい場合にはカジュアルにはじめられるのでとてもオススメですので、お試しいただければと思います。

スマホアプリ制作、Web制作、UIコンサルなどのご依頼はこちら

お問い合わせ