Wie wird Angular2 RC1 mit Systemjs kombiniert?

Question

Vor der Veröffentlichung lieferten die Kandidaten eine gebündelte Datei. Seit den Release-Kandidaten gibt es keine gebündelte Datei mehr. Einschließlich angular2 und rxjs macht meine App jetzt 671 Anfragen über 7 Sekunden zum Laden. Dies hat die Entwicklung lahmgelegt.

Kann jemand angular und rxjs bündeln und diese in system.config einschließen?

Answer 1

Um ein leichteres Projekt zu erhalten, sollten Sie SystemJS Builder oder JSPM überprüfen, um Ihr Projekt zu bündeln.

Beispiel Saatgutprojekt: https://github.com/madhukard/angular2-jspm-seed

@BrunoGarcia gab eine sehr schöne Informationen hier: https://stackoverflow.com/a/37098964/5706293

Answer 2

Sie brauchen nur einen Bündler zu verwenden:

• UMD-Dateien: es ist wahrscheinlich die einfachste Lösung. Wie Sie in dieser example sehen können. Sie müssen nur einen Verweis auf die UMD-Dateien in Ihrem systemjs Config-Datei machen (nicht so nützlich für die Produktion enviroments):

  System.config({ 
      packages: { 
       app: { 
        main: './main.ts', 
        defaultExtension: 'ts' 
       }, 
       '@angular/core': { 
        main: 'core.umd.js', 
        defaultExtension: 'js' 
       }, 
       '@angular/compiler': { 
        main: 'compiler.umd.js', 
        defaultExtension: 'js' 
       }, 
       '@angular/common': { 
        main: 'common.umd.js', 
        defaultExtension: 'js' 
       }, 
       '@angular/platform-browser-dynamic': { 
        main: 'platform-browser-dynamic.umd.js', 
        defaultExtension: 'js' 
       }, 
       '@angular/platform-browser': { 
        main: 'platform-browser.umd.js', 
        defaultExtension: 'js' 
       }, 
       rxjs: { 
        defaultExtension: 'js' 
       } 
      } 
  }); 
  

  Sie einen anderen exampe finden (wahrscheinlich besser) here!

• systemjs Bauer + Zug: wenn Sie wollen, halten systemjs verwenden, es ist ein guter Ruf, diese Lösung zu verwenden, aber ich habe es getestet und es dauerte 30 s mir das Bündel zu erzeugen, ist es nicht so nützlich machen für die Entwicklung (vielleicht habe ich etwas falsch gemacht [fast sicher]), aber Sie können immer noch überprüfen, wie Sie Ihre Anwendung mit System-Builder here;

• webpack: Ich verwende derzeit Webpack. Webpack hat ein Entwicklungstool namens webpack-dev-server, das die Anwendung virtuell auf dem Speicher bündelt, wodurch der Prozess während der Entwicklung schneller wird (+ hot reload). Hier finden Sie eine schnelle video tutorial und eine ausführlichere Beschreibung von Angular 2 Dokumentation here. Um webpack zu verwenden, müssen Sie webpack (und webpack-dev-server, wenn Sie möchten) Pakete installieren: npm i -S webpack webpack-dev-server, erstellen Sie eine webpack.config.js Datei und führen Sie es nur mit webpack, um nur die Bundle-Datei oder webpack-dev-server --inline zu generieren Erstellen Sie einen Server, der automatisch mit Ihren Änderungen bündelt. Die --inline Option ermöglicht Auto-Reload im Browser-Fenster: <script src="BUILD_DIR/bundle.js"></script>

Diese beiden letzten Optionen Sie können generieren:

// webpack.config.js file 
module.exports = { 
    entry: 'SRC_DIR/main.js', 
    output: { 
     path: 'BUILD_DIR', 
     filename: 'bundle.js' 
    } 
} 

Jetzt ist Ihre bundle.js auf Ihrer index.html-Datei einfügen ein Bündel der gesamten Anwendung, das Sie manuell in Ihre index.html-Datei einfügen können.

Answer 3

1) con-cat alle js-Dateien und CSS-Dateien enthalten auf index.html mit gulp-concat.

2) Bündelung von Winkelbibliotheken und App-Komponenten, die in der Datei systemjs.config.js erwähnt werden. Mit Schluck systemjs-builder.

3) Reduzieren Sie die Bündel mithilfe von gulp-uglify.