typescript - Angular2 TypeScript アプリケーションを単一のファイルにコンパイルする方法は?

Question

アプリケーションをコンパイルすると、tsc my_app.ts --target systemインポートされたモジュールごとに SystemJS でラップされたファイルが生成されることに気付きました。

この質問を「TypeScript を名前付き SystemJS モジュールにコンパイルする方法」にすることを考えましたが、私の目標は、Angular2 アプリを SystemJS かどうかに関係なく単一のファイルにコンパイルすることです。

Answer 1

この--outFileオプションは--module、TypeScript 1.8 以降のオプション (AMD および SystemJS 用) と連携するため、ネイティブで実行できます。これが変更ログです。TypeScript は、外部モジュールに存在しないすべての依存関係も自動的にプルするため、メインのアプリ ファイルのみをコンパイルするだけで十分です。

Angular 2 が SystemJS から切り替わらない場合、アプリを単一のファイルにバンドルする方法は、次のようなオプションを使用してコンパイルするのと同じくらい簡単です。tsc app.ts --target ES5 --module system --experimentalDecorators --moduleResolution node --emitDecoratorMetadata --outFile app.js

その後、次のような方法でアプリケーションをブートストラップできるはずです。

<script src="/bower_components/system.js/dist/system-register-only.js"></script>
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/app.js"></script>
<script>
    System.import('app');
</script>

Answer 2

ウェブの場合:

1. TypeScript コンパイラを使用して JavaScript にコンパイルします。
2. JavaScript でbrowserifyを使用して、1 つのファイルに結合します。

ただし、これを行う簡単な方法はtsifyを使用することです。TypeScript をコンパイルする browserify プラグインです。

Answer 3

tsc コンパイル後に js ファイルを配置する場所を tsc コンパイラーに指示する必要があります (コマンド: tsc -w)。tsconfig.js ファイルの 2 つのパラメーターは、TypeScript コンパイラーに、すべての js 出力をディレクトリ内の 1 つのファイルに入れるように指示します。

"outDir":"dist/",
"outFile": "dist/app.js"

私の完全な tsconfig.js は以下の通りです

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir":"dist/",
    "outFile": "dist/app.js"
  }
}