Come compilare un'applicazione TypeScript Angular2 in un singolo file?

Question

Mi rendo conto che posso compilare la mia domanda con tsc my_app.ts --target system e genererà un file con SystemJS per ogni modulo importato, che è fantastico, ma genera funzioni anonime (senza nome), quindi non posso semplicemente concatenarle a un singolo file.

Ho pensato di fare questa domanda "come compilare TypeScript in moduli SystemJS denominati", ma il mio obiettivo è solo di compilare la mia app Angular2 su un singolo file, SystemJS o meno.

Answer 1

L'opzione --outFile funziona con l'opzione --module (per AMD e SystemJS) da TypeScript 1.8, quindi può essere eseguita in modo nativo. Here's the changelog. TypeScript estrae automaticamente tutte le dipendenze che non risiedono nei moduli esterni, quindi è sufficiente compilare solo il file dell'app principale.

Se angolare 2 non passa lontano dal SystemJS, il modo di riunire la vostra applicazione in un singolo file dovrebbe essere semplice come compilarlo con le opzioni come tsc app.ts --target ES5 --module system --experimentalDecorators --moduleResolution node --emitDecoratorMetadata --outFile app.js

Dopo di che dovrebbe essere possibile il bootstrap l'applicazione con qualcosa di simile:

<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

per il Web:

1. utilizzare il compilatore per compilare dattiloscritto a JavaScript.
2. Utilizzare browserify sul codice JavaScript per combinarlo in un singolo file.

Un modo più semplice per farlo è utilizzare tsify. È un plugin per browserify che compila TypeScript.

Answer 3

Hai bisogno di dirvi TSC compailer dove mettere i file js dopo TSC compilare (comando: TSC -w). I due parametro nel file tsconfig.js dice dattiloscritto compailer di mettere tutti JS fuori ha messo in un unico file in una directory è

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

miei tsconfig.js completa è, come di seguito

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