Visual Studio - ASP.NET5 プロジェクト内で TypeScript プロジェクトをコンパイルする

私は最新のASP.NET5 beta8をインストールし、新しいプロジェクトを作成しました。プロジェクト内に新しいフォルダーを作成し、tsproject.jsonファイルを追加し、いくつかのTypeScriptファイル.tsを書きました。

TypeScriptのサブプロジェクトを自動的にコンパイルしたいです。どうすればいいでしょうか？何かgruntタスクを書いた方がいいですか、それともVSで自動的にTypeScriptファイルをコンパイルする設定を有効にしますか（でもtsconfig.jsonの設定を使ってフォルダー内のすべてのファイルをコンパイルしますか？）、それとも他の方法ですか？

回答 #1

プロジェクトのルートに tsconfig.json ファイルを追加します:

{
  // TypeScript to JavaScript compilation options. Add what you want here.
  "compilerOptions": {
    "noImplicitAny": true,   // Do not allow implicit any variables.
    "noEmitOnError": true,   // Stop processing on error.
    "removeComments": false, // Do not remove comments.
    "sourceMap": false,      // Do not create source map files.
    "module": "commonjs",    // Use the Common JS modules or some other format.
    "target": "es5"          // Compile to ECMAScript 5.
  },
  // Exclude the bower_components, node_modules and wwwroot folders from
  // being scanned for TypeScript (.ts) or TypeScript definition (.d.ts) files.
  "exclude": [
    "bower_components",
    "node_modules",
    "wwwroot"
  ]
}

.ts ファイルをコンパイルするための gulp-typescript、ファイルを結合するための gulp-concat、Gulp ストリームをマージするための merge-stream を package.json に追加します:

{
    // Omitted...
    "devDependencies": {
        // Omitted...
        "gulp-concat": "2.6.0",
        "gulp-typescript": "2.9.2",
        "merge-stream": "1.0.0"
    }
}

あなたの gulpfile.js ファイルに、新しい TypeScript ビルドタスクを追加します（ビルド時間を短縮するためのインクリメンタルビルドの方法を示していますので、これは少し高度です。より簡単なものを見たい場合は、gulp-typescript のドキュメントを参照してください）：

var gulp = require("gulp");
var concat = require("gulp-concat");
var typescript = require("gulp-typescript");
var merge = require("merge-stream");

// A TypeScript project is used to enable faster incremental compilation, 
// rather than recompiling everything from scratch each time. Each 
// resulting compiled file has it's own project which is stored in 
// the typeScriptProjects array.
var typeScriptProjects = [];
function getTypeScriptProject(name) {
    var item;
    for (var i = 0; i < typeScriptProjects.length; ++i) {
        if (typeScriptProjects[i].name === name) {
            item = typeScriptProjects[i];
        }
    }

    if (item === undefined) {
        // Use the tsconfig.json file to specify how TypeScript (.ts) 
        // files should be compiled to JavaScript (.js).
        var project = typescript.createProject("tsconfig.json");
        item = { name: name, project: project };
        typeScriptProjects.push(item);
    }

    return item.project;
}

var sources = {
    // An array containing objects required to build a single JavaScript file.
    ts: [
        {
            // name - The name of the final JavaScript file to build.
            name: "main.js",
            // paths - A single or array of paths to TypeScript files.
            paths: [
                "Folder1/one.ts",
                "Folder1/two.ts",
                "Folder2/**/*.ts"
            ]
        }
    ]
};

gulp.task("build-ts", function () {
    var tasks = sources.ts.map(function (source) { // For each set of source files in the sources.
        return gulp                                // Return the stream.
            .src(source.paths)                     // Start with the source paths.
            .pipe(typescript(getTypeScriptProject(source))) // Compile TypeScript (.ts) to JavaScript (.js) using the specified options.
            .pipe(concat(source.name))             // Concatenate JavaScript files into a single file with the specified name.
            .pipe(gulp.dest("./wwwroot/js/"));     // Saves the JavaScript file to the specified destination path.
    });
    return merge(tasks);                           // Combine multiple streams to one and return it so the task can be chained.
});

回答 #2

ところで、複数の tsconfig.json を使って、それらをサブフォルダに入れることはできますか？

tsc -p ./subfolder