Yeoman の angular --typescript 環境では初期状態で以下のようなディレクトリ構造になっている。
この状態で grunt serve すると .tmp 以下に ts ファイルがコンパイルされて以下のように展開される。
そして、自前のライブラリを利用しようとする場合、プロジェクトルートに lib を追加して利用すると仮定する。
＃そもそもここが間違いかも？app/scripts 以下に lib を置けば特に問題はないかもしれない。だが、アプリ限定のライブラリでもないので納得行かない…ルートに置く場合の対応ということで。
app.ts に以下のように参照を記述する。
/// <reference path="../../lib/jimae/testlib.ts" />
すると、grunt serve で .tmp 以下がこのようにディレクトリ構造が変わってしまい、動作しなくなる。
scripts/app/scripts となってしまっている。要は参照先の testlib.ts もコンパイルし、出力するために参照している最上位のディレクトリ(../../)を出力の baseDir にしていると考えられる。
コンパイルオプションの noResolve なども試してみたが、これは参照自体が行われなくなり、コンパイルエラーになる。仕方がないので、testlib.ts の型定義ファイルを以下のコマンドで生成し、typings 以下に配置し、そちらを参照するようにして解決した。（ライブラリにメソッド追加などが行われた場合は型定義ファイルを更新する必要がある。自動化した方がいいかも？）
tsc --declaration --declarationDir typings/jimae lib/jimae/testlib.ts
ts ファイルと同じ場所に testlib.js も生成されてしまうが削除する。
app.ts の参照は以下のように生成された d.ts ファイルに変更する。
/// <reference path="../../typings/jimae/testlib.d.ts"/>
これで .tmp 以下のディレクトリ構造は元通りに戻る。
しかし、この状態では testlib.ts がコンパイルされず、実行時に参照できないので Grunt タスクに以下のように追加する。
typescript: {
jimaelib: {
src: ['lib/{,*/}*.ts'],
dest: '.tmp/lib',
options: {
module: 'amd', //or commonjs
target: 'es5', //or es3
rootDir: 'lib',
sourceMap: true,
declaration: true
}
},
base: {
これで grunt serve 時に以下のように出力されるようになる。
index.html からは ../lib/jimae/testlib.js で参照できるので追加する。
<!-- build:js scripts/lib.min.js -->
<script src="../lib/jimae/testlib.js"></script>
<!-- endbuild -->
＃ちなみに grunt タスクの typescript:base で sourcemap となっている箇所は sourceMap にしないとソースマップが生成されない。雛形のミスと思われる。また、rootDir 指定をしないと lib/jimae が rootDir になり lib/testlib.js のように出力される。lib/jimae2 などに ts ファイルが有ると lib が rootDir になり lib/jimae/testlib.js のように出力される。tsc コマンドの仕様らしいが、出力されるディレクトリ構造が変わってしまうのでいただけない。rootDir 指定を必ずするようにした方が良いと思われる。そもそもの話、grunt-typescript は TypeScript 1.6.2 に依存しており、古い実装になっているので新しいもの(AngularJS1.5等)を扱う場合は grunt-ts に乗り換えた方が良いと思われる。
そもそもの話、ts ファイルの reference 先までコンパイル出力しようとするのが問題なので、以下のリンクのように、reference 指定で ts ファイルを型定義として読み込む設定ができればいいのだが、TypeScript2.0.3 でもまだこの機能はないらしい。
https://github.com/Microsoft/TypeScript/issues/1753
TypeScript も何かと面倒ですな… Yeoman の雛形ではなく IntelliJ に依存した方がいいかもしれない…
