ExtJS with Sencha Cmd
ExtJS 4.1.1a以降向けにSencha Cmdという開発支援ツールが出ていて、割と便利に？苦労して？使っているので紹介。 前身はSencha SDKと呼ばれていたらしい。 俺が見た時には既にあったので過去は不明。
Sencha Cmdはプロジェクトのビルドやコードスニペット生成とかの開発支援をしてくれるツール。ビルド時には多数のファイル群を1つに纏めたりミニファイもしてくれる。
現在の最新は3.0で、3.1のβ版が最近出たところ。とか書いてるうちに時間が経ってそろそろリリースされてしまいそうな…。
コードスニペットの生成は一番最初のファイル配置は必要だけど、MVC周りのコードは生成してもどうせ直すのでイマイチ。
今は主にビルドツールとして利用している。
では簡単に使い方を。
以下の例では$sdk はExtJSが展開されたディレクトリ、$workspace はこれから開発するディレクトリとする。
アプリ生成
#cd $sdk; sencha generate app アプリ名 $workspace
ベースとなるディレクトリやファイルを生成する。アプリ名はnamespaceに直結しているので、そちらを意識した方が良さそう。
アプリのビルド
# cd $workspace; sencha app build
アプリのビルドを行う。JSファイル群を一つの大きなファイルに纏めたり、改行や空白を埋めて小さく(minify)したり。この時点でindex.htmlのパースとJSファイル群のルックアップが行われるので、変なHTMLを書いてたり、Ext.define に間違った名前があるとエラーになる。JSのパースはしないらしく、JSONに無駄なカンマをたくさん書いたけどエラーにはならなかった。
パラメータで--environment=testingとするとminifyをせずにビルドしてくれるけど、testingでビルドが通ってもproductionでコケるという現象に遭遇したのであまり信用しないことにした。
コードスニペット生成
# sencha generate [model | view | controller] ...
それぞれファイルを生成してapp.jsなどに登録する。
app.jsに全部書くとカオスになるから、最低限パッケージごとにController作ってViewやModel他への参照はそこに書く、app.jsにはControllerだけ書くってルールにしたら使わなくなった。
他にもいくつかあるけど、今のところ使ってみたのはそれくらい。
Sencha Cmdを使うのは実質プロジェクト作成時とビルド時だけなので、最初に構築する人だけで十分かもしれない。Rubyとか必要だし。
Sencha Cmdでプロジェクトを作ると、特にドキュメントにはない構造が出来上がる…と思う。
index.htmlにはビルドのための情報が入っていたり、懐かしのbuild.xml (ant向けビルド設定ファイル)があったり。
構造の解説は3.1で大きく変わったので省略。手元の環境を移行してしまってもう残っていないので…。