編譯ASP.NET5項目中的TypeScript項目

Question

我安裝了最新的ASP.NET5 beta8並創建了新項目。在項目內部，我創建了一個新文件夾，添加了tsproject.json文件並編寫了一些TypeScript文件。我想要自動編譯我的TypeScript子項目。我該怎麼辦？我應該寫些什麼樣的咕嚕任務，在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合併咕嘟咕嘟流至package.json：

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

在你的gulpfile.js文件中，添加一個新的構建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