Question

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

我的项目结构如下：

我的tsconfig文件是：

-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

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

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

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

我做错了什么？

Answer 1

这将在 TypeSript 1.8 中实施。使用该版本时，当模块 amd 或系统时， outFile 选项有效。

此时此功能在Typescript的开发版本中可用。要安装该运行：

$ npm install -g typescript@next

对于以前的版本，即使它不明显，模块和 outFile 选项也无法协同工作。

您可以查看this问题了解更多详情。

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

您的 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"));
});

Answer 2

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

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

用纱安装：

yarn add @vercel/ncc

或npm：

npm install @vercel/ncc

Answer 3

使用较新的Typescript版本，我可以使用以下配置将所有ts文件编译为一个大的Javascript文件：

tsconfig.json：

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

Typescript编译为单个文件

3 个答案: