与其它构建工具整合

Build tools

Babel

安装

  1. npm install @babel/cli @babel/core @babel/preset-typescript --save-dev

.babelrc

  1. {
  2. "presets": ["@babel/preset-typescript"]
  3. }

使用命令行工具

  1. ./node_modules/.bin/babel --out-file bundle.js src/index.ts

package.json

  1. {
  2. "scripts": {
  3. "build": "babel --out-file bundle.js main.ts"
  4. },
  5. }

在命令行上运行Babel

  1. npm run build

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 2 webpack.config.js 基础配置

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

Webpack 1 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的详细信息

或者

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 Dialogusing nightly builds with NuGet