21

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

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

我浏览了网络，并能够使用该选项将.ts文件构建为单个文件。但这对文件或..js--outFile.htmlcss

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

斯蒂芬

4

1 回答 1

26

如果您将默认的 Angular2tsconfig.json与SystemJS 加载器一起使用：

"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'));
});

    这将在目录中生成许多匿名 System.register 模块。build/js他们都已经templateUrl内联了。

  2. 将所有内容捆绑到一个.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 调用的初始脚本。它与您在 5 分钟快速入门bootstrap中看到的文件相同），因为我附加到构建器搜索的所有路径。这是因为当您在 TS 中导入模块时，您通常会调用：.js

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

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

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

    这会生成一个app.bundle.js文件，其中所有模块都使用System.register注册为命名模块。

  3. 使用我们的app.bundle.js

    最后一部分是小菜一碟。我们只需导入默认的 Angular2 内容，然后使用bundle选项告诉 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并注册包中的所有模块，然后它main使用我们的 Angular2 引导程序导入模块。

    就是这样！

您实际上根本不需要使用纯脚本gulp来做所有事情。node

使用cssnano 之类的东西可以轻松捆绑 CSS 文件，我相信您可以在任何地方找到有关如何使用它的教程。

我敢肯定，同样的事情还有其他方法。Angular2 旨在不限制您只使用一种技术。然而，在我看来，使用 SystemJS 似乎是最简单的方法，因为它默认使用与 Angular2 相同的模块系统。

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

于 2016-03-08T13:27:11.887 回答