Share
I min siste opplæring om Polymer-biblioteket forklarte jeg hvordan du kan dra nytte av dette flotte nye verktøyet for å lage gjenbrukbare webkomponenter. Nøkkelpunktet i opplæringen og bruk av komponenter er å hjelpe utviklingen vår ved å:
Jeg er fortsatt slått av med det og ønsket å utforske dette litt mer ved å sjekke ut en ny mal som Polymer-teamet ble utgitt for å gjøre distribusjon og gjenbruk betydelig vesentlig.
En av kjennene til polymerutviklingsprosessen som jeg ikke berørte, var koblingen mellom å utvikle en komponent og faktisk gjøre den tilgjengelig for gjenbruk av andre. La oss se på en utdrag fra min tidligere opplæring:
Dette formålet med denne koden er å inkludere Polymer kjerne, den viktigste API som lar deg definere de egendefinerte elementene. For lokal utvikling og testing, fungerer dette faktisk perfekt, men dessverre vil banen spesifisert forhindre deg i å dele denne komponenten. Årsaken til dette er fordi hvis en annen bruker forsøker å installere elementet ditt med Bower (som er den foretrukne installasjonsmetoden), kommer den til å ende som en søster av Polymer i deres bower_components mappe.
Problemet med det er at komponenten skal være på utkikk etter ... /bower_components/polymer/polymer.html som vil være en ugyldig bane. Komponenter må alltid anta at deres avhengigheter er søsken, så det burde faktisk være på jakt etter ... / polymer / polymer.html. Dette er den "kanoniske banen".
I chatter med den fantastiske Rob Dodson fra Polymer-teamet sa han at den eneste veien rundt dette var å utvikle ved hjelp av metoden jeg opprinnelig skisserte og når jeg var klar til å dele min komponent, konverterte alle mine baner som ser etter bower_components over til ... / når jeg er klar til å publisere elementet mitt.
Dette er åpenbart ikke ideelt, og jeg kunne sannsynligvis ha opprettet en slags Grunt-oppgave å analysere gjennom komponentfiler for å gjøre disse oppdateringene. Heldigvis har Polymer-teamet nudler seg på dette og har kommet opp med en kreativ løsning som de kaller uten tittel-element.
Accentsconagua
uten tittel-element MalNår jeg nevner uten tittel-element, Jeg refererer til en ny boilerplate som er tilgjengelig for å skape gjenbrukbare og distribuerte komponenter betydelig lettere, ved å gi deg et grunnlag for å jobbe med. Det bidrar til å eliminere problemene jeg nevnte ovenfor ved:
Den store gevinsten for dette, er å kunne utvikle komponenten uten å måtte gå gjennom problemer med å gjøre betydelige baneendringer som ikke bare er besværlige, men kan ødelegge elementet hvis du savner noe.
For tiden er prosjektet en del av PolymerLabs som det blir satt gjennom sine skritt, men det ser sikkert ut ganske solidt:
Nå er det første du vil gjøre, å lage en utviklingskatalog som vil huse din nye komponent, så vel som alle Bower-komponentene du vil installere. Jeg ringte min polymerdev. Derfra må du gå til uten tittel-element Github repo og last den ned i din nye utviklingsmappe. Dette er et viktig skritt fordi du trenge å trekke ut innholdet i den mappen, for å unngå problemene med søskenkataloget som jeg nevnte tidligere.
Ekstrahering av .glidelås filen vil opprette en ny mappe som heter uten tittel-element-mester som inneholder boilerplate-filene må du opprette den nye komponenten. Du må omdøpe et par ting basert på navnet på komponenten din. Dette inkluderer:
uten tittel-element-mester mappeuntitled-element.htmluntitled-element.cssJeg skal gjenskape Reddit-elementet som jeg opprettet i min siste opplæring, så dette er hvordan endringene ville se ut:
uten tittel-element-mester -> reddit-element untitled-element.html -> reddit-element.html untitled-element.css -> reddit-element.css Her ser katalogen ut som før:
Og slik ser det ut etter oppdateringene:
Den viktigste tingen å forstå, er at du skal jobbe inni reddit-element mappe når du lager din komponent og i senere trinn, når vi bruker Bower til å installere Polymer-komponentene, vil denne katalogen være en direkte søsken til de nylig installerte katalogene. Jeg vet at jeg virkelig har harping på dette punktet, men det er viktig å forstå, siden det påvirker evnen til å dele komponenten din.
For å fullføre dette, vil du oppdatere referansene til komponentnavnet ditt, inne i følgende filer:
bower.jsondemo.htmlreddit-element.htmlHver av disse filene inneholder referanser til uten tittel-element innenfor koden og må oppdateres. Husk at noen referanser til uten tittel-element bør endres til reddit-element. Hvis du vil være helt sikker, gjør du et globalt søk og erstatt ved hjelp av editoren din.
Siden Bower er den foretrukne metoden for å installere Polymer- og delingskomponenter, la oss gå gjennom noen få trinn for å sikre at vi konfigurerer Reddit-komponentens Bower-konfigurasjon på riktig måte..
Som standard inneholder kjeleplaten a bower.json fil. Denne filen brukes til å liste flere ting, inkludert navnet på komponenten og eventuelle avhengigheter som må installeres for å kunne bruke den. Slik ser det ut:
"navn": "reddit-element", "privat": sant, "avhengigheter": "polymer": "Polymer / polymer # master"
Først fjerner jeg privat eiendom siden det vil forhindre at komponenten blir oppført i Bower-registeret. Siden det skal være delbart, vil jeg at det skal bli oppført. Reddit-komponenten trenger også å lage et Ajax-anrop, så jeg inkluderer en avhengighet av polymeren kjerneelementer sett med komponenter som inkluderer Ajax-funksjonaliteten som jeg trenger. Til slutt legger jeg til et versjonsnummer for å spore dette fremover. Her er sluttresultatet:
"navn": "reddit-element", "versjon": "0.0.1", "avhengigheter": "polymer": "Polymer / polymer # ~ 0.2.3" kjerneelementer # ~ 0.2.3 ",
Den siste delen av Bower-konfigurasjonen som må gjøres, er å lage en fil som heter .bowerrc i reddit-element mappe som definerer en tilpasset installasjonsplassering for avhengighetene til komponenten vår. Dette er definert som enkle JSON-data som dette:
"katalog": "... /"
Hva dette egentlig gjør, er at Bower skal installere noen avhengighet ett nivå opp, slik at de er søsken til reddit-element mappe. Årsaken til at dette er viktig er at når noen installerer komponenten med Bower, blir den plassert i bower_components mappe som søsken til alt annet der inne (inkludert Polymer). Strukturering av ting på denne måten sikrer at vi utvikler på samme måte som vi til slutt vil dele. Det tillater oss også å bruke den kanoniske banen jeg nevnte ovenfor, for å sikre en konsekvent måte å referere til andre komponenter i vår kode.
La oss se på forskjellene. Hvis jeg ikke opprettet .bowerrc fil og kjørte bower installasjon kommando, min katalogstruktur vil se slik ut:
Dette installerer bower_components mappe direkte inn i komponentens katalog, som ikke er det jeg vil ha. Jeg vil ha reddit-element mappe for å være søsken til alle de avhengighetene som den trenger:
Denne metoden sikrer at når en bruker installerer denne komponenten ved hjelp av Bower, vil komponenten og avhengighetene installeres riktig inn i bower_components mappe.
Med .bowerrc filen lagt til komponentens mappe og bower.json oppsett med riktig avhengighet, neste trinn er å løpe bower installasjon, å ha Bower trekke ned de aktuelle komponentene og legge dem til prosjektet.
I denne opplæringen ønsket jeg å sørge for at jeg la et solid grunnlag for hvordan du bruker den nye Polymer-kjeleplaten og noen av begrunnelsene bak designvalgene laget har laget.
I neste del av denne serien skal jeg gå over den nye dokumentasjonskomponenten som er inkludert i kjeleplaten, og hvordan det gjør det enklere å dele og demoere komponenten din. Jeg vil også vise deg hvordan du konfigurerer komponenten din for å bli delt via Bower-registeret.
