• 构建工具集成
  • Browserify
    • 安装
    • 使用命令行交互
    • 使用API
  • Duo
    • 安装
    • 使用命令行交互
    • 使用API
  • Grunt
    • 安装
    • 基本Gruntfile.js
  • Gulp
    • 安装
    • 基本gulpfile.js
  • Jspm
    • 安装
  • Webpack
    • 安装
    • 基本webpack.config.js
  • MSBuild
  • NuGet

    构建工具集成

    Build tools

    • Browserify
    • Duo
    • Grunt
    • Gulp
    • Jspm
    • Webpack
    • MSBuild
    • NuGet

    Browserify

    安装

    1. npm install tsify

    使用命令行交互

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

    使用API

    1. var browserify = require("browserify");
    2. var tsify = require("tsify");
    3. browserify()
    4. .add('main.ts')
    5. .plugin('tsify', { noImplicitAny: true })
    6. .bundle()
    7. .pipe(process.stdout);

    更多详细信息:smrq/tsify

    Duo

    安装

    1. npm install duo-typescript

    使用命令行交互

    1. duo --use duo-typescript entry.ts

    使用API

    1. var Duo = require('duo');
    2. var fs = require('fs')
    3. var path = require('path')
    4. var typescript = require('duo-typescript');
    5. var out = path.join(__dirname, "output.js")
    6. Duo(__dirname)
    7. .entry('entry.ts')
    8. .use(typescript())
    9. .run(function (err, results) {
    10. if (err) throw err;
    11. // Write compiled result to output file
    12. fs.writeFileSync(out, results.code);
    13. });

    更多详细信息:frankwallis/duo-typescript

    Grunt

    安装

    1. npm install grunt-ts

    基本Gruntfile.js

    1. module.exports = function(grunt) {
    2. grunt.initConfig({
    3. ts: {
    4. default : {
    5. src: ["**/*.ts", "!node_modules/**/*.ts"]
    6. }
    7. }
    8. });
    9. grunt.loadNpmTasks("grunt-ts");
    10. grunt.registerTask("default", ["ts"]);
    11. };

    更多详细信息:TypeStrong/grunt-ts

    Gulp

    安装

    1. npm install gulp-typescript

    基本gulpfile.js

    1. var gulp = require("gulp");
    2. var ts = require("gulp-typescript");
    3. gulp.task("default", function () {
    4. var tsResult = gulp.src("src/*.ts")
    5. .pipe(ts({
    6. noImplicitAny: true,
    7. out: "output.js"
    8. }));
    9. return tsResult.js.pipe(gulp.dest('built/local'));
    10. });

    更多详细信息:ivogabe/gulp-typescript

    Jspm

    安装

    1. npm install -g jspm@beta

    注意:目前jspm的0.16beta版本支持TypeScript

    更多详细信息:TypeScriptSamples/jspm

    Webpack

    安装

    1. npm install ts-loader --save-dev

    基本webpack.config.js

    1. module.exports = {
    2. entry: "./src/index.tsx",
    3. output: {
    4. filename: "bundle.js"
    5. },
    6. resolve: {
    7. // Add '.ts' and '.tsx' as a resolvable extension.
    8. extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    9. },
    10. module: {
    11. loaders: [
    12. // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
    13. { test: /\.tsx?$/, loader: "ts-loader" }
    14. ]
    15. }
    16. };

    查看更多关于ts-loader的详细信息

    或者

    • awesome-typescript-loader

    MSBuild

    更新工程文件,包含本地安装的Microsoft.TypeScript.Default.props(在顶端)和Microsoft.TypeScript.targets(在底部)文件:

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
    3. <!-- Include default props at the top -->
    4. <Import
    5. Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props"
    6. Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />
    7. <!-- TypeScript configurations go here -->
    8. <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    9. <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
    10. <TypeScriptSourceMap>true</TypeScriptSourceMap>
    11. </PropertyGroup>
    12. <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    13. <TypeScriptRemoveComments>true</TypeScriptRemoveComments>
    14. <TypeScriptSourceMap>false</TypeScriptSourceMap>
    15. </PropertyGroup>
    16. <!-- Include default targets at the bottom -->
    17. <Import
    18. Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets"
    19. Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />
    20. </Project>

    关于配置MSBuild编译器选项的更多详细信息,请参考:在MSBuild里使用编译选项

    NuGet

    • 右键点击 -> Manage NuGet Packages
    • 查找Microsoft.TypeScript.MSBuild
    • 点击Install
    • 安装完成后,Rebuild。
      更多详细信息请参考Package Manager Dialog和using nightly builds with NuGet