打字稿编译为单个文件 [英] Typescript compile to single file

问题描述

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

I'm using TS 1.7 and I'm trying to compile my project to one big file that I will be able to include in my html file.

我的项目结构如下:

-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 文件是:

my tsconfig file is:

 {
  "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 文件.

When I build my project I expect the build.js file to be one big file compiled from my source. But ths build.js file is empty and I get all of my files compiled o js files.

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

Each of my TS files look a bit like this

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

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

我做错了什么?

推荐答案

这将在 TypeSript 1.8 中实现.在那个版本中，outFile 选项在 module 是 amd 或 system 时起作用.

This will be implemented in TypeSript 1.8. With that version the outFile option works when module is amd or system.

此时该功能在 Typescript 的开发版中可用.要安装该运行:

At this time the feature is available in the development version of Typescript. To install that run:

$ npm install -g typescript@next

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

For previous versions even if it's not obvious the module and the outFile options can not work together.

您可以查看这个问题了解更多详情.

You can check this issue for more details.

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

If you want to output a single file with versions lower than 1.8 you can not use the module option in tsconfig.json. Instead you have to make namespaces using the module keyword.

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

Your tsconfig.json file should look like this:

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

您的 TS 文件也应如下所示:

Also your TS files should look like this:

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

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

And instead of using the import statement you'll have to refer to the imports by namespace.

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

这篇关于打字稿编译为单个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！