这将在TypeSript 1.8 中实现。使用该版本时，outFile选项在module为amd或system时起作用。

目前该功能在 Typescript 的开发版中可用。要安装该运行：

$ npm install -g typescript@next

对于以前的版本，即使module和outFile选项不明显，也不能一起工作。

您可以查看此问题以获取更多详细信息。

如果要输出版本低于 1.8 的单个文件，则不能使用tsconfig.json 中的module选项。相反，您必须使用module 关键字来创建名称空间。

您的tsconfig.json文件应如下所示：

{
  "compilerOptions": {
    "target": "ES5",
    "removeComments": true,
    "preserveConstEnums": true,
    "outFile": "./build/build.js",
    "sourceRoot": "./src/",
    "rootDir": "./src/",
    "sourceMap": true
  }
}

此外，您的 TS 文件应如下所示：

module SomeModule {
  export class RaceTrack {
    constructor(private host: Element) {
      host.appendChild(document.createElement("canvas"));
    }
  }
}

而不是使用 import 语句，您必须通过命名空间来引用导入。

window.addEventListener("load", (ev: Event) => {
  var racetrack = new SomeModule.RaceTrack(document.getElementById("content"));
});

选项 1 - 如果您不使用module

如果您的代码仅包含常规 Typescript，而没有module（导入/导出），则您只需将参数添加outfile到tsconfig.json.

// tsconfig.json
{
    "compilerOptions": {
        "lib": ["es5", "es6", "dom"],
        "rootDir": "./src/",
        "outFile": "./build/build.js"
    }
}

但是这个选项有一些限制。

如果您收到此错误：

Cannot compile modules using option 'outFile' unless the '--module' flag is 'amd' or 'system'

试试下面的“选项 2”。

选项 2 - 使用module加载器

如果您使用module（导入/导出），您将需要一个module加载器来在浏览器中运行您编译的脚本。

当您编译为单个文件（使用outFile）时，Typescript 本机支持编译为amd和systemmodule加载器。

在 tsconfig 中，您需要设置module为amd或system：

// tsconfig.json
{
    "compilerOptions": {
        "module": "AMD",
        "lib": ["es5", "es6", "dom"],
        "rootDir": "./src/",
        "outFile": "./build/build.js"
    }
}

如果选择AMD，则需要使用require.js运行时。AMD 需要一个 AMD 加载器，require.js 是最受欢迎的选项（https://requirejs.org/）。

如果选择 System，则需要使用 SystemJS module加载器 ( https://github.com/systemjs/systemjs )。

选项 3 - 使用module打包器/构建工具

或许，最好的选择是使用module打包器/构建工具，比如 Webpack。

Webpack 会将您的所有 TypeScript 文件编译为单个 JavaScript 包。

因此，您将使用webpack编译，而不是tsc.

首先安装 webpack，webpack-cli然后ts-loader：

npm install --save-dev webpack webpack-cli typescript ts-loader

如果您使用的是带有typescript的WebPack，也最好使用module带commonjs：

// tsconfig.json
{
    "compilerOptions": {
        "module": "commonjs",
        "lib": ["es5", "es6", "dom"],
        "rootDir": "src"
    }
}

网络包webpack.config.js示例：

//webpack.config.js
const path = require('path');

module.exports = {
  mode: "development",
  devtool: "inline-source-map",
  entry: {
    main: "./src/YourEntryFile.ts",
  },
  output: {
    path: path.resolve(__dirname, './build'),
    filename: "[name]-bundle.js" // <--- Will be compiled to this single file
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  module: {
    rules: [
      { 
        test: /\.tsx?$/,
        loader: "ts-loader"
      }
    ]
  }
};

现在，要编译，而不是使用tsc命令执行，请使用webpack命令。

package.json 例子：

{
  "name": "yourProject",
  "version": "0.1.0",
  "private": true,
  "description": "",
  "scripts": {
    "build": "webpack" // <---- compile ts to a single file
  },
  "devDependencies": {
    "ts-loader": "^8.0.2",
    "typescript": "^3.9.7",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

Webpack 的 TypeScript 文档

最后，使用以下命令编译所有内容（最好在监视模式下）：

npx webpack -w

最简单的方法

您可以使用名为ncc的自定义工具来完成此操作，该工具由Vercel构建和维护。以下是他们在create-next-app 中使用它的方式：

ncc build ./index.ts -w -o dist/

用纱线安装它：

yarn add @vercel/ncc

或 npm：

npm install @vercel/ncc