visual studio - Kompilera TypeScript-projekt inuti ASP.NET5-projekt


Jag installerade den senaste ASP.NET5 beta8 och skapade ett nytt projekt. Inuti projektet skapade jag en ny mapp, lade till tsproject.json-fil och skrev några TypeScript-filer .ts

Jag vill kompilera mitt TypeScript-underrprojekt automatiskt. Vad ska jag göra? Ska jag skriva någon slags grunt-uppgift, aktivera automatisk kompilering av TypeScript-filer i VS (men kommer det att kompilera alla filer i mappen med inställningarna i tsconfig.json??), eller något annat?

Svar #1

Lägg till en tsconfig.json-fil i roten av ditt projekt:

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

Lägg till gulp-typescript för att kompilera .ts-filer, gulp-concat för att sammanfoga filer och merge-stream för att slå samman Gulp-strömmar till package.json:

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

I din gulpfile.js-fil, lägg till en ny bygg-uppgift för TypeScript (jag visar hur man gör inkrementell byggnation för snabbare byggtider så detta är lite avancerat, du kan titta på dokumentationen för gulp-typescript om du vill titta på något enklare):

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.
});

Svar #2

Förresten, kan jag använda flera tsconfig.json och lägga dem i undermappar?

tsc -p ./subfolder