Typescript 编译为单个文件

我正在使用 TS 1.7，我正在尝试将我的项目编译为一个大文件，我将能够将其包含在我的 html 文件中。

我的项目结构如下所示：

-build // Build directory
-src // source root
--main.ts // my "Main" file that uses the imports my outer files
--subDirectories with more ts files.
-package.json
-tsconfig.json

我的 tsconfig 文件是：

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

当我构建项目时，我希望 build.js 文件是从我的源代码编译的一个大文件。 但是 build.js 文件是空的，我将所有文件编译为 js 文件。

我的每个 TS 文件看起来都有点像这样

import {blabla} from "../../bla/blas";

export default class bar implements someThing {
    private variable : string;
}

我究竟做错了什么 ？

选项 1 - 如果您不使用模块

如果您的代码仅包含常规 Typescript，没有模块（导入/导出），您只需添加参数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 - 使用模块加载器

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

当您编译为单个文件时（使用outFile), Typescript 原生支持编译为amd and system模块加载器。

在 tsconfig 中，您需要设置module to amd or 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模块加载器（https://github.com/systemjs/systemjs).

选项 3 - 使用模块捆绑器/构建工具

也许，最好的选择是使用模块捆绑器/构建工具，例如 Webpack。

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

所以，你将使用webpack编译，而不是tsc.

首先安装webpack，webpack-cli and ts-loader:

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

如果您将 webpack 与 Typescript 一起使用，最好使用module with commonjs:

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

Webpack 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