如何通过 Gulp 正确捆绑 Angular2-JS/Typescript 应用程序？

Question

注意：我知道有几个类似的问题（这里提到的存储库来自其中之一）但我仍然不明白什么不起作用

具体来说，我尝试在以下位置复制简单应用程序的逻辑：https://github.com/templth/angular2-packaging

问题是（见下面我的 Gulp 配置文件）我在 ./dist 中只得到 3 个文件：

• app.min.js 包含： var __decorate = (this && this.__decorate) || ...
• index.html
• vendors.ts

发生的情况是应用程序只显示“正在加载...”，没有错误，如果我转到“源”（Chrome 开发工具）我看到 没有真正加载（除了 3我在 ./dist 目录中看到的文件）

我也试过了：

• 绕过 Typescript 并捆绑 JS 文件，但结果是所有文件都在那里，但我明白了
• 不丑化

require 未定义

我的 Gulp 配置文件

'use strict';

const gulp = require('gulp');
const ts = require('gulp-typescript');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
var htmlreplace = require('gulp-html-replace');
var addsrc = require('gulp-add-src');

gulp.task('app-bundle', function () {
    var tsProject = ts.createProject('tsconfig.json', {
        typescript: require('typescript'),
        outFile: 'app.js'
    });

    var tsResult = gulp.src([
        'node_modules/**/*.ts.d',
        'typings/**/*.ts.d',
        'app/**/*.ts'
    ]).pipe(ts(tsProject));

    return tsResult.js
        .pipe(addsrc.append('config-prod.js'))
        .pipe(concat('app.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

gulp.task('vendor-bundle', function() {
    gulp.src([
        'node_modules/core-js/client/shim.min.js',
        'node_modules/zone.js/dist/zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/systemjs/dist/system.src.js'
    ])
        .pipe(concat('vendors.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

gulp.task('html-replace',[ 'app-bundle', 'vendor-bundle' ], function() {
    gulp.src('index.html')
        .pipe(htmlreplace({
            'vendor': 'vendors.min.js',
            'app': 'app.min.js'
        }))
        .pipe(gulp.dest('dist'));
});

// define which tasks should Gulp launch
gulp.task('default', ['app-bundle', 'vendor-bundle','html-replace']);

Answer 1

您应该使用名为“systemjs builder”的特殊 gulp 模块。 此外，您应该使用 tsconfig.js 中的编译参数作为“commonjs”。 此外，它应该是该文件中包含的 npm 引用。 所有这些都应该可以解决您的问题。