Aurelia und System.js production build

Ich führe ein bestehendes Aurelia-Projekt, das anscheinend nicht mit Aurelia CLI erstellt wurde.Aurelia und System.js production build

Ich muss eine Produktion Build erstellen, aber bin nicht in der Lage mit der aktuellen Konfiguration. Der Development Build funktioniert einwandfrei, lädt aber wie erwartet viel Code auf den Benutzercomputer herunter.

Nach dem Ausführen gulp prod (gulpfile unten aufgeführt), erhalte ich zwei JS-Dateien: app-build-{revnumber}.js und vendor-build-{revnumber}.js, aber Aurelia versucht weiterhin die main.js Datei zu laden.

Ich versuchte, die main.js Gebäude zusammen (kommentierten Code in gulpfile.js), hatte aber keinen Erfolg - einzigen Anbieter Bündel geladen wird:

Hier sind meine Config-Dateien:

config.js

System.config({ 
    baseURL: "/www", 
    defaultJSExtensions: true, 
    transpiler: "babel", 
    babelOptions: { 
    "stage": 0, 
    "optional": [ 
     "runtime", 
     "optimisation.modules.system" 
    ] 
    }, 
    paths: { 
    "*": "src/*", 
    "github:*": "jspm_packages/github/*", 
    "npm:*": "jspm_packages/npm/*" 
    }, 
    map: { /* mappings */ } 
});

gulpfile.js

var gulp = require('gulp'); 
var bundler = require('aurelia-bundler'); 
var image = image = require('gulp-image'); 
var replace = require('gulp-replace'); 
var gulpsync = require('gulp-sync')(gulp); 

var config = { 
    force: true, 
    baseURL: '.', 
    configPath: './config.js', 
    bundles: { 
    // "dist/main": { 
    // includes: [ 
    //  '[main.js]' 
    // ], 
    // options: { 
    //  inject: true, 
    //  minify: false, 
    //  rev: false 
    // } 
    // }, 
    "dist/app-build": { 
     includes: [ 
     '[**/*.js]', 
     '**/*.html!text', 
     '**/*.css!text' 
     ], 
     options: { 
     inject: true, 
     minify: true, 
     rev: true 
     } 
    }, 
    "dist/vendor-build": { 
     includes: [ /* all external modules */ ], 
     options: { 
     inject: true, 
     minify: true, 
     rev: true 
     } 
    } 
    } 
}; 

gulp.task("bundle", function() { 
    return bundler.bundle(config) 
    .then(function() { 
     gulp.src('config.js') 
     .pipe(replace('dist/', '')) 
     .pipe(replace('src', 'dist')) 
     .pipe(gulp.dest('')); 
    }); 
}); 

gulp.task("unbundle", 
    function() { 
    return bundler.unbundle(config) 
     .then(function() { 
     gulp.src('config.js') 
      .pipe(replace('dist', 'src')) 
      .pipe(gulp.dest('')); 
     }); 
    }); 

gulp.task("image-bundle", 
    function() { 
    gulp.src('./src/media/*') 
     .pipe(image()) 
     .pipe(gulp.dest('./dist/media')); 
    }); 

gulp.task("files-bundle", function() { 
    return gulp 
    .src('./src/style/material.woff2') 
    .pipe(gulp.dest('./dist/style')); 
}); 

gulp.task('prod', gulpsync.sync(['unbundle', 'bundle', 'image-bundle', 'files-bundle'])); 

gulp.task('dev', gulpsync.sync(['unbundle']));

index.html

<!DOCTYPE html> 
<html> 
<head>...</head> 
<body aurelia-app="main"> 
    <script src="www/jspm_packages/system.js"></script> 
    <script src="www/config.js"></script> 
    <script> 
     System.import('aurelia-bootstrapper'); 
    </script> 
</body> 
</html>

Quelle

2017-11-08 danguilherme

Nach vielen kleinen Anpassungen, löste ich das main.js Problem.

Es scheint, als ob System.js nach der Abhängigkeit im Bundle sucht und, falls es nicht gefunden wird, das Netzwerk trifft. Hier ist, was ich tat mein Bündel zu beheben:

Konzern dist/ Ordner als Bündelquelle

In config.js, den Pfad von *-dist/* und modifiziere es in keiner Gulp Aufgabe.
Bevor das Bündel Aufgabe ausgeführt wird, kopiere ich alle Inhalte von src/ zu dist/
Im dist/app-build Bündel, fügte ich die Option depCache: true. Es funktioniert nicht, wenn false (gibt den Fehler main.js nicht gefunden), aber ich weiß nicht wirklich warum.

Die hinzugefügten/geänderten Gulp Aufgaben:

// deletes all files in the output path 
gulp.task('clean', ['unbundle'], function() { 
    return gulp.src(['dist/']) 
    .pipe(vinylPaths(del)); 
}); 

gulp.task('copy', function() { 
    return gulp.src(['src/**/*']) 
    .pipe(gulpCopy('dist/', { prefix: 1 })); 
}); 

gulp.task("bundle", sync(['clean', 'copy']), function() { 
    return bundler.bundle(config); 
}); 

gulp.task("unbundle", function() { 
    return bundler.unbundle(config); 
});

Quelle

2017-11-09 13:02:40 danguilherme

Aurelia und System.js production build

Antwort

Verwandte Themen