2012-10-09 12 views
43

ペットプロジェクトをTypeScriptに変換しようとしていて、tscユーティリティを使用してファイルを監視してコンパイルできないようです。助けは私が-wスイッチを使うべきだと言います、しかし、それはどんな*.tsファイルも再帰的に見ることができないようです。これは何かのように思われるtscが処理できる必要があります。私の選択肢は何ですか?すべてのTypeScriptソースを監視してコンパイルするには?

答えて

69

は、プロジェクトのルートにtsconfig.jsonという名前のファイルを作成し、その中に以下の行を含める:

{ 
    "compilerOptions": { 
     "emitDecoratorMetadata": true, 
     "module": "commonjs", 
     "target": "ES5", 
     "outDir": "ts-built", 
     "rootDir": "src" 
    } 
} 

outDirことに注意してくださいコンパイル済みのJSファイルを受け取るディレクトリのパスである必要があります。rootDirは、あなたのソース(.ts)ファイルを含むディレクトリ。

オープン端子と実行tsc -w、それが.jssrcディレクトリ内の任意の.tsファイルをコンパイルし、ts-builtディレクトリに格納します。

+1

その解決に感謝します。小さな更新: 'tsc'はエラーを出しました。 'エラーTS6050:ファイル' tsconfig.json 'を開くことができませんでした。コメントを削除するまで –

+0

@gwmccull:ああ、私はここに追加しただけです。何があったの?私は答えを更新します。 – budhajeewa

+0

コメントは役に立ちました。なぜそれがうまくいかないのか分かりませんでした。新しいメモも機能します。答えをありがとう! –

8

技術的にはあなたがここにいくつかのオプションを持って話す:

あなたは崇高なテキストのようなIDEを使用し、活字体のためのMSNのプラグインを統合している場合:http://blogs.msdn.com/b/interoperability/archive/2012/10/01/sublime-text-vi-emacs-typescript-enabled.aspx自動的.js.tsソースをコンパイルするビルドシステムを作成することができます。ここであなたがそれを行う方法について説明します:How to configure a Sublime Build System for TypeScript

ソースコードをファイル保存時の宛先.jsファイルにコンパイルすることもできます。 githubにホストされている崇高なパッケージがあります:https://github.com/alexnj/SublimeOnSaveBuildこれは、SublimeOnSaveBuild.sublime-settingsファイルにts拡張子を含める必要があるだけです。

コマンドラインで各ファイルをコンパイルすることもできます。複数のファイルを一度にコンパイルするには、次のように空白で区切ってください:tsc foo.ts bar.ts。このスレッドをチェック:How can I pass multiple source files to the TypeScript compiler?、しかし、私は最初のオプションがより便利だと思います。

6

tscコンパイラは、コマンドラインで渡したファイルのみを監視します。それは/// <sourcefile>参照を使用して含まれているではなく、時計ファイルです。

find . -name "*.ts" | xargs tsc -w 
1

今日、私はあなたと同じ問題のために、このAntのMacroDefを設計した:

<!-- 
    Recursively read a source directory for TypeScript files, generate a compile list in the 
    format needed by the TypeScript compiler adding every parameters it take. 
