Jak skompilować aplikację Angular2 TypeScript do pojedynczego pliku?

Question

Zdaję sobie sprawę, że mogę skompilować moją aplikację z tsc my_app.ts --target system i wygeneruje ona plik zawijany SystemJS dla każdego importowanego modułu, co jest niesamowite, ale generuje anonimowe (bezimienne) funkcje, więc nie mogę po prostu połączyć ich w jedną całość plik.

Pomyślałem o zrobieniu tego pytania "jak skompilować TypeScript do nazwanych modułów SystemJS", ale moim celem jest skompilowanie mojej aplikacji Angular2 do jednego pliku, SystemJS lub nie.

Answer 1

Opcja --outFile działa z opcją --module (dla AMD i SystemJS) od TypeScript 1.8, więc można to zrobić natywnie. Here's the changelog. TypeScript automatycznie pobiera również wszystkie zależności, które nie znajdują się w modułach zewnętrznych, więc wystarczy tylko skompilować główny plik aplikacji.

Jeśli kątowa 2 nie włącza się od SystemJS, sposób połączą swoją aplikację w jednym pliku powinno być tak proste, jak kompilowanie go z opcjami jak tsc app.ts --target ES5 --module system --experimentalDecorators --moduleResolution node --emitDecoratorMetadata --outFile app.js

Po tym powinna istnieć możliwość załadowania aplikacji z czymś podobnym:

<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

Na stronie:

1. pomocą kompilatora maszynopis skompilować do JavaScript.
2. Użyj kodu JavaScript, aby połączyć go z jednym plikiem.

Jednak łatwiejszym sposobem jest użycie tsify. Jest to przeglądarka, która kompiluje TypeScript.

Answer 3

Musisz powiedzieć tsc compailer gdzie umieścić pliki js po kompilacji tsc (polecenie: tsc -w). Dwa parametr w pliku tsconfig.js mówi maszynopis compailer umieścić wszystkie JS się umieścić w jednym pliku w katalogu jest

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

moje pełne tsconfig.js jest poniżej

{ 
    "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" 
    } 
}