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

时间:2016-03-08 12:40:09

标签: angular typescript systemjs systemjs-builder

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

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

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

任何帮助都会受到高度赞赏,即使它说我不能问的是: - )

斯蒂芬

1 个答案:

答案 0 :(得分:26)

如果您使用默认的Angular2 tsconfig.jsonSystemJS loader

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

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

  1. 编译* .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内联。

  2. 将所有内容捆绑到一个.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注册为命名模块。

  3. 使用我们的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

    那就是它!

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

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

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

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