Share
In meinem letzten Tutorial über die Polymer-Bibliothek habe ich erklärt, wie Sie dieses großartige neue Tool zum Erstellen wiederverwendbarer Webkomponenten nutzen können. Der Kernpunkt des Tutorials und der Verwendung von Komponenten besteht in der Unterstützung unserer Entwicklung durch:
Ich bin immer noch begeistert davon und wollte dies etwas genauer erkunden, indem Sie eine neue Vorlage ausloten, die das Polymer-Team veröffentlicht hat, um die Bereitstellung und Wiederverwendung wesentlich zu vereinfachen.
Eine der Macken des Polymer-Entwicklungsprozesses, die ich nicht angesprochen habe, war die Trennung zwischen der Entwicklung einer Komponente und der tatsächlichen Verfügbarkeit durch andere. Schauen wir uns einen Ausschnitt aus meinem vorherigen Tutorial an:
In diesem Code soll der Polymer-Core enthalten sein, die Haupt-API, mit der Sie die benutzerdefinierten Elemente definieren können. Bei der lokalen Entwicklung und beim Testen funktioniert dies zwar einwandfrei, aber der angegebene Pfad wird Sie leider daran hindern, diese Komponente gemeinsam zu nutzen. Der Grund dafür ist, dass, wenn ein anderer Benutzer versucht, Ihr Element mit Bower (der bevorzugten Installationsmethode) zu installieren, dieses als ein Geschwister von Polymer in ihrem System enden wird bower_components Mappe.
Das Problem dabei ist, dass die Komponente gesucht wird … /Bower_components/polymer/polymer.html das wird ein ungültiger Pfad sein. Komponenten müssen immer davon ausgehen, dass ihre Abhängigkeiten Geschwister sind, also sollte es tatsächlich gesucht werden … /Polymer/polymer.html. Dies ist der "kanonische Weg".
Im Chat mit dem großartigen Rob Dodson vom Polymer-Team sagte er, dass der einzige Ausweg darin besteht, die Methode zu verwenden, die ich ursprünglich skizziert hatte. Sobald ich bereit war, meine Komponente zu teilen, konvertiere ich alle meine Pfade, nach denen gesucht wird bower_components nach … / Wenn ich bereit bin, mein Element zu veröffentlichen.
Dies ist offensichtlich nicht ideal, und ich hätte wahrscheinlich eine Art Grunt-Task erstellen können, um meine Komponentendateien zu analysieren, um diese Updates durchzuführen. Zum Glück hat sich das Polymer-Team darauf eingelassen und eine kreative Lösung gefunden, die sie das nennen Element ohne Titel.
Accentsconagua
Element ohne Titel VorlageWenn ich erwähne Element ohne Titel, Ich beziehe mich auf eine neue Boilerplate, die es Ihnen ermöglicht, wiederverwendbare und implementierbare Komponenten wesentlich einfacher zu erstellen, indem Sie Ihnen die Basis dafür geben. Es hilft, die oben genannten Probleme zu beseitigen, indem:
Der große Gewinn dabei ist, dass Sie Ihre Komponente entwickeln können, ohne erhebliche Änderungen am Pfad vornehmen zu müssen, die nicht nur umständlich sind, sondern Ihr Element brechen können, wenn Sie etwas verpassen.
Derzeit ist das Projekt Teil von PolymerLabs, da es auf Herz und Nieren geprüft wird, aber es sieht auf jeden Fall ziemlich solide aus:
Als Erstes sollten Sie ein Entwicklungsverzeichnis erstellen, in dem sich Ihre neue Komponente und alle von Ihnen installierten Bower-Komponenten befinden. Ich habe meine angerufen polymerdev. Von dort müssen Sie in die Element ohne Titel Github Repo und laden Sie es in Ihren neuen Entwicklungsordner herunter. Dies ist ein wichtiger Schritt für Sie brauchen um den Inhalt in diesen Ordner zu extrahieren, um die Probleme mit dem gleichgeordneten Verzeichnis zu vermeiden, die ich zuvor erwähnt habe.
Extrahieren der .Postleitzahl Datei erstellt einen neuen Ordner mit dem Namen Untitled-Element-Master Enthält die Boilerplate-Dateien, die Sie zum Erstellen Ihrer neuen Komponente benötigen. Sie müssen einige Dinge basierend auf dem Namen Ihrer Komponente umbenennen. Das beinhaltet:
Untitled-Element-Master Mappeuntitled-element.htmluntitled-element.cssIch werde das Reddit-Element, das ich in meinem letzten Tutorial erstellt habe, neu erstellen. Die Änderungen würden also so aussehen:
Untitled-Element-Master -> reddit-element untitled-element.html -> reddit-element.html untitled-element.css -> reddit-element.css So sah das Verzeichnis vorher aus:
Und so sieht es nach den Updates aus:
Der Schlüssel zum Verständnis ist, dass Sie in der arbeiten werden reddit-element Ordner beim Erstellen Ihrer Komponente und in späteren Schritten, wenn wir Bower zur Installation der Polymer-Komponenten verwenden, ist dieses Verzeichnis eine direkte Verknüpfung mit den neu installierten Verzeichnissen. Ich weiß, dass ich in diesem Punkt wirklich harfe, aber es ist wichtig zu verstehen, da dies Ihre Fähigkeit beeinflusst, Ihre Komponente zu teilen.
Um dies abzuschließen, sollten Sie die Referenzen auf den Namen Ihrer Komponente in den folgenden Dateien aktualisieren:
bower.jsondemo.htmlreddit-element.htmlJede dieser Dateien enthält Verweise auf Element ohne Titel innerhalb des Codes und müssen aktualisiert werden. Denken Sie daran, dass alle Verweise auf Element ohne Titel sollte in geändert werden reddit-element. Wenn Sie absolut sicher sein möchten, führen Sie mit Ihrem Editor ein globales Suchen und Ersetzen durch.
Da Bower die bevorzugte Methode zum Installieren von Polymer und zum Teilen von Komponenten ist, gehen wir einige Schritte durch, um sicherzustellen, dass die Bower-Konfiguration der Reddit-Komponente ordnungsgemäß eingerichtet wird.
Standardmäßig enthält die Heizplatte ein bower.json Datei. Diese Datei wird zum Auflisten verschiedener Elemente verwendet, einschließlich des Namens der Komponente und aller Abhängigkeiten, die für die Verwendung der Komponente installiert werden müssen. So sieht es aus:
"name": "reddit-element", "private": wahr, "Abhängigkeiten": "polymer": "polymer / polymer # master"
Zuerst entferne ich das Privatgelände Diese Eigenschaft verhindert, dass die Komponente in der Bower-Registrierung aufgeführt wird. Da es gemeinsam genutzt werden soll, möchte ich, dass es aufgeführt wird. Außerdem muss die Reddit-Komponente einen Ajax-Aufruf durchführen, sodass ich eine Abhängigkeit vom Polymer aufnehme Kernelemente Komponenten, die die Ajax-Funktionalität enthalten, die ich benötige. Zum Schluss füge ich eine Versionsnummer hinzu, um dies zu verfolgen. Hier ist das Endergebnis:
"Name": "Reddit-Element", "Version": "0.0.1", "Abhängigkeiten": "Polymer": "Polymer / Polymer # ~ 0.2.3", "Kernelemente": "Polymer / Kernelemente # ~ 0.2.3 ",
Der letzte Teil der Bower-Konfiguration, der ausgeführt werden muss, ist das Erstellen einer Datei mit dem Namen .bowerrc in dem reddit-element Ordner, der einen benutzerdefinierten Installationsort für die Abhängigkeiten unserer Komponente definiert. Dies ist als einfache JSON-Daten wie folgt definiert:
"Verzeichnis": "… /"
Im Wesentlichen wird Bower angewiesen, alle Abhängigkeiten eine Ebene höher zu installieren, sodass sie Geschwister des sind reddit-element Mappe. Dies ist wichtig, weil, wenn jemand unsere Komponente mit Bower installiert, diese in der bower_components Ordner als Geschwister zu allem anderen (einschließlich Polymer). Wenn wir die Dinge auf diese Weise strukturieren, stellen wir sicher, dass wir uns auf die gleiche Weise entwickeln, wie wir sie letztendlich teilen werden. Dadurch können wir auch den oben genannten kanonischen Pfad verwenden, um eine konsistente Referenzierung anderer Komponenten in unserem Code sicherzustellen.
Lassen Sie uns die Unterschiede überprüfen. Wenn ich das nicht erstellt habe .bowerrc Datei und lief die Bower installieren Kommando, meine Verzeichnisstruktur würde so aussehen:
Dies installiert die bower_components Ordner direkt in das Verzeichnis der Komponente, was ich nicht möchte. Ich will das reddit-element Ordner, um ein Geschwister für alle Abhängigkeiten zu sein, die es benötigt:
Diese Methode stellt sicher, dass die Komponente und die Abhängigkeiten ordnungsgemäß installiert werden, wenn ein Benutzer diese Komponente mit Bower installiert bower_components Mappe.
Mit dem .bowerrc Datei zum Ordner Ihrer Komponente hinzugefügt und die bower.json Setup mit den richtigen Abhängigkeiten, ist der nächste Schritt die Ausführung Bower installieren, Damit Bower die entsprechenden Komponenten herunterzieht und sie dem Projekt hinzufügt.
In diesem Tutorial wollte ich sicherstellen, dass ich eine solide Grundlage für die Verwendung der neuen Polymer-Heizplatte und einige der Gründe für die Designentscheidungen des Teams gelegt habe.
Im nächsten Teil dieser Serie werde ich die neue Dokumentationskomponente durchgehen, die in der Boilerplate enthalten ist, und wie sie das Teilen und Demoieren Ihrer Komponente erheblich vereinfacht. Ich zeige Ihnen auch, wie Sie Ihre Komponente für die Freigabe über die Bower-Registrierung einrichten.
