JavaScriptMVC でパッケージング

JavaScriptMVC で作成したアプリケーションの配布パッケージを作成します。

一連の記事の最後になります。

• JavaScriptMVC - 概要 (2011年8月25日)
• JavaScriptMVC を使ってみる (2011年8月26日)
• JavaScriptMVC でテストを実行 (2011年8月27日)
• JavaScriptMVC でドキュメントを生成 (2011年8月28日)

ビルドする

StealJS の build.js を使ってソースコードを圧縮、結合します。 依存性は StealJS が解決し、内部的には Closure Compiler を使います。

$ ./js cookbook/scripts/build.js
Building to cookbook/

BUILDING SCRIPTS ---------------
steal.compress - Using Google Closure app
   steal/steal.js
   ignoring ../steal/dev/dev.js
   cookbook/cookbook.js
   jquery/model/model.js
   jquery/class/class.js
   jquery/jquery.js
   jquery/lang/lang.js
   jquery/view/ejs/ejs.js
   jquery/view/view.js
   jquery/lang/rsplit/rsplit.js
   cookbook/models/recipe.js
   steal/less/less.js
   ignoring ../steal/less/less_engine.js

SCRIPT BUNDLE > cookbook/production.js

BUILDING STYLES ---------------
text/less
../cookbook/resources/example.less

STYLE BUNDLE > cookbook/production.css
Nice! Compressed: 27.1%  Before: 118.0 bytes  After: 86.0 bytes

JavaScript は production.js 、CSS は production.css にまとめられました。 cookbook.html から読み込む JavaScript を変更することで、 開発版と製品版を切り替えられます。

ファイルをコピーする

適当な Web サーバーに JavaScriptMVC のフォルダを丸ごとコピーすれば動作しますが、 製品版には不要なファイルが多いことも事実です。 そこで、動作に必要なファイルだけをコピーします。

「必要なファイル」は次のものになります。

• 起動ファイル - steal.production.js
• アプリケーション - cookbook.html, production.js, production.css
• テンプレートファイル - 各種 .ejs

適当なディレクトリに次の構成でコピーします。

$ tree
.
├── cookbook
│   ├── cookbook.html
│   ├── production.css
│   ├── production.js
│   └── views
│       └── recipe
│           ├── edit.ejs
│           ├── init.ejs
│           ├── list.ejs
│           └── show.ejs
└── steal.production.js

3 directories, 8 files

パッケージにまとめる

HTML で JavaScript を読み込む部分を修正します。 steal.js ではなく、 steal.production.js を読み込ませます。 ディレクトリ構成を変更していますので、 steal というディレクトリ名を取り除きます。

<script type='text/javascript'
        src='../steal.production.js?cookbook'>
</script>

あとは ZIP アーカイブなどにまとめます。

$ zip -r cookbook-0.0.1.zip steal.production.js cookbook

終わりに

開発した JavaScript ファイルなどをパッケージングしました。 このフェーズで CoffeeScript と LESS はコンパイルされますので、 実行時のオーバーヘッドは少なくなります。 出来上がったファイル群を ZIP に固めることで、簡単に他のホストに配布できます。

JavaScriptMVC の紹介はこれでおしまいです。 ベースにした英語のドキュメントはこちらです。

• Get Started - javascriptmvc.com

"cookbook" という小さなアプリケーションを作る過程で、 JavaScriptMVC の主要な理念に触れてきました。 コードの分離、テスト、圧縮、そしてドキュメンテーションです。 何もないところから、圧縮されてテストされ、そしてドキュメントも備わったアプリケーションにたどり着いたのです。 この道のりがどんなにシンプルだったか振り返ってみると本当に素晴らしいですね。

クライアントサイドのカウボーイコーディングから脱却して、 サーバーサイドに引きずられることなく実装を進められそうなのは嬉しいですね。