Share
In mijn laatste zelfstudie over de Polymer-bibliotheek heb ik uitgelegd hoe je kunt profiteren van deze geweldige nieuwe tool om herbruikbare webcomponenten te maken. Het belangrijkste punt van de zelfstudie en het gebruik van componenten is om onze ontwikkeling te helpen door:
Ik ben er nog steeds mee bezig en wilde dit nog een beetje verkennen door een nieuwe sjabloon te bekijken die het Polymer-team heeft uitgebracht om implementatie en hergebruik aanzienlijk eenvoudiger te maken.
Een van de eigenaardigheden van het ontwikkelingsproces van het polymeer dat ik niet aanraakte, was de afstand tussen het ontwikkelen van een component en het feitelijk beschikbaar maken voor hergebruik door anderen. Laten we een fragment van mijn vorige zelfstudie bekijken:
Dit doel van deze code is om Polymer Core te gebruiken, de hoofd-API waarmee u de aangepaste elementen kunt definiëren. Voor lokale ontwikkeling en testen werkt dit eigenlijk perfect, maar helaas kan het opgegeven pad ervoor zorgen dat u dit onderdeel niet kunt delen. De reden hiervoor is dat als een andere gebruiker je element probeert te installeren met Bower (de voorkeursinstallatiemethode), het uiteindelijk als een broer of zus van Polymer in hun bower_components map.
Het probleem daarmee is dat het onderdeel naar op zoek is ... /bower_components/polymer/polymer.html wat een ongeldig pad zal zijn. Componenten moeten altijd aannemen dat hun afhankelijkheden broers en zussen zijn, dus het zou eigenlijk moeten zoeken naar ... /polymer/polymer.html. Dit is het 'canonieke pad'.
In het chatten met de ontzagwekkende Rob Dodson van het Polymer-team, zei hij dat de enige manier om dit te ontwikkelen was om de methode te gebruiken die ik oorspronkelijk had geschetst en toen ik klaar was om mijn component te delen, converteerde ik al mijn paden die op zoek zijn naar bower_components naar ... / wanneer ik klaar ben om mijn element te publiceren.
Dit is natuurlijk niet ideaal en ik had waarschijnlijk een soort Grunt-taak kunnen maken om mijn componentbestanden te ontleden om deze updates te maken. Gelukkig heeft het Polymer-team hieraan gewerkt en is er een creatieve oplossing bedacht die ze het untitled-element.
Accentsconagua
untitled-element SjabloonAls ik het noem untitled-element, Ik verwijs naar een nieuwe boilerplate die beschikbaar is om het maken van herbruikbare en inzetbare componenten aanzienlijk eenvoudiger te maken, door u een basisfundament te geven om mee te werken. Het helpt om de problemen die ik hierboven noemde te elimineren door:
De grote overwinning hiervoor is dat je je component kunt ontwikkelen zonder de moeite te hoeven nemen om substantiële padwijzigingen door te voeren die niet alleen omslachtig zijn, maar je element kunnen breken als je iets mist.
Momenteel maakt het project deel uit van PolymerLabs terwijl het wordt getest, maar het ziet er beslist behoorlijk solide uit:
Nu is het eerste dat u gaat doen, het creëren van een ontwikkelingsdirectory waarin uw nieuwe component wordt ondergebracht, evenals alle onderdelen van Bower die u gaat installeren. Ik heb de mijne gebeld polymerdev. Vanaf daar moet je naar de untitled-element Github repo en download het in je nieuwe ontwikkelmap. Dit is een belangrijke stap omdat jij nodig hebben om de inhoud in die map uit te pakken, om de problemen met de directory-sibling die ik eerder heb genoemd te voorkomen.
De .extracten .ritssluiting bestand maakt een nieuwe map genaamd untitled-element-meester die de boilerplate-bestanden bevat die je nodig hebt om je nieuwe component te maken. U moet een aantal dingen hernoemen op basis van de naam van uw component. Dit bevat:
untitled-element-meester mapuntitled-element.htmluntitled-element.cssIk ga het Reddit-element opnieuw maken dat ik in mijn laatste zelfstudie heb gemaakt, dus dit is hoe de wijzigingen eruit zouden zien:
untitled-element-meester -> reddit-element untitled-element.html -> reddit-element.html untitled-element.css -> reddit-element.css Hier is hoe de directory er eerder uitzag:
En hier is hoe het eruit ziet na de updates:
Het belangrijkste om te begrijpen, is dat je in de reddit-element map bij het maken van uw component en in latere stappen, wanneer we Bower gebruiken om de Polymer-componenten te installeren, zal die directory een directe broer / zus zijn van de nieuw geïnstalleerde mappen. Ik weet dat ik echt op dit punt aan het hamsteren ben, maar het is belangrijk om te begrijpen, omdat dit van invloed is op je vermogen om je component te delen.
Om dit af te maken, wil je de verwijzingen naar je componentnaam bijwerken, in de volgende bestanden:
bower.jsondemo.htmlreddit-element.htmlElk van deze bestanden bevat verwijzingen naar untitled-element binnen de code en moeten worden bijgewerkt. Vergeet niet dat alle verwijzingen naar untitled-element moet worden gewijzigd in reddit-element. Als je absoluut zeker wilt zijn, doe dan een globale zoekopdracht en vervang deze met je editor.
Aangezien Bower de voorkeursmethode is voor het installeren van Polymer en het delen van componenten, laten we een paar stappen uitvoeren om ervoor te zorgen dat we de Bower-configuratie van de Reddit-component correct instellen.
Standaard bevat de boilerplate een bower.json het dossier. Dit bestand wordt gebruikt om een aantal dingen te vermelden, waaronder de naam van het onderdeel en eventuele afhankelijkheden die moeten worden geïnstalleerd om het te kunnen gebruiken. Hier is hoe het eruit ziet:
"name": "reddit-element", "private": true, "dependencies": "polymer": "Polymer / polymer # master"
Eerst zal ik het verwijderen privaat property, omdat hierdoor wordt voorkomen dat de component wordt vermeld in het register van Bower. Omdat het deelbaar moet zijn, wil ik dat het wordt vermeld. Ook moet de Reddit-component een Ajax-oproep doen, dus ik sluit ook een afhankelijkheid van het polymeer in kernelementen set van componenten die de Ajax-functionaliteit bevat die ik nodig heb. Ten slotte voeg ik een versienummer toe om dit verder te volgen. Dit is het eindresultaat:
"name": "reddit-element", "version": "0.0.1", "dependencies": "polymer": "Polymeer / polymeer # ~ 0.2.3", "kernelementen": "Polymeer / kern-elementen # ~ 0.2.3 ",
Het laatste beetje Bower-configuratie dat moet worden gedaan, is het maken van een bestand met de naam .bowerrc in de reddit-element map die een aangepaste installatielocatie definieert voor de afhankelijkheden van onze component. Dit wordt gedefinieerd als eenvoudige JSON-gegevens zoals deze:
"map": "... /"
Wat dit in wezen doet, is Bower vertellen om afhankelijkheden een niveau hoger te installeren, zodat het broers en zussen zijn van de reddit-element map. De reden dat dit belangrijk is, is omdat wanneer iemand onze component installeert met Bower, deze in de bower_components map als broers en zussen naar al het andere daarin (inclusief Polymeer). Door de dingen op deze manier te structureren, zorgen we ervoor dat we ons op dezelfde manier ontwikkelen als we uiteindelijk zullen delen. Het stelt ons ook in staat om het canonieke pad dat ik hierboven noemde te gebruiken, zodat we op consistente wijze kunnen verwijzen naar andere componenten in onze code.
Laten we de verschillen bekijken. Als ik de .bowerrc bestand en heeft de installatie van prieel opdracht, mijn mappenstructuur zou er als volgt uitzien:
Hiermee installeert u de bower_components map direct in de directory van de component, wat niet is wat ik wil. ik wil de reddit-element map om een broer of zus te zijn van alle afhankelijkheden die het nodig heeft:
Deze methode zorgt ervoor dat wanneer een gebruiker dit onderdeel installeert met behulp van Bower, het onderdeel en de afhankelijkheden correct worden geïnstalleerd in de bower_components map.
Met de .bowerrc bestand toegevoegd aan de map van uw component en de bower.json setup met de juiste afhankelijkheden, de volgende stap is om te draaien installatie van prieel, om Bower de juiste componenten naar beneden te laten halen en toe te voegen aan het project.
In deze zelfstudie wilde ik ervoor zorgen dat ik een solide basis legde voor het gebruik van de nieuwe polymeerkolomplaat en enkele redenen achter de ontwerpkeuzes die het team heeft gemaakt.
In het volgende deel van deze serie ga ik het nieuwe documentatieonderdeel bespreken dat is opgenomen in de standaard en hoe het delen en demonteren van je component aanzienlijk eenvoudiger wordt. Ik zal je ook laten zien hoe je je component kunt instellen om te delen via het register van Bower.
