Question

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

具体而言，我试图在https://github.com/templth/angular2-packaging

复制简单应用的逻辑

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

app.min.js＆lt; - 这只是一个9行代码（我的应用程序更复杂）包含：var __decorate =（此＆amp;＆amp; this .__ decorate）|| ...
index.html＆lt; - 这似乎是“完整”
vendors.ts＆lt; - 这似乎是“完整的”

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

我也尝试过：

绕过Typescript并只捆绑JS文件，但会发生的是所有文件都存在，但我得
没有uglification

要求未定义

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

你应该使用名为＆＃34; systemjs builder＆＃34;的特殊gulp模块。你也应该在tsconfig.js中使用compile参数作为＆＃34; commonjs＆＃34;。此外，它应该是该文件中包含的npm引用。所有这些都可以解决您的问题。

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

1 个答案: