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

Question

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

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

问题是（请参阅下面我的 Gulp 配置文件）我在 ./dist:

中只有 3 个文件

app.min.js <-- 这只是一个 9 行代码（我的应用程序要复杂得多）包含：var __decorate = (this && this.__decorate) || ...
index.html <-- 这似乎是 "complete"
vendors.ts <-- 这似乎是 "complete"

应用程序只显示 "Loading..."，没有错误，如果我转到 "sources"（Chrome 开发工具），我看到 什么都没有loaded（我在 ./dist 目录中看到的上面的 3 个文件除外）

我也试过：

绕过 Typescript 并仅捆绑 JS 文件，但发生的是所有文件都在那里，但我得到
没有丑化

require is not defined

我的 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 引用。所有这些都应该可以解决您的问题。

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

How to correctly bundle an Angular2-JS/Typescript app via Gulp?

production

gulp

angular