Erstelle mehrere Bundles mit Systemjs-builder für eine Angular2-Anwendung
Ich habe eine funktionierende Angular2-Anwendung mit der folgenden Struktur:
/app
/components
/moduleA
/moduleB
/...
/shared
app.module.ts
app.routing.ts
app.component.ts
main.ts
Nun benutze ich systemjs-builder, um eine einzelne Datei mit meinem gesamten Typoskript in meiner gulp-Datei zu erstellen:
gulp.task('bundle', () => {
builder.buildStatic('app/*.js', 'web/bundle.app.js')
.then(function() {
console.log('Build complete');
})
})
Und dann in meiner index.html für meine Bewerbung:
<body>
<app>Loading...</app>
<!-- application bundle -->
<script src="bundle.app.js"></script>
</body>
Alles funktioniert jetzt einwandfrei, aber meine Anwendung wächst auf mehrere Module und ich möchte sie in verschiedene Moduldateien aufteilen. Statt bundle.app.js hätte ich also common.js für das / app / shared-Modul und dann moduleA.js, moduleB.js usw. für alle anderen Module in /app/components
Kann das mit systemjs-builder gemacht werden? Dies muss eine ziemlich häufige Funktion sein, aber ich kann in der Dokumentation nichts sehen.
BEARBEITEN Ich habe es geschafft, ein paar Bundles wie dieses zu erstellen
gulp.task('bundle', () => {
builder.buildStatic('app/*.js - app/components/**/*.js', 'web/common.js')
.then(function() {
console.log('Build complete');
});
builder.bundle('app/components/moduleA/**/*.js', 'web/moduleA.js');
builder.bundle('app/components/moduleB/**/*.js', 'web/moduleB.js');
})
aber ich denke nicht, dass das völlig in Ordnung ist; Mein vorheriges einzelnes Bundle hatte 2.267 KB und jetzt sind meine 3 Module 785 KB (common.js) + 2.567 KB (moduleA.js) + 1.530 KB (moduleB.js), was keinen Sinn ergibt.
Wenn ich den Code in den Bundles moduleA und moduleB überprüfe, kann ich Angular2-Module und auch Dinge sehen, die nur in common.js vorhanden sein sollten.