1. ホーム
  2. javascript

[解決済み] Typescript を単一ファイルにコンパイルする

2023-05-15 18:57:43

質問

私はTS 1.7を使用しています。私は私のプロジェクトを私のhtmlファイルに含めることができるようにする1つの大きなファイルにコンパイルしようとしています。

私のプロジェクト構造は次のようなものです。

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

私は何を間違えているのでしょうか?

どうすればよいのでしょうか?

これは TypeSript 1.8で実装される予定です。 . そのバージョンでは outFile オプションは モジュール amd または システム .

現時点では、この機能は開発版のTypescriptで利用可能です。 それをインストールするには、実行します。

$ npm install -g typescript@next

以前のバージョンでは、たとえ明らかでなくとも モジュール outFile オプションは一緒に動作させることはできません。

確認できるのは これ をご覧ください。


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文を使う代わりにnamespaceでimportを参照する必要があります。

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