Question

我正在使用Angular2和TypeScript组合一个应用程序（大规模）。它需要分成许多项目，每个项目都有许多组件，每个组件都有.html视图，.css样式表和.ts逻辑/类。

我希望每个项目都能编译成一个*.js文件并复制到将在IIS中运行的主机网站。这类似于构建WPF或Silverlight应用程序的方式，.xaml文件都被编译到.dll。

我已经浏览了网页，并且能够使用.ts选项将.js个文件构建到单个--outFile文件中。但这并不能帮助我处理.html个文件或css。

任何帮助都会受到高度赞赏，即使它说我不能问的是： - ）

斯蒂芬

Answer 1

如果您使用默认的Angular2 tsconfig.json和SystemJS loader：

"module": "system",
"moduleResolution": "node",
...

您可以将所有繁重的工作留在SystemJS Build Tool上。这是我在使用gulp的项目中如何做到这一点：

编译* .ts和内联* .html模板

我立即使用gulp-angular-embed-templates将所有templateUrl内联到template个字符串中（此插件适用于Angular 1. *和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目录中生成许多anonymous System.register modules。所有人都已经将templateUrl内联。

将所有内容捆绑到一个.js文件中

我使用SystemJS Build Tool是因为我觉得它比使用例如webpack更容易。所以，我还有另一项任务，就是让这个过程自动化：
```
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相同的选项，因此请检查Config API。

致电builder.bundle('main', ...)搜索main.js（这是我使用Angular bootstrap电话的初始脚本。它是您可以看到的同一文件{{3}因为我将.js附加到构建器搜索的所有路径上。这是因为当您在TS中导入模块时，通常会调用：
```
import {ModalResultComponent} from './modal-result.component';
```
编译为./modal-result.component依赖项，它不关心文件扩展名。这就是为什么我必须将*.js添加到所有路径以帮助构建器查找所有已编译的JavaScript文件的原因。

meta选项只是告诉构建器忽略我不想捆绑的依赖项。那是Angular2本身和rxjs库，因为我在import 'rxjs/add/operator/map'中包含了main.ts。

这会生成一个app.bundle.js个文件，所有模块都使用in the 5 min quickstart注册为命名模块。
使用我们的app.bundle.js

最后一部分是小菜一碟。我们只导入默认的Angular2内容，然后使用System.register告诉SystemJS我们所有的依赖项。
```
<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。

那就是它！

您实际上根本不需要使用gulp并使用纯node脚本执行所有操作。

使用bundle option等内容轻松捆绑CSS文件，我确信您可以找到有关如何在任何地方使用它的教程。

我确定还有其他方法来做同样的事情。 Angular2旨在限制您仅使用一种技术。但是，在我看来使用SystemJS是最简单的方法，因为它默认使用与Angular2相同的模块系统。

我确定你也可以使用例如commonjs格式，但是这需要你为require()加载器使用一些polyfill，但我还没有尝试过。我相信cssnano也许值得一试。

将Angular2 HTML和TypeScript构建到单个文件中

1 个答案: