javascript - Angular2 捆绑和缩小

Question

ASP.NET(或 gulp)将负责打包和缩小。但是，我遇到的问题却大不相同。根据 Angular2 的教程， View HTML 嵌入在组件本身中。有一种方法可以使用 TypeScript 将其分成 .ts 和 .html 文件。方法如下:

...
/// <reference path="./view-declaration.d.ts" />
...
import {html} from '/app.html!text';
...
@Component({
    ...
    template: html
})
...

并将 .html 伪造为 view-declaration.d.ts 文件中的模块:

declare module '/app.html!text' {
    var html:string;
    return default html;
}

这是使用 SystemJS 及其文本插件。这不会为 .html 文件生成 System.register，这意味着 HTML 不能与转译的 .js 文件捆绑在一起。

那么问题是，如何将 HTML 与 JavaScript 分开，同时又能够正确地捆绑它们？

另请注意，此方法与在您的组件上设置 templateUrl 相同。这两者都破坏了捆绑和减少每个组件的服务器命中率的目的。 Angular2 提供的解决方案是使用字符串并在组件上设置 template。这与初级开发人员和代码审查的现实情况相去甚远(是的，不会获取整个代码库来运行并查看浏览器是否提示未关闭的标签!)。

Answer 1

这是 gulp 插件，我认为它可以解决你的问题。 看着: https://github.com/ludohenin/gulp-inline-ng2-template

在开发过程中使用 templateUrl 保持干净的 html 文件的优势。并且此任务可以成为您的 production\staging -minified - gulp 构建任务的一部分。

例如(我的构建任务的一部分!)

    var inlineNg2Template = require('gulp-inline-ng2-template');
    gulp.task('build-prod', ['build.lib'], function () {
    var tsProject = typescript.createProject('./tsconfig.json', {                         typescript: require('typescript') });
    var tsSrcInlined = gulp.src([webroot + '**/*.ts'], { base: webroot })
    .pipe(inlineNg2Template({ base: webroot }));
    return eventStream.merge(tsSrcInlined, gulp.src('Typings/**/*.ts'))
    .pipe(sourcemaps.init())
    .pipe(typescript(tsProject))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(webroot));
    });