Require.js lädt alle Ressourcen für eine App, einschließlich Polymer

Question

Ich baue ein App-Framework für ein großes, Multi-Entwickler-Projekt. Ich bin auf der Idee, Require.js und Angular zusammen zu verwenden, um die Abhängigkeit und das Laden von Klassen zu verwalten. Aber jetzt möchte ich auch Polymer verwenden, weil es wahnsinnig cool ist.

Wie könnte ich require.js verwenden, um Polymerelementbibliotheken genauso zu laden wie meine js? Ich mag die Idee, hängen zu bleiben als der eine wahre Weg, um alle meine Apps Ressourcen zu laden. Ich sehe, wie schön es ist, Template, Script und Style in einer logischen HTML-Datei zu bündeln, die eine Komponente darstellt, und ich weiß, dass wir diese Teile in separate Dateien zerlegen können, aber sobald ich einen Link sehe, rel = "import" stuff drinnen Ich fühle, dass das in requisite.js geht.

Ideen?

Answer 1

Es gibt Spannungen zwischen den beiden, weil beide das System der Aufzeichnung für Tracking-Abhängigkeiten sein wollen. Zum Beispiel, wenn Sie einen http-Import von /components/core-ajax/core-ajax.html tun, enthält es einen http-Import von ../polymer/polymer.html und stellt sicher, dass Polymer geladen wird, bevor irgendeines der Skripte für core-ajax ausgeführt wird. Polymer verfügt außerdem über ein Tool namens vulcanize zum Kompilieren einer Gruppe von Webkomponenten in einer einzigen Datei, um die Anzahl der HTTP-Anforderungen in der Produktion zu reduzieren.

Klang vertraut? require.js hat für alle diese Teile einen analogen Mechanismus. Es ist auch erwähnenswert, dass mir nicht bewusst ist, was getan wird, um all dies zu vereinheitlichen, und um die Dinge noch komplizierter zu machen, gibt es den Vorschlag für ES6-Module, der an Fahrt gewinnt.

Meine Empfehlung im Moment ist, wenn möglich, genau einen Abhängigkeitstracker auszuwählen. Ich würde vorschlagen, dass Sie HTML-Importe verwenden, wenn Sie Web-Komponenten verwenden, da es vergleichsweise einfacher ist, ein requirejs-Modul in eine einfache Web-Komponente zu konvertieren, als umgekehrt.

z.B. Angenommen, Sie haben ein Skript jquery.datatables.js, das von jquery abhängt. Layout Ihrer Dateien wie:

• Komponenten
  • jquery.datatables
    • jquery.datatables.js
    • jquery.datatables.html
  • jquery
    • jquery.js
    • jquery.html

jquery.html würde enthalten:

<script src='jquery.js'></script> 

Und in jquery.datatables.html würden Sie sagen:

<link rel='import' href='../jquery/jquery.html'> 
<script src='jquery.datatables.js'></script> 

HTML Imports kümmert sich um die Deduplizierung, damit Sie sicher sein können, dass jquery.html nur einmal geladen wird.