--> 
<macrodef name="TypeScriptCompileDir"> 

    <!-- required attribute --> 
    <attribute name="src" /> 

    <!-- optional attributes --> 
    <attribute name="out" default="" /> 
    <attribute name="module" default="" /> 
    <attribute name="comments" default="" /> 
    <attribute name="declarations" default="" /> 
    <attribute name="nolib" default="" /> 
    <attribute name="target" default="" /> 

    <sequential> 

     <!-- local properties --> 
     <local name="out.arg"/> 
     <local name="module.arg"/> 
     <local name="comments.arg"/> 
     <local name="declarations.arg"/> 
     <local name="nolib.arg"/> 
     <local name="target.arg"/> 
     <local name="typescript.file.list"/> 
     <local name="tsc.compile.file"/> 

     <property name="tsc.compile.file" value="@{src}compile.list" /> 

     <!-- Optional arguments are not written to compile file when attributes not set --> 
     <condition property="out.arg" value="" else='--out "@{out}"'> 
      <equals arg1="@{out}" arg2="" /> 
     </condition> 

     <condition property="module.arg" value="" else="--module @{module}"> 
      <equals arg1="@{module}" arg2="" /> 
     </condition> 

     <condition property="comments.arg" value="" else="--comments"> 
      <equals arg1="@{comments}" arg2="" /> 
     </condition> 

     <condition property="declarations.arg" value="" else="--declarations"> 
      <equals arg1="@{declarations}" arg2="" /> 
     </condition> 

     <condition property="nolib.arg" value="" else="--nolib"> 
      <equals arg1="@{nolib}" arg2="" /> 
     </condition> 

     <!-- Could have been defaulted to ES3 but let the compiler uses its own default is quite better --> 
     <condition property="target.arg" value="" else="--target @{target}"> 
      <equals arg1="@{target}" arg2="" /> 
     </condition> 

     <!-- Recursively read TypeScript source directory and generate a compile list --> 
     <pathconvert property="typescript.file.list" dirsep="\" pathsep="${line.separator}"> 

      <fileset dir="@{src}"> 
       <include name="**/*.ts" /> 
      </fileset> 

      <!-- In case regexp doesn't work on your computer, comment <mapper /> and uncomment <regexpmapper /> --> 
      <mapper type="regexp" from="^(.*)$" to='"\1"' /> 
      <!--regexpmapper from="^(.*)$" to='"\1"' /--> 

     </pathconvert> 


     <!-- Write to the file --> 
     <echo message="Writing tsc command line arguments to : ${tsc.compile.file}" /> 
     <echo file="${tsc.compile.file}" message="${typescript.file.list}${line.separator}${out.arg}${line.separator}${module.arg}${line.separator}${comments.arg}${line.separator}${declarations.arg}${line.separator}${nolib.arg}${line.separator}${target.arg}" append="false" /> 

     <!-- Compile using the generated compile file --> 
     <echo message="Calling ${typescript.compiler.path} with ${tsc.compile.file}" /> 
     <exec dir="@{src}" executable="${typescript.compiler.path}"> 
      <arg value="@${tsc.compile.file}"/> 
     </exec> 

     <!-- Finally delete the compile file --> 
     <echo message="${tsc.compile.file} deleted" /> 
     <delete file="${tsc.compile.file}" /> 

    </sequential> 

</macrodef> 

それを使用して、あなたはbashので作業する場合は、再帰的にすべての*.tsファイルを検索し、それらをコンパイルするために見つける使用することができますビルドファイルに:

<!-- Compile a single JavaScript file in the bin dir for release --> 
    <TypeScriptCompileDir 
     src="${src-js.dir}" 
     out="${release-file-path}" 
     module="amd" 
    /> 

それは私がWebstormを使用して、一度に働いているPureMVC for TypeScriptプロジェクトで使用されています。

+0

Antのマイクロスクリプトのように、すべてのファイルを見ることができますか?答えを広げて、この解決策の一部としてそれを使用する方法を説明したいかもしれません。 –

+0

私は簡単な例を挙げてブログ投稿を作成し、これをここにリンクしようとします。あなたがここで待つことができない場合は、私が使用しているプロジェクトです。https://github.com/tekool/puremvc-typescript-singlecore完全なAntビルドファイルはhttps://github.com/tekool/です。 puremvc-typescript-singlecore/blob/master/build/build.xml – Tekool

6

はこれを自動化するうなり声を使用してに見て、そこに多数のチュートリアルは周りですが、ここでのクイックスタートです。

のようなフォルダ構造については

:あなたが見て、で簡単に例フォルダからtypescriptですで動作することができます

blah/ 
blah/one.ts 
blah/two.ts 
blah/example/ 
blah/example/example.ts 
blah/example/package.json 
blah/example/Gruntfile.js 
blah/example/index.html 

