如何将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应用程序编译为单个文件？

回答

相关问题