AngularJS AdventCalendar 9日目のあれです。
AngularJSのscriptを一つにまとめる
AngularJSを書いているとどうしてもscriptタグの羅列が増えてくる傾向にあります。
個人的にはあれが非常に気になってしまうので、なんとかひとつのファイルにまとめたいわけです。
例えばAngularJSのサンプルアプリ、Angular phonecatの場合、
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/animations.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
これを何とか一つのJSファイルにまとめるのが今回の目標です。
あとついでにCoffeeスクリプトもつかいたい。
ということで、サンプルコードをこちらに用意しました。
browserifyを使う
git clone https://github.com/mikakane/angular-phonecat.git
cd angular-phonecat
git checkout browserify
npm init
npm start
自動的にサーバが立ち上がるので、http://localhost:8000/app にアクセスすれば動きます。
中身としては、既存のjsファイルをcoffeeディレクトリにCoffeescriptファイルで書きなおして、
package.jsonにビルド設定を書き足しただけです。
masterブランチがfork元になっているため、masterとbrowserifyブランチとの比較で差分を確認する事ができます。
AngularJSの場合、グローバル変数のangularにモジュールをねじ込んでいくスタイルなので、
CommonJS的なモジュールの書き方をしなくても行けるっぽいです。
angular = require("angular") # NG angular 変数が消える
require("angular") # これでOK
ブラウザでコードを確認すると、JSファイルの読み込みがbundle.jsにまとめられているのが確認できると思います。
webpackを使う
一応webpack版も用意してあります。
git clone https://github.com/mikakane/angular-phonecat.git
cd angular-phonecat
git checkout webpack
npm init
npm start
中身は殆どbrowserifyブランチと同じで、package.jsonの記述とwebpack.configの記載が追加されています。
htmlファイルとcoffeescriptファイルは
こうしてみるとやっぱりコンパイル設定とかをwebpack.configにまとめられるwebpackの方が便利そうですね。
まとめ
やってみてから気づいたんですけど、多分Angular的な書き方だと、普通に結合するだけでも行ける気がします。
まぁでもbrowserifyやwebpackなどのビルドシステムを使っていれば、開発版のトレース付きコードと、商用のminifiedコードをワンソースで切り分ける事もできますし、
requireでnodeモジュールを援用できたりと、何かと便利だと思います。
実際に開発する中ではcontrollerなどのファイルが膨らんでくるので、
個々のControllerをangular変数に依存しない形でモジュール化してしまうと、
モジュールテストも行えるようになって便利なんじゃないかなぁ…とか。
あ、ちなみに全部のng-系モジュールがwebpackとかbrowserifyに対応しているわけではないのでangular系のライブラリを多用するケースではお気をつけ下さい。