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

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

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

我已经看了一下网络，并且可以使用–outFile选项将.ts文件构建到单个.js文件。但这并不能帮助我使用.html文件或css。

任何帮助将不胜感激，即使是说我要求是不可能的:-)

斯蒂芬

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

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

你可以把所有的沉重的工作在SystemJS Build Tool.这是例如我如何在我的项目使用gulp：

>编译* .ts和inline * .html模板

我立即使用gulp-angular-embed-templates将所有templateUrl嵌入到模板字符串中(此插件与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更容易。所以，我有另一个gulp的任务来自动化这个过程：

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的引导调用，它是你可以看到的文件相同的文件 in the 5 min quickstart)，因为我将.js附加到生成器搜索的所有路径。这是因为当您在TS中导入模块时，通常会调用：

import {ModalResultComponent} from './modal-result.component';

它被编译为./modal-result.component依赖，它不关心文件扩展名。这就是为什么我必须将* .js添加到所有路径，以帮助构建器找到所有编译的JavaScript文件。

元选项只是告诉构建器忽略我不想捆绑的依赖关系。这是Angular2本身和rxjs库，因为我在main.ts中包含导入’rxjs / add / operator / map’。

这将生成一个单独的app.bundle.js文件，所有模块使用System.register 注册为命名模块。
>使用我们的app.bundle.js

最后一部分是一块蛋糕。我们只是导入默认的Angular2内容，然后使用bundle option来告诉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引导。

就是这样！

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

捆绑CSS文件很容易，像cssnano这样的东西，我相信你可以找到关于如何在任何地方使用的教程。

我确定还有其他方法可以做同样的事情。 Angular2的设计不限制您仅使用一种技术。然而，使用SystemJS似乎是最简单的方法，因为它默认使用与Angular2相同的模块系统。

我确定你也可以使用commonjs格式，但这将需要你使用一些polyfill的require()加载器，但我还没有尝试过。我相信UMD可能也值得一试。

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

相关文章