将Angular2 HTML和TypeScript生成到单个文件 [英] Build Angular2 HTML and TypeScript to a single file
问题描述
我正在使用Angular2和TypeScript组合一个应用程序(大型).它将需要分为多个项目，每个项目将具有许多组件，每个组件具有.html视图，.css样式表和.ts逻辑/类.
I'm putting together an app (Large scale) using Angular2 and TypeScript. It will need to be divided into numerous projects and each project will have numerous components each with a .html view, .css stylesheet and .ts logic / class.
我希望每个项目都可以编译为单个*.js文件，然后将其复制到将在IIS中运行的宿主网站.这类似于将.xaml文件全部编译为.dll的WPF或Silverlight应用程序的方式.
I would like each project to compile to a single *.js file and be copied to a host website which will run in IIS. This would be similar to how a WPF or Silverlight app is built with the .xaml files all getting compiled into the .dll.
我在网上浏览了一下，并且能够使用--outFile选项将.ts文件构建为单个.js文件.但这对.html文件或css文件没有帮助.
I've had a look around the web and am able to get the .ts files to build to a single .js file using the --outFile option. But this doesn't help me with the .html files or the css.
即使说我要问的事情是不可能的，任何帮助也将不胜感激:-)
Any help would be greatly appreciated even if it's to say that what I'm asking is impossible :-)
斯蒂芬
推荐答案
如果您将默认的Angular2 tsconfig.json与 SystemJS加载程序:
If you're using the default Angular2 tsconfig.json with SystemJS loader:
"module": "system",
"moduleResolution": "node",
...
您可以将所有繁重的工作留在 SystemJS构建工具上.例如，这就是我在我的项目中使用gulp的方式:
You can leave all the heavy work on SystemJS Build Tool. This is for example how I do it in my projects using gulp:
-
编译* .ts和内嵌* .html模板
我正在使用 gulp-angular-embed-templates 立即将所有templateUrl内联到template字符串(此插件可用于Angular 1. *和Angular 2).
I'm using gulp-angular-embed-templates right away to inline all templateUrl into template strings (this plugin works with both Angular 1.* and Angular 2).
var tsc = require('gulp-typescript');
var tsProject = tsc.createProject('tsconfig.json');
var embedTemplates = require('gulp-angular-embed-templates');
gulp.task('app.build', function () {
var tsResult = gulp.src('app/src/**/*.ts', {base: './app/src'})
.pipe(embedTemplates()) // inline templates
.pipe(tsc(tsProject));
return tsResult.js
.pipe(gulp.dest('build/js'));
});
这将在build/js中生成许多匿名System.register模块.目录.他们所有人都已经内联了他们的templateUrl.
This will generate many anonymous System.register modules in build/js directory. All of them will have their templateUrl inlined already.
将所有内容捆绑到一个.js文件中
Bundle everything into a single .js file
为此，我使用 SystemJS构建工具，因为我认为这比使用例如webpack更容易.因此，我还有另一个gulp任务可以自动执行该过程:
I use SystemJS Build Tool for this because I think it's way easier than using for example webpack. So, I have another gulp task for this to automate the process:
var SystemBuilder = require('systemjs-builder');
gulp.task('app.systemjs.bundle', function () {
var builder = new SystemBuilder('build/js, {
paths: {
'*': '*.js'
},
meta: {
'angular2/*': {
build: false
},
'rxjs/*': {
build: false
}
}
});
return builder.bundle('main', 'build/js/app.bundle.js');
});
构建器采用与 SystemJS 相同的选项，因此请检查其
The builder takes the same options as SystemJS so check their Config API.
调用builder.bundle('main', ...)搜索main.js(这是我对Angular的bootstrap调用的初始脚本.这是您可以看到
Calling builder.bundle('main', ...) searches for main.js (which is my initial script with Angular's bootstrap call. It's the same file you can see in the 5 min quickstart) because I append .js to all paths searched by the builder. This is because when you import a module in TS you usually call:
import {ModalResultComponent} from './modal-result.component';
编译为./modal-result.component依赖项，它与文件扩展名无关.这就是为什么我必须在所有路径中添加*.js来帮助构建器找到所有已编译的JavaScript文件的原因.
which is compiled as ./modal-result.component dependency and it doesn't care about the file extension. That's why I had to add *.js to all paths to help builder find all compiled JavaScript files.
meta选项只是告诉构建器忽略我不想捆绑的依赖项.那是Angular2本身和rxjs库，因为我在main.ts中包括了import 'rxjs/add/operator/map'.
The meta options just tell the builder to ignore dependencies that I don't want to bundle. That's Angular2 itself and rxjs library because I include import 'rxjs/add/operator/map' in main.ts.
这将生成一个单独的app.bundle.js文件，其中所有模块都使用
This generates a single app.bundle.js file with all modules registered as named modules using System.register.
使用我们的app.bundle.js
Using our app.bundle.js
最后一部分是小菜一碟.我们只是导入默认的Angular2内容，然后使用 bundle选项告诉SystemJS我们所有的依赖项在哪里.
The last part is a piece of cake. We just import the default Angular2 stuff and then use bundle option to tell SystemJS where're all our dependencies.
<script>
System.config({
packages: {
'/web': {
format: 'register',
defaultExtension: 'js'
}
},
bundles: {
'/web/app.bundle': ['main']
}
});
System.import('main').then(null, console.error.bind(console));
</script>
实际上，当我们调用System.import('main')时，它首先下载/web/app.bundle.js并将所有模块注册到包中，然后使用Angular2引导程序导入模块main.
When we call System.import('main') it in fact first downloads /web/app.bundle.js and registers all modules in the package and after that it imports modules main with our Angular2 bootstrap.
就是这样！
您实际上根本不需要使用gulp，并且只需使用纯node脚本即可完成所有操作.
You actually don't need to use gulp at all and do everything with pure node script.
使用 cssnano 之类的东西可以很容易地捆绑CSS文件，我敢肯定，您可以找到有关如何使用它的教程.到处都是.
Bundling CSS files is easy with things like cssnano and I'm sure you can find tutorials on how to use it everywhere.
我敢肯定，同一件事还有其他方法. Angular2的设计不限制您仅使用一种技术.但是，在我看来，使用SystemJS是最简单的方法，因为默认情况下，它使用与Angular2相同的模块系统.
I'm sure there're other ways to the the same thing. Angular2 is designed not to restrict you to use just one technology. However, using SystemJS seems to me to be the easiest way because it uses the same module system as Angular2 by default.
我确定您还可以使用例如commonjs格式，但这将要求您还对require()加载程序使用一些polyfill，但是我还没有尝试过.我相信 UMD 也许也值得尝试.
I'm sure you could use also for example commonjs format but that would require you to use also some polyfill for require() loader, but I haven't tried it yet. I belive UMD might be also worth trying.
这篇关于将Angular2 HTML和TypeScript生成到单个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
