Question

我正在尝试使用gulp将所有供应商依赖项打包成一个大的vendor.js文件到目前为止，我已经使用gulp-concat将其整合到一个文件中，但是它没有正确加载system.js包含的文件。
意思是当我试图引导角度应用程序时，systemjs出去取出两个文件，@ angular / platform-browser-dynamic和@ angular / core，但是这些都包含在vendor.js中，因此不会找到。
通常角度文件将从node_modules文件夹加载，但据我所知，这在生产中是一个非常糟糕的主意，并且因为这个应用程序是在公共文件夹中提供的，我的应用程序中的静态文件服务器中间件，包括node_modules对于我来说，这种分配似乎是一个非常糟糕的主意使用来自SO周围的其他答案让我得到了这个gulpfile.js：

var gulp = require('gulp'),
    path = require('path'),
    gutil = require('gulp-util'),
    uglify = require('gulp-uglify'),
    ts = require('gulp-typescript'),
    project = ts.createProject('./tsconfig.json'),
    nodesource = "node_modules/",
    sass = require('gulp-sass'),
    concat = require('gulp-concat'),
    sourcemaps = require('gulp-sourcemaps'),
    jspm = require('gulp-jspm-build'),
    input = {
        sass: [
            'frontend/sass/**/*.scss'
        ],

        typescript: [
            'typings/index.d.ts',
            'frontend/ts/**/*.ts'
        ],

        body: [
            'frontend/html/**/*.html'
        ],

        vendor: [
            nodesource + 'core-js/client/shim.min.js',
            nodesource + 'zone.js/dist/zone.js',
            nodesource + 'reflect-metadata/Reflect.js',
            nodesource + 'systemjs/dist/system.src.js',
            nodesource + 'rxjs/bundles/Rx.umd.js',
            nodesource + '@angular/core/bundles/core.umd.js',
            nodesource + '@angular/compiler/bundles/compiler.umd.js',
            nodesource + '@angular/common/bundles/common.umd.js',
            nodesource + '@angular/http/bundles/http.umd.js',
            nodesource + '@angular/platform-browser/bundles/platform-browser.umd.js',
            nodesource + '@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            './systemjs.config.js'
        ]
    },
    outputDir = './public';


gulp.task('compile:ts', function() {
    return gulp.src(input.typescript)
        .pipe(ts(project))
        .js.pipe(gulp.dest(outputDir))
});

gulp.task('bundle-vendor', function () {
    return gulp.src(input.vendor)
        .pipe(concat('vendor.js'))
        .pipe(gulp.dest(outputDir));
});

gulp.task('copy-html', function () {
    return gulp.src(input.body)
        .pipe(gulp.dest(outputDir));
});

gulp.task('default', ['compile:ts', 'bundle-vendor', 'copy-html'], function(){});

此systemjs.config.js文件：

System.config({
    baseURL: "/",
    map: {
        'app': 'app.js'
    },
    packages: {
        app: {
            format: 'register',
            defaultExtension: 'js'
        }
    }
});
System.import('app').catch(function(err){ console.error(err); });

这使我的打字稿文件成为一个app.js文件，放在我的公共文件夹中，但vendor.js文件的行为并不像我的项目需要的依赖。

我猜我正在打包错误的角度文件，但是我不太确定应该取出哪些文件，以及如何。

Answer 1

我猜您在根目录下有gulpfile.js，public文件夹和system.config.js，请尝试删除./。

project = ts.createProject('tsconfig.json'),  //<-- removed ./

'systemjs.config.js' //<-- removed ./

 outputDir = 'public';  //<-- removed ./

看看这是否有帮助。

编辑：

尝试加载此代码：

        nodesource + 'core-js/client/shim.min.js',
        nodesource + 'zone.js/dist/zone.js',
        nodesource + 'reflect-metadata/Reflect.js',
        nodesource + 'systemjs/dist/system.src.js'
        nodesource + '@angular/**/*.*',
        nodesource + 'rxjs/**/*.*'
        nodesource + 'angular2-in-memory-web-api/**/*.*',
        './systemjs.config.js'

将所有angular2依赖项concat保存到一个文件中

1 个答案: