如何通过Gulp正确地捆绑Angular2-JS/类型记录应用程序？

Question

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

具体来说，我试图复制简单应用程序( at：https://github.com/templth/angular2-packaging )的逻辑。

问题是(请参阅下面的Gulp配置文件)，在./dist中只有3个文件：

• app.min.js <--这只是一个9行代码(我的应用程序要复杂得多)，它包含: var __decorate = (this & this.__decorate) \
• index.html <--这似乎是“完全”
• vendors.ts <--这似乎是“完全”

这个应用程序只显示“加载.”，没有错误，如果我转到“源代码”(Chrome工具)，我看到没有真正加载(除了上面我在./dist目录中看到的3个文件)

我也试过：

• 绕过类型记录，只打包JS文件，但是结果是所有的文件都在那里，但是我得到了
• 无丑化

要求未定义

我的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

您应该使用特殊的gulp模块，称为"systemjs生成器“。此外，您还应该在tsconfig.js中使用编译参数作为"commonjs“。此外，它应该是包含在该文件中的npm引用。所有这些都应该能解决你的问题。