角度 2 捆绑和缩小

Angular2 bundling and minification

本文关键字：缩小 角度      更新时间：2023-09-26

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。这与初级开发人员和代码审查的现实相去甚远（是的，不会为了运行并查看浏览器是否抱怨非封闭标签而获得整个代码库！

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

在开发过程中使用模板URL保持干净的HTML文件的优势。此任务可以是生产''暂存 - 缩小 - 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));
    });

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

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，但如果需要，可以对其进行调整。

您的模板文件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"添加的额外网络请求，并允许模板缩小并与其他j捆绑
    • 在一起
  • 允许模板位于外部文件中，以提高代码清晰度和缩放性
  • 一旦打字稿"将文件导入字符串"功能到位，就可以轻松迁移到纯 HTML 文件
  • 允许 Webstorm html 语法突出显示仍然正常工作

查看 Angular 大学的博客

相关文章：