Share
I min senaste handledning om Polymer-biblioteket förklarade jag hur man utnyttjar det här fantastiska nya verktyget för att skapa återanvändbara webbkomponenter. Huvuddelen av handledningen och användningen av komponenter är att hjälpa vår utveckling genom att:
Jag är fortfarande slagen med det och ville utforska detta lite mer genom att kolla in en ny mall som Polymer-laget släpptes för att göra utplacering och återanvändning väsentligt lättare.
En av frågorna i polymerutvecklingsprocessen som jag inte berörde var kopplingen mellan att utveckla en komponent och faktiskt göra den tillgänglig för återanvändning av andra. Låt oss ta en titt på ett utdrag ur min tidigare handledning:
Detta syfte med denna kod är att inkludera Polymer-kärnan, det huvudsakliga API-en som låter dig definiera de anpassade elementen. För lokal utveckling och testning fungerar det faktiskt perfekt men tyvärr kommer den angivna sökvägen faktiskt att hindra dig från att dela den här komponenten. Anledningen till detta är att om en annan användare försöker installera ditt element med Bower (vilket är den föredragna installationsmetoden), kommer det att hamna som en syskon av Polymer i deras bower_components mapp.
Problemet med det är att komponenten kommer att leta efter ... /bower_components/polymer/polymer.html vilket kommer att vara en ogiltig sökväg. Komponenter måste alltid anta att deras beroende är syskon, så det borde faktiskt letas efter ... / polymer / polymer.html. Detta är den "kanoniska vägen".
I chatt med den fantastiska Rob Dodson av Polymer-teamet sa han att det enda sättet att göra detta var att utveckla med den metod jag ursprungligen skisserade och när jag var redo att dela min komponent, konvertera alla mina banor som letar efter bower_components över till ... / när jag är redo att publicera mitt element.
Detta är uppenbarligen inte idealiskt och jag kunde noga ha skapat någon typ av Grunt-uppgift att analysera genom mina komponentfiler för att göra dessa uppdateringar. Tack och lov, Polymer-teamet har nudlar på detta och har kommit med en kreativ lösning som de kallar untitled-elementet.
Accentsconagua
untitled-elementet MallNär jag nämna untitled-elementet, Jag hänvisar till en ny pannplatta som är tillgänglig för att göra att skapa återanvändbara och inbyggda komponenter väsentligt enklare, genom att ge dig en basfundament att arbeta med. Det bidrar till att eliminera de problem som jag nämnde ovan av:
Den stora vinsten för detta, är att kunna utveckla din komponent utan att behöva gå igenom problemen med att göra väsentliga förändringar i banan som inte bara är besvärliga men kan bryta ditt element om du saknar något.
Projektet är för närvarande en del av PolymerLabs, eftersom det går igenom sina steg, men det ser verkligen ganska soligt ut:
Nu är det första du vill göra, skapa en utvecklingskatalog som kommer att rymma din nya komponent, liksom alla Bower-komponenter du installerar. Jag ringde min polymerdev. Därifrån måste du gå till untitled-elementet Github repo och ladda ner den till din nya utvecklingsmapp. Detta är ett viktigt steg för dig behöver att extrahera innehållet i den mappen, för att undvika problem med syskonkatalogen som jag nämnde tidigare.
Extraktionen av .blixtlås filen skapar en ny mapp som heter untitled-elementet-master som innehåller boilerplate-filerna behöver du skapa din nya komponent. Du måste byta namn på ett par saker baserat på namnet på din komponent. Detta inkluderar:
untitled-elementet-master mappuntitled-element.htmluntitled-element.cssJag ska återskapa Reddit-elementet som jag skapade i min senaste handledning, så det här är vad ändringarna skulle se ut:
untitled-elementet-master -> reddit-elementet untitled-element.html -> reddit-element.html untitled-element.css -> reddit-element.css Så här ser katalogen ut som tidigare:
Och här är det som det ser ut efter uppdateringarna:
Det viktigaste att förstå är att du ska arbeta inuti reddit-elementet mapp när du skapar din komponent och i senare steg, när vi använder Bower för att installera Polymer-komponenterna, kommer den katalogen att vara en direkt syskon till de nyligen installerade katalogerna. Jag vet att jag verkligen har harp på den här tiden men det är en viktig sak att förstå, eftersom det påverkar din förmåga att dela din komponent.
För att avsluta detta måste du uppdatera referenser till ditt komponentnamn, inuti följande filer:
bower.jsondemo.htmlreddit-element.htmlVar och en av dessa filer innehåller referenser till untitled-elementet inom koden och behöver uppdateras. Kom ihåg att några hänvisningar till untitled-elementet bör ändras till reddit-elementet. Om du vill vara helt säker, gör en global sökning och ersätt med din redaktör.
Eftersom Bower är den föredragna metoden för att installera Polymer och dela komponenter, låt oss gå igenom några steg för att säkerställa att vi installerar Reddit-komponentens Bower-konfiguration korrekt.
Som standard innehåller pannan en a bower.json fil. Den här filen används för att lista flera saker, inklusive namnet på komponenten och eventuella beroenden som måste installeras för att kunna använda den. Så här ser det ut:
"namn": "reddit-element", "privat": true, "beroenden": "polymer": "Polymer / polymer # master"
Först ska jag ta bort privat egendom eftersom det kommer att förhindra att komponenten listas i Bower-registret. Eftersom det ska vara delbart, vill jag att det ska listas. Reddit-komponenten behöver också göra ett Ajax-samtal, så jag inkluderar ett beroende av Polymer kärnelement uppsättning av komponenter som innehåller den Ajax-funktionalitet som jag behöver. Slutligen lägger jag till ett versionsnummer för att spåra detta framåt. Här är slutresultatet:
"namn": "reddit-element", "version": "0.0.1", "beroenden": "polymer": "Polymer / polymer # ~ 0.2.3" kärnelement # ~ 0.2.3 ",
Den sista biten av Bower-konfigurationen som behöver göras är att skapa en fil som heter .bowerrc i reddit-elementet mapp som definierar en anpassad installationsplats för beroendet av vår komponent. Detta definieras som enkla JSON-data så här:
"katalog": "... /"
Vad detta i huvudsak gör är att Bower ska installera alla beroenden en nivå upp, så att de är syskon av reddit-elementet mapp. Anledningen till att detta är viktigt är att när någon installerar vår komponent med Bower kommer den att placeras i bower_components mapp som syskon till allt annat där inne (inklusive Polymer). Att strukturera saker på detta sätt garanterar att vi utvecklas på samma sätt som vi så småningom kommer att dela. Det tillåter oss också att använda den kanoniska sökvägen jag nämnde ovan, vilket säkerställer ett konsekvent sätt att hänvisa till andra komponenter i vår kod.
Låt oss granska skillnaderna. Om jag inte skapade .bowerrc filen och sprang den bower installation kommando, min katalogstruktur skulle se ut så här:
Detta installerar bower_components mapp direkt i komponentens katalog, vilket inte är vad jag vill ha. jag vill ha reddit-elementet mapp för att vara syskon till alla beroenden som den behöver:
Denna metod säkerställer att när en användare installerar den här komponenten med Bower, kommer komponenten och beroendet att installeras korrekt i bower_components mapp.
Med .bowerrc fil som lagts till i din komponents mapp och bower.json setup med rätt beroenden, nästa steg är att springa bower installation, att ha Bower dra ner lämpliga komponenter och lägga till dem i projektet.
I den här handledningen ville jag se till att jag lagde en solid grund för hur man använder den nya Polymer-kedjan och en del av motiveringen bakom de designval som laget har gjort.
I nästa del av denna serie kommer jag att gå över den nya dokumentationskomponenten som ingår i pannplattan och hur det gör det lättare att dela och demoera din komponent. Jag ska också visa hur du konfigurerar din komponent som ska delas via Bower-registret.
