2016-10-26 4 views
9

Kürzlich habe ich JSPM für meine eckigen 2 Projekte verwendet und fand es sehr einfach und bequem mit zu arbeiten. Sowohl beim Hinzufügen neuer Module als auch beim Erstellen eines Bundles für den Produktionseinsatz.JSPM vs WebPack für Angular 2

Es ist im Grunde nur:

jspm install npm:@angular/somepackage 

und die package.json und system.js configs automatisch für mich auf dem Laufenden sind.

Wenn ich ein Produktionspaket erstellen möchte ich dies einfach tun:

jspm bundle-sfx app/main app-bundle.min.js --minify 

Und es benutze ich nur eine html wie diese machen:

<body> 
    <my-app>Loading...</my-app> 
    <script src="app-bundle.min.js"></script> 
</body> 

Es lädt und schnell läuft. Verwendet es für kleine und große Angular 2 Anwendungen.

Die Entwicklung ist ebenfalls zufriedenstellend - das erneute Laden der App ist schnell genug und das Debugging läuft gut. Auch sehr gut, um fast jedes Modul aus dem NPM-Repository über JSPM nutzen zu können.

Wenn ich Artikel dort lese, habe ich den Eindruck, dass die Leute zu Webpack für Angular 2 Apps wechseln. Ich bin selbst nicht zu webpack gewechselt, weil ich denke, dass mein Setup gut funktioniert und Webpack viel mehr Konfiguration zu haben scheint.

Aber ich bin besorgt, dass die Unterstützung für JSPM ausbleichen wird, da es scheint, als ob mehr und mehr zu Webpack übergehen.

Sollte ich deswegen zu webpack wechseln? Würde der Wechsel zu Webpack mir einige Vorteile bringen, die ich nicht entdeckt habe?

Ich habe einige sehr einfache Angular 2 Schnellstart-Vorlagen mein Setup demonstriert, die hier gefunden werden kann: https://github.com/fintechneo/angular2-templates

wäre sehr glücklich, einige Meinungen über die Vorteile für diese Einrichtung von der Umstellung auf webpack zu bekommen.


UPDATE 2017-03-26

Da diese Frage ich die Notwendigkeit gebucht wurde für eine noch schnellere Ladezeiten gefunden für die Produktion aufbaut. Obwohl JSPM (oder Webpack) ein optimiertes Bundle erzeugt, ist es immer noch zu groß und benötigt die angular2 Templates, die nach dem Herunterladen des Bundles kompiliert werden müssen.

So fand ich die Ahead-of-Time-Compiler Kochbuch (https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) - die kleine Bündel, die in kürzester Zeit nach dem Download beginnt.

Dies erforderte eine parallele Installation mit allen eckigen Modulen, die mit npm (nicht jspm) installiert wurden. Wahrscheinlich ist es auch möglich, JSPM dafür mit etwas Aufwand zu verwenden, aber ich habe es noch nicht untersucht. Sowohl JSPM als auch dieses AoT-Kochbuch verwenden Rollup, sodass der ngc-Compiler-Schritt in JSPM integriert wird, aber der schwierige Teil besteht darin, TypeScript zu veranlassen, jspm_packages statt node_modules zu verwenden.

Der obige Link mit dem Setup wird mit dem AoT aktualisiert und verwendet immer noch JSPM für die Entwicklungsumgebung.

Antwort

5

Diese Antwort erfordert eine Aufschlüsselung wie folgt ..

SystemJS v JSPM

JSPM im Wesentlichen ist SystemJS mit dem Vorteil, dass JSPM Ihre systemjs.config.js für Sie konfiguriert. Ich liebe JSPM, wenn es funktioniert (was leider nicht immer ist).

Der Vorteil hier ist, dass JSPM auch Ihre JS-Dateien für Sie bündelt.

JSPM v Webpack

Da JSPM tatsächlich SystemJS unter der Haube verwendet, wird diese Frage im Wesentlichen sollten wir SystemJS oder Webpack werden.

Nicht schon wieder! Ich habe diese vor (oben Antwort) beantwortet hier ..

What are differences between SystemJS and Webpack?

Eine kurze Wiederholung dieses Inhalts ist, dass Webpack ersetzt nicht SystemJS (oder JSPM) es einfach macht sie überflüssig.

Allerdings gibt es eine Wendung hier, dass JSPM Bundling bietet. Warum also zu Webpack wechseln?

Der Vorteil von JSPM ist die einfache Konfiguration.

Derselbe Vorteil ist auch sein Untergang, da die einfache Konfiguration mangelnde Optionen und das Fehlen von Optionen mangelnde Kontrolle bedeutet.

Webpack bündelt nicht nur JS-Dateien, sondern auch CSS, HTML und alles andere in einer einzigen package.js-Datei, die Webpack-Anwendungen blitzschnell macht (aber anfangs nur langsam lädt).

Auch JSPM erfüllt die Notwendigkeit eines Bündlers, aber wie werden Sie Dateien mit JSPM transpilieren? z.B. Wenn ich Stylus anstelle von CSS verwenden möchte, was wird meine Stylus-Dateien in CSS umwandeln? Werde ich Gulp in den Mix schmuggeln (worüber ich jetzt untröstlich bin, hat 1/3 von Webpacks Download, war aber vor 6 Monaten führend). Oder zu Webpack wechseln?

Ich bin kein Fan von Webpack wegen seiner schlechten Dokumentation, aber da es einen so großen Marktanteil hat, denke ich, dass wir alle bald auf das Webpack Boot springen werden.

+0

Haben Sie Webpack mit den AoT-Produktions-Builds wie in meiner aktualisierten Frage beschrieben funktioniert? –

+0

Ich habe Webpack für eines der Kundenprojekte in meiner Firma gestartet und es läuft auch nach 9 Monaten wirklich gut. Das Projekt ist jetzt auch live. Viel Spaß mit Webpack. –