Wie bereitet man die Release-Version mit SystemJS und Gulp auf?

Ich verwende SystemJS in meinem Angular2-Projekt. Ich verwende die tsconfig-Datei für TypeScript. Ich möchte Schluck verwenden, um meinen Code für die Produktionsversion zu concattieren und zu minimieren. Ich habe Probleme mit der Konkordierung des Codes: Jedes Mal, wenn ich versuche, Dateien zu contrahieren, bekomme ich entweder ‘eckig’ nicht definiert oder ‘System’ nicht definiert. Ich habe versucht, die Reihenfolge zu ändern, in der ich versuche, meine Dateien aus den Knotenmodulen zu laden, aber das ist mir nicht gelungen.

Ich habe mich gefragt, ob jemand von euch dieses Problem hatte und eine Antwort darauf gefunden hat?

Hier ist meine Schluckakte:

var gulp = require('gulp'), ..... var paths = { dist: 'dist', vendor: { js: [ 'node_modules/systemjs/dist/system.src.js', 'node_modules/angular2/bundles/angular2.dev.js', 'node_modules/angular2/bundles/angular2-polyfills.js', 'node_modules/angular2/bundles/router.dev.js' ... ], css: [] }, app: { templates: [ 'app/**/*.html', '!node_modules/*.html' ], scripts: [ 'app/**/*.ts', 'app/config.ts', 'app/app.ts' ] } }; var tsProject = ts.createProject('tsconfig.json', { out: 'Whatever.js' }); gulp.task('dev:build:templates', function () { return gulp.src(paths.app.templates) .pipe(ngHtml2Js({ moduleName: 'Whatever', declareModule: false })) .pipe(concat("Whatever.tpls.min.js")) .pipe(gulp.dest(paths.dist)); }); gulp.task('prod:build:templates', function () { return gulp.src(paths.app.templates) .pipe(minifyHtml({ empty: true, spare: true, quotes: true })) .pipe(ngHtml2Js({ moduleName: 'whatever', declareModule: false })) .pipe(concat(paths.appName + ".tpls.min.js")) .pipe(uglify()) .pipe(gulp.dest(paths.dist)); }); gulp.task('dev:build:scripts', function () { var tsResult = tsProject.src() .pipe(sourcemaps.init()) .pipe(ts(tsProject)); return tsResult.js .pipe(sourcemaps.write({ sourceRoot: '/app' })) .pipe(concat('whatever.js')) .pipe(gulp.dest(paths.dist)); }); gulp.task('dev:build:styles', function () { return gulp.src(paths.app.styles) .pipe(sass()) .pipe(gulp.dest(paths.dist + '/css')); }); gulp.task('dev:build:vendor', function () { return gulp.src(paths.vendor.js) .pipe(concat('vendor.min.js')) .pipe(gulp.dest(paths.dist)) }); gulp.task('dev:build', [ 'dev:build:vendor', 'dev:build:templates', 'dev:build:scripts', 'dev:build:styles', ], function () { }); 

So lade ich meine Dateien:

     

Und hier sind die Fehler, die ich bekomme:

 Uncaught TypeError: Unexpected anonymous System.register call.(anonymous function) @ vendor.min.js:2680load.metadata.format @ vendor.min.js:3220oldModule @ vendor.min.js:3749(anonymous function) @ vendor.min.js:2411SystemJSLoader.register @ vendor.min.js:2636(anonymous function) @ Whatever.js:2 Whatever.tpls.min.js:1 Uncaught ReferenceError: angular is not defined 

Sie erhalten “Unerwarteter anonymer System.register-Aufruf”, weil die Referenzen nicht in der richtigen Reihenfolge geladen werden. Ich verwende JSPM, um meine eckige App für die Produktion richtig zu erstellen. Es gibt 4 Teile zum process.

Teil 1: Kompilieren Sie Ihre Typoskript-Dateien

 var ts = require("gulp-typescript"); var tsProject = ts.createProject("./App/tsconfig.json"); gulp.task("compile:ts", function () { var tsResult = tsProject.src() .pipe(ts(tsProject)); tsResult.js.pipe(gulp.dest("./wwwroot/app")); }); 

Sie können den SystemJS Builder verwenden

so einfach wie das

 var path = require("path"); var Builder = require('systemjs-builder'); // optional constructor options // sets the baseURL and loads the configuration file var builder = new Builder('path/to/baseURL', 'path/to/system/config-file.js'); builder .bundle('local/module.js', 'outfile.js') .then(function() { console.log('Build complete'); }) .catch(function(err) { console.log('Build error'); console.log(err); }); 

Sie können sich das komplette Setup in meinem Starter-Projekt ansehen

Ich denke, wir haben die Ursache dafür gefunden. Ehrlich gesagt, ich war schon einmal dort, so wie ich diese Art von Problem verfolgen

  1. Überprüfen Sie, ob angular & systemjs zuvor geladen wurden.
  2. Überprüfen Sie, ob sie wirklich geladen sind. keine 404 Überraschung. (Es klingt blöd aber Scheiße passiert)
  3. Wenn Sie Bibliotheken als vender.js bündeln, stellen Sie sicher, dass sie in der richtigen Reihenfolge vorliegen. Überprüfen Sie die Ausgabedatei und sehen Sie, ob sie concat wie erwartet sind.