AMDモジュールの結合 in TypeScript

こんにちわ、久々の登場となりますセイカイです。

ソニックムーブ Advent Calendar 2014本日の記事になります！

はじめに

TypeScriptでファイル分割する方法は主に2つ。
コンパル時に結合するか、commonJSもしくはAMDでモジュールを動的に解決するかです。

最近だとブラウザのJS開発ではrequirejsよりbrowserifyの方が主流っぽい？ですが、「TypeScriptと組み合わせた場合はどうなんだろうかと」思いつつ今回はAMDを利用した場合のお話です。

前提条件

1ファイル1クラス構成

個人的な好みもありますが、1ファイル1クラス構成の想定です。

部分的な分割

最終的にはライブラリ層・アプリケーション層でそれぞれ、結合されたファイルがあるような感じです。

手順

とりあえずコードを書く

import Base = require('app/model/BaseModel');

/**
 * @class UserModel
 */
class UserModel extends Base {

    constructor(property:any) {
        super(property);
    }
	
	//any

}
export = UserModel;

こんな、よくある書き方になります。
1ファイル1クラス構成なのでexportにclassを直接突っ込んでいます。

コンパイルオプションは下記のような感じですね。moduleにamdを渡しているので、”import Base = require〜”の部分がdefine関数の引数に反映されます。

tsc [FilePath] --module amd --target ES5 --sourcemap

ソースの結合と最適化

reqirejsのr.jsコマンドを使ってコンパイル後のJSを結合します。インストールは下記。

npm install -g requirejs

設定ファイルを書く

今回はライブラリ層と、アプリケーション層は分割して結合してみます。

まずはライブラリ層から。
includeに結合するファイルを指定して、outにファイル名を指定するだけです。

({
    baseUrl: '.',
    include: [
        "lib/Hoge",
        "lib/Fuga",
    ],
    out: 'lib.all.js'
})

仮に上記をbuild.lib.jsとすると、下記のコマンドで最適化を実行します。

r.js -o build.lib.js

lib.all.jsが生成されたかと思います。

次にアプリケーション層の実装ファイルを結合します。

({
    baseUrl: '.',
    include: [
        "lib/Hoge",
        "lib/Fuga",
    ],
    exclude: [
        "lib/Hoge",
        "lib/Fuga",
    ],
    out: 'app.all.js'
})

事前に’lib.all.js’が読み込まれた状態で実行されるので、こちらのファイルでは上記で結合したファイルは省いて結合する必要がありますので、excludeで結合しないファイルを指定しています。
他は、上記の手順と同等です。

ライブラリの使い回し

ライブラリ層は別でも使いまわされる前提です。
以降は、上記で結合したファイルとd.tsファイルがあれば、ソースファイルは無くても使用出来ます。

tsc [FilePath] --module amd --target ES5 --sourcemap -d

d.tsファイルは上記のようにtscコマンドにdオプションをつけると生成出来ます。

ということで、みなさん良きTypeScriptライフをお過ごしください。