2

動画を参考にしたり、

Youtube: TypeScript Project Structure using File Watchers

「File Watcher」 の設定画面より Arguments 部分を下記に設定したりしていろいろ試したのですが、空ファイルで出力されてしまったり、特定ファイル以外はうまくはきだせないなど。うまくいく設定が見つかりませんでした。

--out
  $ProjectFileDir$/public/js/$FileDirPathFromParent(typescript)$$FileNameWithoutExtension$.js
  $FileDirName$/$FileName$
--module amd
--outDir $ProjectFileDir$/public/js/
--module amd

階層維持してはき出すことができる設定方法はあるでしょうか?

※ 追記内容

たとえば階層が下記の様になっていて、 require.js などを使って 1.ts のファイルを 2.ts に import などしている場合にうまく吐き出すことができませんでした。

その場合に動画のとおりにコンパイルすると、他の ts ファイルを認識していないためか、エラーが起きてしまいました。

そのため1階層上でコンパイルをしてすべての typescript を認識させた上で階層をたどってコンパイルするために、上記のような記述方法をしていました。

app
 └─ public
     ├─ js
     |  ├─ dir1
     |  |   └─ 1.js
     |  └─ dir2
     |      └─ 2.js
     └─ typescript
        ├─ dir1
        |   └─ 1.ts
        └─ dir2
            └─ 2.ts

すると typescript の同一フォルダに js が生成され、js フォルダ内には中身がからの js ファイルが生成されるといった現象が起きてしまいました。

typescript, require を使った場合に階層を維持出来る方法がありましたら押していただけると助かります。

0

1 件の回答 1

1

すると typescript の同一フォルダに js が生成され、js フォルダ内には中身がからの js ファイルが生成されるといった現象が起きてしまいました。

こちらの原因ですが、--moduleを使用した場合、--outオプションは無視され、ts-jsが1対1対応で出力される仕様のようです。

https://stackoverflow.com/questions/22293786/why-does-module-override-typescript-compilers-out-flag

https://web.archive.org/web/20170408073844/http://typescript.codeplex.com/workitem/1745


妥協案

File Watcherであまり良い方法が思いつきませんでした。
とりあえず、プロジェクト中すべての.tsファイルをtsc --outDir public/js --module amdに指定してコンパイルするスクリプト(batやshell)をProgramに登録して実行させれば可能かと思います。

例えばWindows(PowerShell)の場合、下記の様に設定します。

  • Program
    powershell.exe

  • Arguments
    -ExecutionPolicy Unrestricted -File compile.ps1

  • Working directory
    $ProjectFileDir$

  • compile.ps1 (Powershellスクリプトファイル)

      $tsFiles = Get-ChildItem -Recurse -Filter *.ts -Exclude *.d.ts -Name
      Invoke-Expression ("tsc --outDir public\js --module amd " + [string]::Join(" ", $tsFiles))
    

その他(Gulp)

私の場合は、Gulpを使用してtsファイルに変更がある度にコンパイルを走らせ、指定したディレクトリにjsを出力しています。

npmがインストールされている環境下であれば、appディレクトリにgulpfile.jspackage.jsonを配置して下記のコマンドを実行すれば、.tsファイルに変更がある度にjsが階層を維持してpublic/js配下に出力されます。

npm install
gulp watch

gulpfile.js

"use strict";

var gulp = require('gulp'),
    del  = require('del'),
    ts   = require('gulp-typescript');

// './public/js'配下のディレクトリ/ファイルを削除
gulp.task('clean', del.bind(null, ['./public/js']));

gulp.task('compile', ['clean'], function(){
  // './public/typescript/'配下のすべてのtsファイルをコンパイル
  return gulp.src(['./public/typescript/**/*.ts'])
    .pipe(ts({
      target: "ES5",
      module: "amd",
      noImplicitAny: true,
      sortOutput: true
    }))
    // jsファイルを'./public/js'配下に出力
    .pipe(gulp.dest('./public/js'));
});

gulp.task('watch', function(){
  gulp.watch('./public/typescript/**/*.ts', ['compile']);
});

gulp.task('default', ['compile']);

package.json

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "license": "",
  "devDependencies": {
    "del": "^1.1.1",
    "gulp": "^3.8.10",
    "gulp-typescript": "^2.3.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}
2
  • 情報不足で申し訳ございません。 内容を追記いたしました。
    – kamem
    Commented 2015年1月16日 8:35
  • なるほど、--moduleを使用した場合、--outの併用ができないということだったんですね。 glup使わなくてはだめかなとは考えてはいました。 shell,glupでの代替案ありがとうございました。
    – kamem
    Commented 2015年1月17日 1:58

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。