Share
În ultimul meu tutorial despre biblioteca Polymer, i-am explicat cum să profiți de acest nou instrument extraordinar pentru a crea componente web reutilizabile. Punctul cheie al tutorialului și al utilizării componentelor este de a ne ajuta să dezvoltăm:
Sunt încă înfrânt cu asta și am vrut să investighez acest lucru mai mult, verificând un nou model pe care echipa Polymer a lansat-o pentru a face implementarea și reutilizarea mult mai ușor.
Una dintre ciudățenii procesului de dezvoltare a polimerilor pe care nu mi-am atins-o a fost deconectarea dintre dezvoltarea unei componente și punerea la dispoziție pentru reutilizare de către alții. Să aruncăm o privire la un fragment din tutorialul meu anterior:
Acest scop al acestui cod este să includă nucleul de polimer, principalul API care vă permite să definiți elementele personalizate. Pentru dezvoltarea și testarea locală, aceasta funcționează perfect, dar, din păcate, calea specificată vă va împiedica să vă împărtășiți această componentă. Motivul pentru aceasta este că, dacă un alt utilizator încearcă să instaleze elementul dvs. cu Bower (care este metoda de instalare preferată), se va sfârși ca un frate al lui Polymer în bower_components pliant.
Problema cu asta este că componenta va căuta ... /bower_components/polymer/polymer.html care va fi o cale nevalidă. Componentele trebuie să presupună întotdeauna că dependențele lor sunt frați, așa că ar trebui să căutați ... / polimer / polimer.html. Aceasta este calea canonică.
În chatul cu Rob Dodson de la echipa Polymer, el a spus că singura modalitate în jurul acestui lucru a fost de a dezvolta folosind metoda pe care am subliniat-o inițial și odată ce am fost pregătită să-mi împărtășesc componenta, să convertesc toate căile mele care caută bower_components până la ... / când sunt pregătit să îmi public elementul.
Acest lucru este, evident, nu ideal și probabil că aș fi putut crea un tip de sarcină Grunt pentru a analiza fișierele componente pentru a face aceste actualizări. Din fericire, echipa de polimeri nu a fost de acord cu acest lucru și a venit cu o soluție creatoare pe care ei o numesc Element untitled.
Accentsconagua
Element untitled FormatCând menționez Element untitled, Mă refer la o nouă boilerplate care este disponibilă pentru a crea componente mai reușite și mai ușor de realizat, oferindu-vă o fundație de bază pentru a lucra cu. Ajută la eliminarea problemelor pe care le-am menționat mai sus:
Marele câștig pentru acest lucru este în măsură să vă dezvoltați componenta fără a trebui să treceți prin dificultățile de a face schimbări substanțiale ale traseului, care nu sunt doar greoaie, ci ar putea să vă spargă elementul dacă vă pierdeți ceva.
În prezent, proiectul face parte din PolymerLabs, pe măsură ce trece prin pașii săi, dar cu siguranță arată destul de solid:
Acum, primul lucru pe care doriți să-l faceți este să creați un director de dezvoltare care să găzduiască noua dvs. componentă, precum și toate componentele Bower pe care le veți instala. Am sunat pe a mea polymerdev. De acolo, va trebui să mergeți la Element untitled Github repo și descărcați-l în noul folder de dezvoltare. Acesta este un pas important pentru tine nevoie pentru a extrage conținutul în acel dosar, pentru a evita problemele legate de agendă pe care le-am menționat anterior.
Extragerea .zip fișierul va crea un nou dosar numit untitled element-master care conține fișierele boilerplate de care aveți nevoie pentru a crea noua componentă. Va trebui să redenumiți câteva lucruri în funcție de numele componentei dvs. Aceasta include:
untitled element-master pliantuntitled-element.htmluntitled-element.cssAm de gând să recreeze elementul Reddit pe care l-am creat în ultimul meu tutorial, așa că ar fi cum ar arata modificările:
untitled element-master -> reddit element untitled-element.html -> reddit-element.html untitled-element.css -> reddit-element.css Iată cum a fost directorul înainte:
Iată cum arată după actualizări:
Lucrul cheie pentru a înțelege, este că veți lucra în interiorul reddit element atunci când folosim Bower pentru a instala componentele Polymer, acel director va fi un frate direct la directoarele nou instalate. Știu că mă gândesc cu adevărat la acest punct, dar este important să înțelegeți, deoarece afectează capacitatea dvs. de a vă distribui componenta.
Pentru a termina acest lucru, veți dori să actualizați referințele la numele componentei dvs., în interiorul următoarelor fișiere:
bower.jsondemo.htmlreddit-element.htmlFiecare dintre aceste fișiere conține referințe la Element untitled în cadrul codului și trebuie să fie actualizate. Amintiți-vă că orice referințe la Element untitled ar trebui să fie schimbată reddit element. Dacă doriți să fiți absolut siguri, faceți o căutare globală și o înlocuiți folosind editorul dvs..
Din moment ce Bower este metoda preferată pentru instalarea componentelor Polymer și partajarea acestora, trebuie să parcurgeți câțiva pași pentru a ne asigura că configurarea corectă a componentei Reddit a Bower.
În mod prestabilit, boilerplate-ul include a bower.json fişier. Acest fișier este folosit pentru a lista mai multe lucruri, inclusiv numele componentei și orice dependențe care trebuie să fie instalate pentru ao folosi. Iată cum arată:
"nume": "reddit-element", "privat": true, "dependențe": "polymer": "polimer / polimer principal"
În primul rând, voi elimina privat datorită faptului că va împiedica includerea componentei în registrul Bower. Deoarece se presupune că ar putea fi împărțită, vreau să fie listată. De asemenea, componenta Reddit trebuie să facă un apel Ajax, deci includ o dependență de Polymer elemente de bază- set de componente care include funcționalitatea Ajax de care am nevoie. În cele din urmă, voi adăuga un număr de versiune pentru a urmări acest lucru înainte. Iată rezultatul final:
"nume": "reddit-element", "versiune": "0.0.1", "dependențe": "polimer" elemente de bază # ~ 0.2.3 ",
Ultimul bit al configurației Bower care trebuie făcut este să creezi un fișier numit .bowerrc în reddit element care definește o locație de instalare personalizată pentru dependențele componentei noastre. Acest lucru este definit ca date simple JSON, cum ar fi:
"director": "... /"
Ceea ce face în mod esențial este ca Bower să instaleze orice dependență la un nivel în sus, astfel încât ei să fie frați ai lui reddit element pliant. Motivul pentru care acest lucru este important este că atunci când cineva instalează componenta noastră cu Bower, va fi plasat în bower_components dosar ca frați pentru orice altceva de acolo (inclusiv Polymer). Structurând lucrurile în acest fel, ne asigurăm că ne dezvoltăm în același mod pe care îl vom împărți în cele din urmă. De asemenea, ne permite să folosim calea canonică menționată mai sus, asigurând o modalitate consecventă de referință a altor componente în codul nostru.
Să analizăm diferențele. Dacă nu am creat .bowerrc fișier și a rulat bower install comandă, structura directorului meu ar arăta astfel:
Aceasta instalează bower_components direct în directorul componentei, ceea ce nu este ceea ce vreau. vreau reddit element dosarul pentru a fi un frate pentru toate dependențele de care are nevoie:
Această metodă asigură că atunci când un utilizator instalează această componentă utilizând Bower, componenta și dependențele vor fi instalate corect în bower_components pliant.
Cu .bowerrc fișier adăugat în folderul componentei dvs. și bower.json configurarea cu dependențele corespunzătoare, următorul pas este să rulați bower install, pentru ca Bower să coboare componentele corespunzătoare și să le adauge la proiect.
În acest tutorial, am vrut să fiu sigur că am pus o bază solidă pentru modul în care să folosesc noul boilerplate Polymer și unele dintre rațiunile din spatele alegerilor de design pe care echipa le-a făcut.
În următoarea parte a acestei serii, voi trece peste noua componentă de documentare care este inclusă în placa de bază și cum va face ca partajarea și demontarea componentei dvs. să fie mult mai ușoară. Vă voi arăta, de asemenea, cum să configurați componenta pentru a fi partajată prin intermediul registrului Bower.
