如何將Angular2 TypeScript應用程序編譯爲單個文件？

我意識到，我可以編譯我的應用程序與tsc my_app.ts --target system，它會生成每個導入模塊，這是真棒一個SystemJS包裹的文件，但它產生匿名（無名）的功能，所以我不能只是它們串聯到單文件。如何將Angular2 TypeScript應用程序編譯爲單個文件？

我想過讓這個問題「如何編譯打字稿名爲SystemJS模塊」，但我的目標只是編譯我Angular2應用到單個文件，SystemJS與否。

來源

2015-10-18 Gray Fox

參見[ - 不過outFile（https://github.com/Microsoft/TypeScript/wiki/Compiler-Options） –

@EricMartinez不幸的是，'--out' /'--outFile'選項不與'--module'選項工作（例如，如果你有進口）https://github.com/Microsoft/TypeScript/issues/1544 –

我已經發布了一個更新的答案，因爲在打字原稿1.8 –

--outFile選項與自TypeScript 1.8以來的--module選項（適用於AMD和SystemJS）一起使用，因此可以在本機完成。 Here's the changelog。 TypeScript還會自動提取所有不在外部模塊中的依賴關係，因此僅編譯主應用程序文件就足夠了。

如果角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>

來源

2015-11-28 21:44:54

版本中添加此功能我們不能在'tsconfig.json'文件中做到這一點嗎？ –

@DannyBullis可以，它的工作原理是相同的。 –

對於Web：

使用打字稿編譯器來編譯爲JavaScript。
在JavaScript中使用browserify將其合併到一個單一的文件。

這樣做的更簡單的方法是使用tsify。這是一個編譯TypeScript的瀏覽器插件。

來源

2015-10-18 19:17:42

你需要告訴你tsc compailer tsc compile（命令：tsc -w）後把你的js文件放在哪裏。在tsconfig.js文件這兩個參數告訴打字稿compailer把所有的JS出來放在一個文件目錄是

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

來源

2016-10-06 20:50:40

如何將Angular2 TypeScript應用程序編譯爲單個文件？

回答

相關問題