Angular2 捆绑和缩小

Question

ASP.NET（或gulp）将负责打包和缩小。但是，我遇到的问题却大不相同。根据 Angular2 的教程，视图 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));
    });

Answer 2

事实证明，您需要使用 templateUrl 进行开发，但在捆绑和缩小过程中将其替换为 template。这是作业的 gulp 任务：

var gulp = require('gulp'); //install 'gulp' via npm
var uglify = require('gulp-uglify'); //install 'gulp-uglify' via npm
var concat = require('gulp-concat'); //install 'gulp-concat' via npm
var replace = require('gulp-replace'); //install 'gulp-replace' via npm
var fs = require("fs"); //already available in Visual Studio and of course NodeJS

gulp.task('bundle:js', function () {
    return gulp
        .src([
            "file1.js",
            "file2.js"
        ])
        .pipe(replace(/templateUrl.*\'/g, function (matched) {
            var fileName = matched.match(/\/.*html/g).toString();
            var fileContent = fs.readFileSync(fileName, "utf8");
            return 'template:\'' + fileContent.replace(/\r\n/g, '') + '\'';
        }))
        .pipe(concat('file.min.js'))
        .pipe(gulp.dest('my bundle folder'))
        .pipe(uglify())
        .pipe(gulp.dest('my bundle folder'));
});

这是为了匹配 .html 文件和模板 URL，但如果需要可以对其进行调整。

Answer 3

您的模板文件 app.html.ts 可以将 html 模板导出为字符串。

export const htmlTemplate = `
    <p>My app</p>
`;

然后您的组件 (app.component.ts) 可以内联导入模板。

import { Component } from '@angular/core';
import { htmlTemplate } from './app.html';

@Component({
    selector: 'my-app',
    template: htmlTemplate,
})
...

这种方法：

允许在编译时内联模板，避免使用 "templateUrl" 添加的额外网络请求，并允许将模板缩小并与其他 js 捆绑
为了代码清晰和缩放，允许模板存在于外部文件中
一旦 Typescript "import file as string" 功能到位，就可以轻松迁移到普通 HTML 文件
允许 Webstorm html 语法突出显示仍然正常工作

See blog from Angular University

Angular2 捆绑和缩小

Angular2 bundling and minification

javascript

typescript

systemjs

angular