# 与构建工具集成

# Babel

# 安装


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

# .babelrc

{
  "presets": ["@babel/preset-typescript"]
}

# 使用命令行界面


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

# package.json

{
  "scripts": {
    "build": "babel --out-file bundle.js main.ts"
  },
}

# 从命令行执行 Babel


npm run build

# 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

# Grunt

# 安装


npm install grunt-ts

# 基本 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

# 基本 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-typescript

# Jspm

# 安装


npm install -g jspm@beta

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

更多细节：TypeScriptSamples/jspm

# MSBuild

更新项目文件以包含本地安装的 Microsoft.TypeScript.Default.props（顶部）和 Microsoft.TypeScript.targets（底部）文件：

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">

  <Import
      Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props"
      Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />

  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
  </PropertyGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptRemoveComments>true</TypeScriptRemoveComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
  </PropertyGroup>

  <Import
      Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets"
      Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />
</Project>

有关定义 MSBuild 编译器选项的更多详细信息：在 MSBuild 项目中设置编译器选项

# NuGet

右键单击 -> 管理 NuGet 包
搜索 Microsoft.TypeScript.MSBuild
打Install
安装完成后重建！

更多细节可以在 包管理器对话框 和 使用 NuGet 的夜间构建 找到

# Rollup

# 安装


npm install @rollup/plugin-typescript --save-dev

请注意，typescript和 tslib都是该插件的对等依赖项，需要单独安装。

# 用法

创建一个 rollup.config.js 配置文件，并导入插件：

// rollup.config.js
import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/index.ts',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [typescript()]
};

# Svelte 编译器

# 安装


npm install --save-dev svelte-preprocess

注意 typescript是该插件的可选对等依赖项，需要单独安装。tslib也没有提供。

您也可以考虑使用 svelte-check 进行 CLI 类型检查。

# 用法

创建svelte.config.js配置文件并导入插件：

// svelte.config.js
import preprocess from 'svelte-preprocess';

const config = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: preprocess()
};

export default config;

您现在可以指定脚本块是用 TypeScript 编写的：

<script lang="ts">

# Vite

Vite 支持开箱即用地导入 .ts文件。它只执行转译而不是类型检查。它还要求某些 compilerOptions具有一定的值。有关详细信息，请参阅 Vite 文档 。

# Webpack

# 安装


npm install ts-loader --save-dev

# 使用 Webpack 5 或 4 时的基本 webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

见 此处有关 ts-loader 的更多详细信息 。

备择方案：

awesome-typescript-loader

← 项目参考手册配置监视 →