Browserifyで外部モジュールをbuildする

2014-03-15

node.jsで書かれたjavascriptをクライアントサイドでも実行できるようにしてくれるBrowserifyが便利で、
grunt-browserify使ってるけど外部モジュールの取り扱いに関していまいち理解できてなかった。
なので、改めて簡単にまとめたメモ。

次のような構成

srcにあるjsファイル群をbuildに吐き出す。外部モジュールとし、node-modulesにあるjQueryをsrcにあるjsファイル群でrequireしてみる。

Gruntfileはload-grunt-configを使ってタスクをファイル毎に分割しているので、>grunt-browserifyのタスクはgruntTasks/browserify.coffeeとなる。

node-modulesのjQueryをrequireできるようにするために、エイリアスを作成。jqueryという文字列でファイルを参照できるようにする。

これでjavascriptファイル側で

としてrequireできるようになる。

ここではbrfsを使って、htmlファイルもrequireして、出力できるようにしているので、

となっている。

さらに別のファイルのタスクとして

externalにはファイルのエイリアスが使用できる。(ファイルパスももちろん使用できる)

javascriptファイルは

としている。

さらにaliasと同じようにshimという設定オブジェクトを使用することも可能。今回はangularjsを使用する。この場合、jQeuryが必要になるので、dependsでjqueryを指定することで、モジュールの依存も解決できる。

javascriptのファイルでは

という感じで外部のモジュールを利用できる。

ファイルのbuildを分割して管理し、そこで外部モジュールへの依存関係も解決できるので非常に便利だった。

69log