4677


動画を参考にしたり、

[Youtube: TypeScript Project Structure using File
Watchers](https://www.youtube.com/watch?v=YwBWByAR8ug)

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

[code]

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

[code]

    --outDir $ProjectFileDir$/public/js/
    --module amd
    
[/code]

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

## ※ 追記内容

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

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

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

[code]

    app
     └─ public
         ├─ js
         |  ├─ dir1
         |  |   └─ 1.js
         |  └─ dir2
         |      └─ 2.js
         └─ typescript
            ├─ dir1
            |   └─ 1.ts
            └─ dir2
                └─ 2.ts
    
[/code]

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

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


CC BY-SA 3.0
2015-01-16T06:20:47.580
4669
2021-05-02T11:51:16.733
2015-01-16T15:07:53.887
33
7455
question
javascript intellij-idea typescript requirejs
IntelliJ IDEA の File Watcher で typescript を階層を維持してはき出したい


> すると 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スクリプトファイル)
[code]       $tsFiles = Get-ChildItem -Recurse -Filter *.ts -Exclude *.d.ts
-Name

      Invoke-Expression ("tsc --outDir public\js --module amd " + [string]::Join(" ", $tsFiles))
    
[/code]

# その他(Gulp)

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

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

[code]

    npm install
    gulp watch
    
[/code]

## gulpfile.js

[code]

    "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']);
    
[/code]

## package.json

[code]

    {
      "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"
      }
    }
    
[/code]


CC BY-SA 4.0
2015-01-16T07:55:42.060
4677
2021-05-02T11:51:16.733
2021-05-02T11:51:16.733
19110
3068
4669
answer