Integrating with Build Tools

与构建工具集成

构建工具

• Browserify

• Duo

• Grunt

• Gulp

• Jspm

• Webpack

• MSBuild

• NuGet

Browserify

安装

npm install tsify

使用命令行界面

browserify main.ts -p [ tsify --noImplicitAny ] > bundle.js

使用 API

var browserify = require("browserify"
var tsify = require("tsify"

browserify()
  .add("main.ts")
  .plugin("tsify", { noImplicitAny: true })
  .bundle()
  .pipe(process.stdout

更多细节：smrq / tsify

Duo

安装

npm安装duo-typescript

使用命令行界面

duo  - 使用duo-typingcript entry.ts

使用 API

var Duo = require("duo"
var fs = require("fs")
var path = require("path")
var typescript = require("duo-typescript"

var out = path.join(__dirname, "output.js")

Duo(__dirname)
  .entry("entry.ts")
  .use(typescript())
  .run(function (err, results) {
    if (err) throw err;
    // Write compiled result to output file
    fs.writeFileSync(out, results.code
  }

更多细节：frankwallis / duo-typingcript

Grunt

安装

npm install grunt-ts

Basic Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig{
    ts: {
      default : {
        src: ["**/*.ts", "!node_modules/**/*.ts"]
      }
    }
  }
  grunt.loadNpmTasks("grunt-ts"
  grunt.registerTask("default", ["ts"]
};

更多细节：TypeStrong / grunt-ts

Gulp

安装

npm install gulp-typescript

Basic gulpfile.js

var gulp = require("gulp"
var ts = require("gulp-typescript"

gulp.task("default", function () {
  var tsResult = gulp.src("src/*.ts")
    .pipe(ts{
        noImplicitAny: true,
        out: "output.js"
    })
  return tsResult.js.pipe(gulp.dest("built/local")
}

更多细节：ivogabe / gulp-typingcript

Jspm

安装

npm install -g jspm@beta

注意：目前 jspm 中的 TypeScript 支持为 0.16beta

更多细节：TypeScriptSamples / jspm

Webpack

安装

npm install ts-loader --save-dev

Basic webpack.config.js

module.exports = {
  entry: "./src/index.tsx",
  output: {
    filename: "bundle.js"
  },
  resolve: {
    // Add '.ts' and '.tsx' as a resolvable extension.
    extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
  },
  module: {
    loaders: [
      // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
      { test: /\.tsx?$/, loader: "ts-loader" }
    ]
  }
}

在这里查看ts-loader的更多细节。

备择方案：

• awesome-typescript-loader MSBuildUpdate项目文件包括本地安装Microsoft.TypeScript.Default.props (at the top) and Microsoft.TypeScript.targets (at the bottom) files:<?xml version="1.0" encoding="utf-8"?> <Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003"> <!-- Include default props at the bottom --> <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" /> <!-- TypeScript configurations go here --> <PropertyGroup Condition="'$(Configuration)' == 'Debug'"> <TypeScriptRemoveComments>false</TypeScriptRemoveComments> <TypeScriptSourceMap>true</TypeScriptSourceMap> </PropertyGroup> <PropertyGroup Condition="'$(Configuration)' == 'Release'"> <TypeScriptRemoveComments>true</TypeScriptRemoveComments> <TypeScriptSourceMap>false</TypeScriptSourceMap> </PropertyGroup> <!-- Include default targets at the bottom --> <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" /> </Project>More details about defining MSBuild compiler options: Setting Compiler Options in MSBuild projectsNuGet

• 右键单击 - >管理 NuGet 包

• 搜索 Microsoft.TypeScript.MSBuild

• 击中 Install

• 安装完成后，重建！

更多细节可以在 Package Manager 对话框中找到，并使用 NuGet 每晚构建