如何将Angular2 TypeScript应用程序编译为单个文件?

时间:2015-10-18 17:30:03

标签: typescript commonjs angular systemjs tsc

我意识到我可以使用tsc my_app.ts --target system编译我的应用程序,它将为每个导入的模块生成一个SystemJS包装文件,这很棒,但它生成匿名(无名)函数,所以我不能只是将它们连接到一个文件。

我想过提出这个问题“如何将TypeScript编译为命名的SystemJS模块”,但我的目标只是将我的Angular2应用程序编译为单个文件SystemJS。

3 个答案:

答案 0 :(得分:10)

--outFile选项适用于TypeScript 1.8以来的--module选项(适用于AMD和SystemJS),因此可以本机完成。 Here's the changelog。 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>

答案 1 :(得分:4)

对于网络:

  1. 使用TypeScript编译器编译为JavaScript。
  2. 在JavaScript上使用browserify将其合并为一个文件。
  3. 更简单的方法是使用tsify。它是一个编译TypeScript的browserify插件。

答案 2 :(得分:2)

你需要告诉你tsc compiler在tsc compile之后把你的js文件放在哪里(命令:tsc -w)。 tsconfig.js文件中的两个参数告诉TypeScript编译器将所有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"
  }
}