Question

我安装了最新的ASP.NET5 beta8并创建了新项目。在项目内部我创建了一个新文件夹，添加了tsproject.json文件并编写了一些TypeScript文件.ts

我想自动编译我的TypeScript子项目。我该怎么办？我应该编写某种grunt任务，在VS中启用自动TypeScript文件编译（但是它会使用tsconfig.json设置编译文件夹中的所有文件吗？）或其他什么？

Answer 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"
  ]
}

添加gulp-typescript以编译.ts文件，gulp-concat以连接文件，并merge-stream将Gulp流合并到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.
});

Answer 2

BTW我可以使用几个tsconfig.json并将它们放在子文件夹中吗？

tsc -p ./subfolder

在ASP.NET5项目中编译TypeScript项目

2 个答案: