2016-07-04 36 views
0

我正嘗試使用gulp將我所有的供應商依賴關係打包成一個大的vendor.js文件。
到目前爲止,我已經使用gulp-concat將它製作成一個文件,但是它並沒有正確加載system.js包含的文件。
含義當我試圖引導角應用程序,systemjs出去,並提取兩個文件,@角/平臺瀏覽器動態和@角/核心,但這些都包含在vendor.js中,因此將不被發現。
通常情況下,角度文件將從node_modules文件夾中加載,但是據我所知在生產中非常糟糕的想法,並且因爲此應用程序在我的應用程序中用公用文件夾提供了一個靜態文件服務器中間件,其中包括node_modules在推斷中對我來說似乎是一個非常糟糕的主意。
使用來自各地的SO其他答案已經得到了我這個gulpfile.js:Concat對一個文件的所有angular2依賴關係

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文件不像我的項目需要依賴項。

我猜我正在打包錯誤的角度文件,但是我不太確定應該讀取哪些文件以及如何讀取。

回答

0

我猜你在你的根目錄下有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' 
+0

systemjs.config.js添加到vendor.js如預期,這是不正確加載的依賴關係。 –

+0

好的。更新我的答案 – candidJ

+0

雖然這可能甚至有工作的機會,我只是不會這樣做,因爲這將使vendor.js文件20 MB,這真的不是我想爲我的客戶提供服務。 –