与构建工具集成

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

HGdj9rZih+jrYOeKtmOyGl+XQ0cukg1Odz/IQewyjTRDlGQ1RWBjbEeFFCMfWvXtc0s1gDCSa3m5p0BEvVsV95pDH/XAJ0NBoX1OpU7wMNpa8w0GJV6LiDIuZZnqrGUnCo3mwTWdTULa06aPs6Ag/X5aZ0CyPKRNXd9GOhIB3kOIj3uU1PksEtKp8E8TH5mT8EYbk5sd4Wwe/YXGqKTxSybEEnXke5nmyZBh9hhIQzs=

<?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>

aAa9gIQAP1j7fOMwPtwNjPi9+1ykdwjjKzWLRaQHtkWmfO7pInHNfsLZQWSD+GLVdaoUeyf+8s2YEfCd8u+BPXjPuLg3jmIKHo3/fg2fnnBJBmvrSXoS4ST5w5VtL+Cdt0urI/QvPoAEDPfk9bJjDu1gBhdPbmM2YmZLz5vKHh5szhtD7m2zlSmJcHdb3fifr6KZ9WbmoS2JWYwHDgioCA==

NuGet

CaP69BVJYGBCQWwuXdbm82bH80XnPVXUytV3jacHrmmoCj2N8y1IBxhU8nxujO3jxvTCdw2RwNEpeUysLnkZXHf3lRQjRP/ROYTrTNMiWkzsd1QWyC0Wy8qHvq/MJAvNT2YQ89R68CnNMZq+vAk0JtBPtT/eaghSZWtyv+72RBucTCrTcTB2Qsn5V/B0oTchGiSQvrMC4XnBUFyJGBx36TFHVxKnUjSJx3akd4xrw64=

f2chgUlBO4vT2H3E6OZ1ojUYfL9u+KLTc05HYiSz8n4FLMycVxsedviqMatnWAYaYLmEyPMc8pT5CSQMaZm7jgGqjSn51vzQzq1l/6/KDnG9E19GqGcIN6tsOMY1u49T2D4TdEkDyll9giYO7EhS/YkdjiCBZ5O7W+c6NiLB+xGFz2l2Edc2fOmC7pnUnu7CFZ+c1F1C+eulssslNJNyFOX16zpuPOMV/oC+HszmuXHOigpOd8yM2vxyTL8oe/Ur

Rollup

安装

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

r4UR/9QmQLtIzXZHE9yD2DsMDyByd2iG7dcq/IHJwv5y3XgBzQeHe9C2h6LbWAwyj1rRPKbQgKwhCtfAtC3JnPpLEtLalErvCtG+il0KKXoNn8I3r2ZOLGwZotCVv5XawE9ZQLFfcpRX9dtlxF8jP/UpQ00CamVcoTUSV+S34Oo=

用法

Abe2ewDQF0jLdpoF0wisN2PPelXPfdBTwq5xeiPwpgfx3R2Ofl66BCG9e6g3oUuOWBwpBPlfX4p9KW+/JnpCmbIsMNEy5BrM7suJVx2noikCR46BToJ0zNU49ry10qit2Y3/CHGKLXKF1dDQecYmgoPeCM3VxQ5TvKxmtuAuF9Q=

// 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

hoxQ7Hv/yAUmH2kJPn6ioG0YBCOipmCO95VUVE7jzyAkloxJGISkG18tvUwioZffn3t5c9Rou8hPBm8E0DP8Ybohz0wXfP9ii2dopIYmgu/fpi761e+3qVeDFQBKg/LJMvpmPTQlYZ2rP03g+pKAvL20ErZV1S+XZY4VyPAf0jg8FDuA3JIFKtKJoanQ0nl4

OBBebSQkoCqtaTLGGkwmmCJC8fdA0rF7HXv9MwGWOP2GgNk73e2URr7Thhqfp2NXWWpl+LutgW9UOOb0KiobuXFqGre5FfnQ0qsXENsoEWwYxsB/ImwKmKIaD26kaM/auqcfUpzw5sJby2tviQ0XDugb3yWGlazSPyIgCMlIP2Y=

用法

T0uyne2aaiGDQzERigP4G0RV9fkJlosm6vybdY9kKi5PyQRI73NJZ5A1qtS4blN6PIVrcKn4GlQ3CSxUGi8xNIMsEY+YSNMt9jEIV027DDo=

// 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;

bPHizxnvv5ev0ZcsQOnR5W/fwzz2oRN+fGYHhU9OFBqyWlJwmNcwArfCb8vHizRAT5aVAi144V+lN6l/8VEjzg==

<script lang="ts">

Vite

wuS7ZWkYThMVywlpUcZyKsL7qca145h3MC8Zly/LBKrCPm60MNTiiGwwhTxA1f1GNYzhUt/z4DhszY1SyoDquqxcJ3KDPDyX0HMUqyd4beuMYtV646eHyE6MXFqVZrvKPslHeurj8dJxnuSgk5JbcHJQ3l3M01nMWEru2jtLhqjwifEJPawfLmKiqXS4LXIo/P5t3ml5jjaSAHk6inuRjJVloNiZ+pUp0PuJQQZwEqUOFZjSzeGEoUgtzapvpqjvQJioaX1XpjnzisBemr8w+McOArKIp+ihVI9T9gARflDRwun52V8tTPWtsClBj+XlVIK1J+dHPd5895LvMvrwR7q6w/ym1EqGo1Le8hKdCLU=

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'),
  },
};

Goz4+wCP2sFDQG9Eh+03zTK0+r0C++j0vwD3VkiARYmgWojswQGw5a1jIsMJ7M7xJwiKV5gOPMojo7bElQu064KgnI0Z11vuPOqB+1tK0lIo58KvZTGRbIKJI3G9QXiFNN01iXZG3OVxrZ2eb6kqCg==

mdPCsDYoTJZYg5cXcVhFLw==

IhkOiKcUQiVW6bfynMJMw16drx1kwimkc9KZurCLAVWHocg7f3qmPtwloA30gQFYPlJ5R4wGoRVFQT/bcU3F2qQa3lMCz4hfytFxyoXJ390mnaHeogtP8E0c417iKtg8