Come preparare la versione di rilascio con SystemJS e Gulp?

Uso SystemJS nel mio progetto Angular2. Uso il file tsconfig per TypeScript. Voglio usare gulp per concatizzare e minimizzare il mio codice per la versione di produzione. Sto riscontrando dei problemi nel concedere il codice: ogni volta che provo a concatare i file ottengo sia ‘angular’ non definito o ‘sistema’ non definito. Ho provato a modificare l’ordine in cui provo a caricare i miei file dai moduli del nodo, ma non ci sono riuscito.

Mi stavo chiedendo se qualcuno di voi ha avuto questo problema e ha trovato una risposta ad esso?

Ecco il mio file gulp:

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 () { }); 

Ecco come carico i miei file:

     

E qui ci sono gli erori che sto ottenendo:

 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 

Otterrai “Chiamata System.register anonima imprevista” perché i riferimenti non vengono caricati nell’ordine corretto. Io uso JSPM per build correttamente la mia app angular per la produzione. Ci sono 4 parti nel processo.

Parte 1: compila i tuoi file dattiloscritti

 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")); }); 

Puoi usare SystemJS Builder

facile come questo

 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); }); 

puoi guardare la configurazione completa nel mio progetto iniziale

Penso che abbiamo trovato la causa principale di questo. Onestamente, ci sono già stato prima, quindi il modo in cui rintraccio questo tipo di problema

  1. Controlla se angular e systemjs sono stati caricati in precedenza.
  2. Controlla se sono veramente carichi. nessuna sorpresa 404. (Sembra stupido, ma succede un cazzo)
  3. Se impacchettate le librerie come vender.js, assicuratevi che siano in bundle nella sequenza corretta. Controlla il file di output e vedi se sono concat come ti aspetti.