こんにちわ、久々の登場となりますセイカイです。
ソニックムーブ Advent Calendar 2014本日の記事になります！
はじめに
TypeScriptでファイル分割する方法は主に2つ。
コンパル時に結合するか、commonJSもしくはAMDでモジュールを動的に解決するかです。
最近だとブラウザのJS開発ではrequirejsよりbrowserifyの方が主流っぽい？ですが、「TypeScriptと組み合わせた場合はどうなんだろうかと」思いつつ今回はAMDを利用した場合のお話です。
前提条件
1ファイル1クラス構成
個人的な好みもありますが、1ファイル1クラス構成の想定です。
部分的な分割
最終的にはライブラリ層・アプリケーション層でそれぞれ、結合されたファイルがあるような感じです。
手順
とりあえずコードを書く
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
[sourcecode lang="java"]import Base = require('app/model/BaseModel'); /** * @class UserModel */ class UserModel extends Base { constructor(property:any) { super(property); } //any } export = UserModel;[/sourcecode] |
こんな、よくある書き方になります。
1ファイル1クラス構成なのでexportにclassを直接突っ込んでいます。
コンパイルオプションは下記のような感じですね。moduleにamdを渡しているので、”import Base = require〜”の部分がdefine関数の引数に反映されます。
|
1 |
[sourcecode lang="bash"]tsc [FilePath] --module amd --target ES5 --sourcemap[/sourcecode] |
ソースの結合と最適化
reqirejsのr.jsコマンドを使ってコンパイル後のJSを結合します。インストールは下記。
|
1 |
[sourcecode lang="bash"]npm install -g requirejs[/sourcecode] |
設定ファイルを書く
今回はライブラリ層と、アプリケーション層は分割して結合してみます。
まずはライブラリ層から。
includeに結合するファイルを指定して、outにファイル名を指定するだけです。
|
1 2 3 4 5 6 7 8 |
[sourcecode lang="js"]({ baseUrl: '.', include: [ "lib/Hoge", "lib/Fuga", ], out: 'lib.all.js' })[/sourcecode] |
仮に上記をbuild.lib.jsとすると、下記のコマンドで最適化を実行します。
|
1 |
[sourcecode lang="bash"]r.js -o build.lib.js[/sourcecode] |
lib.all.jsが生成されたかと思います。
次にアプリケーション層の実装ファイルを結合します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
[sourcecode lang="js"]({ baseUrl: '.', include: [ "lib/Hoge", "lib/Fuga", ], exclude: [ "lib/Hoge", "lib/Fuga", ], out: 'app.all.js' })[/sourcecode] |
事前に’lib.all.js’が読み込まれた状態で実行されるので、こちらのファイルでは上記で結合したファイルは省いて結合する必要がありますので、excludeで結合しないファイルを指定しています。
他は、上記の手順と同等です。
ライブラリの使い回し
ライブラリ層は別でも使いまわされる前提です。
以降は、上記で結合したファイルとd.tsファイルがあれば、ソースファイルは無くても使用出来ます。
|
1 |
[sourcecode lang="bash"]tsc [FilePath] --module amd --target ES5 --sourcemap -d[/sourcecode] |
d.tsファイルは上記のようにtscコマンドにdオプションをつけると生成出来ます。
ということで、みなさん良きTypeScriptライフをお過ごしください。
