如何将 Angular2 TypeScript 应用程序编译为单个文件?
How to compile an Angular2 TypeScript application to a single file?
我意识到我可以用 tsc my_app.ts --target system
编译我的应用程序,它会为每个导入的模块生成一个 SystemJS 包装的文件,这很棒,但它会生成匿名(无名)函数,所以我不能'不要只是将它们连接到一个文件中。
我考虑过提出这个问题 "how to compile TypeScript to named SystemJS modules",但我的目标只是将我的 Angular2 应用程序编译为单个文件,无论是否使用 SystemJS。
对于网络:
- 使用 TypeScript 编译器编译为 JavaScript。
- 在 JavaScript 上使用 browserify 将其合并为一个文件。
不过,更简单的方法是使用 tsify。它是一个编译 TypeScript 的 browserify 插件。
自 TypeScript 1.8 起,--outFile
选项与 --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
等选项编译它一样简单
在那之后,应该可以 bootstrap 像这样的应用程序:
<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>
你需要告诉你tsc编译器在tsc编译后把你的js文件放在哪里(命令:tsc -w)。 tsconfig.js 文件中的两个参数告诉 TypeScript 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"
}
}
我意识到我可以用 tsc my_app.ts --target system
编译我的应用程序,它会为每个导入的模块生成一个 SystemJS 包装的文件,这很棒,但它会生成匿名(无名)函数,所以我不能'不要只是将它们连接到一个文件中。
我考虑过提出这个问题 "how to compile TypeScript to named SystemJS modules",但我的目标只是将我的 Angular2 应用程序编译为单个文件,无论是否使用 SystemJS。
对于网络:
- 使用 TypeScript 编译器编译为 JavaScript。
- 在 JavaScript 上使用 browserify 将其合并为一个文件。
不过,更简单的方法是使用 tsify。它是一个编译 TypeScript 的 browserify 插件。
自 TypeScript 1.8 起,--outFile
选项与 --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
在那之后,应该可以 bootstrap 像这样的应用程序:
<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>
你需要告诉你tsc编译器在tsc编译后把你的js文件放在哪里(命令:tsc -w)。 tsconfig.js 文件中的两个参数告诉 TypeScript 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"
}
}