Bundle Angular 2-App mit UMD-Bundles (kein Hersteller-Bundle erstellen)
Ich bündele derzeit meine Angular 2-App mit WebPack. Wir durchlaufen immer noch schnelle Zyklen. Statt Verzögerungen bei der Erstellung und beim Laden von Anwendungen hinzuzufügen, möchten wir die selten wechselnden vorbereiteten Angular 2 UMD CDN-Bundles einbeziehen,
<script src="https://npmcdn.com/@angular/[email protected]/bundles/core.umd.min.js"></script>
<script src="https://npmcdn.com/@angular/[email protected]/bundles/common.umd.min.js"></script>
<script src="https://npmcdn.com/@angular/[email protected]/bundles/compiler.umd.min.js"></script>
plugins: [ new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js") ], mein App-Bundle ist klein, aber ich erstelle manuell ein separates, eindeutiges 1-MB-Bundle, das den größten Teil des Angular 2-Frameworks in jedem Build enthält. Diese Datei ändert sich geringfügig bei jedem Build, abhängig von meiner Anwendung. Sie kann nicht zwischen Versionen meiner Anwendungen oder verschiedenen Anwendungen übertragen werden und hat nicht den Vorteil von "CDN". Natürlich muss ich diese Datei einbinden, damit meine App ausgeführt werden kann.Wenn ich das IgnorePlugin verwende, um @ zu filte@angular|rxjs, z.B.plugins: [ new webpack.IgnorePlugin(/\@angular|rxjs/) ] schließt die Herstellerdateien aus, fügt jedoch fest codierte Ausnahmen / Auslöserfehler oben in mein Anwendungspaket ein.Wenn ich benutzeWebPack externals, z.B.externals: ['@angular/core', ..., Ich bekommefunction(module, exports) { module.exports = @angular/core; }, Ausgabe in meinem App-Bundle, was offensichtlich nicht funktioniert. Die WebPack-Dokumentation ist nicht besonders aktuell, aber ich glaube, ich kann entweder ein @ angebelibraryTarget oder zitierte Auflösungsfunktion, die WebPack anweist, beim Laden des Moduls zu kompilieren.Wenn ich das WebPack ganz fallen lasse und stattdessen den TypeScript-Compiler-Bundler verwende (gemäßdieser Ratgeber, das die UMD-Bundles verwendet), bekomme ichSystem.register() -Aufrufe, die sich auf die von mir erwarteten NPM-Namespaces beziehen, z.System.register("myapp/boot", ['@angular/core', ..., aber ich arbeite immer noch an der SystemJS-Konfiguration, um die UMDs aufzurufen. Nebenbei bemerkt, diese Datei ist 25% größer als das, was WebPack generiert.Wenn ich SystemJS wie im vorherigen Element verwende, soll diese Kompilierung während der Erstellung oder als paralleler Prozess und nicht als Teil der Dateispeicherung erfolgen. Ich vermute SystemJS-Builder (siehe verwandte FragenHie undHie) wäre der Weg dazu? Vielleicht würde dies auch zu kleineren Dateigrößen führen, als der in Typescript integrierte "Bundler".Wie kann ich ein Anwendungspaket erstellen, das nicht von einem einzigartig umgepackten Angular 2-Paket abhängt?
Ich baue gerade gegen RC3. Mein Prozess ist derzeit WebPack, wie oben erwähnt, aber ich würde zu einem anderen Toolset wechseln, wenn dies einfacher ist.
Weitere Recherchen haben ergeben, dass ich von der "Loader" -Terminologie von WebPack in die Irre geführt worden bin. Ich muss einen Modul-Loader verwenden, und es sieht nicht so aus, als ob WebPack einen hat, der dafür funktioniert.
Um UMD-Bundles Modul-Namespaces zuzuweisen (und Abhängige zu verbinden), können diese nicht in Skript-Tags geladen werden. Stattdessen müssen sie mit einem gegebenen @ ausgewertet werdthis context, um als Modulreferenz zu fungieren. Das bedeutet, dass ich, selbst wenn ich möchte, dass alle synchron geladen werden, noch etwas anderes wie SystemJS konfigurieren muss, um sie über die Leitung zu laden, damit ihr Kontext gesteuert / verpackt wird.
DiesAngular 2 Plunker ist in der Nähe von dem, wonach ich suche. Es werden die Angular 2 UMD-Bundles verwendet, es wird jedoch kein RxJs-Bundle verwendet, obwohl dies leicht zu ändern scheint, wenn ich die gesamte RxJs-Bibliothek haben möchte.