:パッケージに

npm install 
grunt 

。JSON:

{ 
    "name": "PROJECT", 
    "version": "0.0.1", 
    "author": "", 
    "description": "", 
    "homepage": "", 
    "private": true, 
    "devDependencies": { 
    "typescript": "~0.9.5", 
    "connect": "~2.12.0", 
    "grunt-ts": "~1.6.4", 
    "grunt-contrib-watch": "~0.5.3", 
    "grunt-contrib-connect": "~0.6.0", 
    "grunt-open": "~0.2.3" 
    } 
} 

そして面倒ファイル:

module.exports = function (grunt) { 

    // Import dependencies 
    grunt.loadNpmTasks('grunt-contrib-watch'); 
    grunt.loadNpmTasks('grunt-contrib-connect'); 
    grunt.loadNpmTasks('grunt-open'); 
    grunt.loadNpmTasks('grunt-ts'); 

    grunt.initConfig({ 
    pkg: grunt.file.readJSON('package.json'), 
    connect: { 
     server: { // <--- Run a local server on :8089 
     options: { 
      port: 8089, 
      base: './' 
     } 
     } 
    }, 
    ts: { 
     lib: { // <-- compile all the files in ../ to PROJECT.js 
     src: ['../*.ts'], 
     out: 'PROJECT.js', 
     options: { 
      target: 'es3', 
      sourceMaps: false, 
      declaration: true, 
      removeComments: false 
     } 
     }, 
     example: { // <--- compile all the files in . to example.js 
     src: ['*.ts'], 
     out: 'example.js', 
     options: { 
      target: 'es3', 
      sourceMaps: false, 
      declaration: false, 
      removeComments: false 
     } 
     } 
    }, 
    watch: { 
     lib: { // <-- Watch for changes on the library and rebuild both 
     files: '../*.ts', 
     tasks: ['ts:lib', 'ts:example'] 
     }, 
     example: { // <--- Watch for change on example and rebuild 
     files: ['*.ts', '!*.d.ts'], 
     tasks: ['ts:example'] 
     } 
    }, 
    open: { // <--- Launch index.html in browser when you run grunt 
     dev: { 
     path: 'http://localhost:8089/index.html' 
     } 
    } 
    }); 

    // Register the default tasks to run when you run grunt 
    grunt.registerTask('default', ['ts', 'connect', 'open', 'watch']); 
} 
19

TypeScript 1.5 betaでは、tsconfig.jsonという構成ファイルのサポートが導入されました。そのファイルでは、コンパイラを設定し、コードの書式設定ルールを定義し、さらに重要なことに、プロジェクトのTSファイルに関する情報を提供することができます。

正しく設定されたら、単にtscコマンドを実行して、プロジェクトのすべてのTypeScriptコードをコンパイルするだけです。

変更をファイルで監視したい場合は、単にtscコマンドに--watchを追加します。ここで

は、上記の例では、ファイル

{ 
"compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "declaration": false, 
    "noImplicitAny": false, 
    "removeComments": true, 
    "noLib": false 
}, 
"include": [ 
    "**/*" 
], 
"exclude": [ 
    "node_modules", 
    "**/*.spec.ts" 
]} 

tsconfig.json例ですが、私は(再帰的に)私のプロジェクト内のすべての.TSファイルが含まれています。配列とともに「除外」プロパティを使用してファイルを除外することもできます。

詳細については、マニュアルを参照してください:http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

+2

glob構文は実際に実装されていますか?スキーマにはありません – Serguzest

+2

実際にはありません。それ以来、グロブパターンはまだ議論中です。 filesGlobはAtomエディターでのみサポートされています。今のところ、 'ファイル'と '除外'プロパティを指定できます。 – dSebastien

+2

目を引く問題は次のとおりです。https://github.com/Microsoft/TypeScript/pull/3232 – dSebastien

関連する問題