Share
Nel mio ultimo tutorial sulla libreria Polymer, ho spiegato come sfruttare questo fantastico nuovo strumento per creare componenti web riutilizzabili. Il punto chiave del tutorial e dell'utilizzo dei componenti è di aiutare il nostro sviluppo attraverso:
Sono ancora innamorato di questo e ho voluto esplorare questo aspetto un po 'di più verificando un nuovo modello che il team Polymer ha rilasciato per rendere l'implementazione e il riutilizzo sostanzialmente più semplici.
Una delle peculiarità del processo di sviluppo di Polymer che non ho toccato, è stata la disconnessione tra lo sviluppo di un componente e la sua messa a disposizione per il riutilizzo da parte di altri. Diamo un'occhiata a uno snippet del mio precedente tutorial:
Questo scopo di questo codice è includere Polymer core, l'API principale che consente di definire gli elementi personalizzati. Per lo sviluppo locale e il test, questo funziona perfettamente ma sfortunatamente il percorso specificato ti impedirà di condividere questo componente. Il motivo è perché se un altro utente tenta di installare il tuo elemento con Bower (che è il metodo di installazione preferito), finirà per diventare fratello di Polymer nella loro bower_components cartella.
Il problema è che il componente sta per essere cercato ... /bower_components/polymer/polymer.html che sarà un percorso non valido. I componenti devono sempre presumere che le loro dipendenze siano fratelli, quindi dovrebbe effettivamente essere cercato ... /polymer/polymer.html. Questo è il "percorso canonico".
Parlando con il fantastico Rob Dodson del team Polymer, ha detto che l'unico modo per aggirare questo era quello di sviluppare utilizzando il metodo che avevo delineato e una volta che ero pronto a condividere il mio componente, convertire tutti i miei percorsi che cercavo bower_components oltre a ... / quando sono pronto a pubblicare il mio elemento.
Questo ovviamente non è l'ideale e probabilmente avrei potuto creare un qualche tipo di attività di Grunt per analizzare i miei file componenti per fare questi aggiornamenti. Per fortuna, il team di Polymer ci ha lavorato su questo e ha escogitato una soluzione creativa che chiamano il untitled-elemento.
Accentsconagua
untitled-elemento ModelloQuando menziono untitled-elemento, Mi riferisco a una nuova scheda tecnica che è disponibile per rendere la creazione di componenti riutilizzabili e dispiegabili sostanzialmente più semplice, offrendo una base di base su cui lavorare. Aiuta ad eliminare i problemi che ho citato sopra:
La grande vittoria per questo, è essere in grado di sviluppare il tuo componente senza dover passare attraverso la fatica di apportare sostanziali cambiamenti di percorso che non sono solo ingombranti, ma potrebbero rompere il tuo elemento se ti manca qualcosa.
Attualmente, il progetto fa parte di PolymerLabs poiché viene messo alla prova, ma sicuramente è piuttosto solido:
Ora la prima cosa che vorrai fare è creare una directory di sviluppo che ospiterà il tuo nuovo componente, così come tutti i componenti di Bower che installerai. Ho chiamato il mio polymerdev. Da lì, dovrai andare al untitled-elemento Github repo e scaricalo nella tua nuova cartella di sviluppo. Questo è un passo importante perché tu bisogno per estrarre il contenuto in quella cartella, per evitare problemi di directory fratello che ho menzionato in precedenza.
Estrazione del .cerniera lampo il file creerà una nuova cartella chiamata untitled-elemento-master che contiene i file boilerplate che ti serviranno per creare il tuo nuovo componente. Dovrai rinominare un paio di cose in base al nome del tuo componente. Ciò comprende:
untitled-elemento-master cartellauntitled-element.htmluntitled-element.cssHo intenzione di ricreare l'elemento Reddit che ho creato nel mio ultimo tutorial, quindi questo è ciò che assomiglierebbe ai cambiamenti:
untitled-elemento-master -> reddit elemento untitled-element.html -> reddit-element.html untitled-element.css -> reddit-element.css Ecco come appariva la directory prima:
Ed ecco come appare dopo gli aggiornamenti:
La cosa fondamentale da capire è che lavorerai all'interno di reddit elemento cartella durante la creazione del componente e nei passaggi successivi, quando utilizziamo Bower per installare i componenti Polymer, quella directory sarà un fratello diretto alle directory appena installate. So che sto molto insistendo su questo punto, ma è una cosa importante da capire, poiché influenza la tua capacità di condividere il tuo componente.
Per finire, vorrai aggiornare i riferimenti al nome del tuo componente, all'interno dei seguenti file:
bower.jsondemo.htmlreddit-element.htmlCiascuno di questi file contiene riferimenti a untitled-elemento all'interno del codice e devono essere aggiornati. Ricorda che qualsiasi riferimento a untitled-elemento dovrebbe essere cambiato in reddit elemento. Se vuoi essere assolutamente sicuro, fai una ricerca e sostituzione globale usando il tuo editor.
Poiché Bower è il metodo preferito per l'installazione di Polymer e la condivisione dei componenti, eseguiamo alcuni passaggi per assicurarci di configurare correttamente la configurazione di Bower del componente Reddit.
Per impostazione predefinita, la piastra di riscaldamento include a bower.json file. Questo file è usato per elencare diverse cose, incluso il nome del componente e tutte le dipendenze che devono essere installate per usarlo. Ecco come appare:
"name": "reddit-element", "private": true, "dependencies": "polymer": "Polymer / polymer # master"
Innanzitutto, rimuoverò il privato proprietà poiché impedirà che il componente venga elencato nel registro di Bower. Dal momento che dovrebbe essere condivisibile, voglio che sia elencato. Inoltre, il componente Reddit deve effettuare una chiamata Ajax, quindi includo una dipendenza dal Polymer core-elementi set di componenti che include la funzionalità Ajax di cui ho bisogno. Infine, aggiungerò un numero di versione per tenere traccia di ciò andando avanti. Ecco il risultato finale:
"nome": "reddit-element", "version": "0.0.1", "dependencies": "polymer": "Polymer / polymer # ~ 0.2.3", "core-elements": "Polymer / core-elements # ~ 0.2.3 ",
L'ultimo bit della configurazione di Bower che deve essere fatto, è quello di creare un file chiamato .bowerrc nel reddit elemento cartella che definisce un percorso di installazione personalizzato per le dipendenze del nostro componente. Questo è definito come semplici dati JSON come questo:
"directory": "... /"
Ciò che essenzialmente fa è dire a Bower di installare tutte le dipendenze a un livello superiore, in modo che siano fratelli di reddit elemento cartella. Il motivo per cui questo è importante è che quando qualcuno installa il nostro componente con Bower, verrà inserito nel bower_components cartella come fratelli di tutto il resto (incluso Polymer). Strutturando le cose in questo modo, ci assicuriamo che stiamo sviluppando nello stesso modo in cui condivideremo. Ci consente inoltre di utilizzare il percorso canonico di cui sopra, assicurando un modo coerente di fare riferimento ad altri componenti nel nostro codice.
Rivediamo le differenze. Se non ho creato il .bowerrc file e ha eseguito il installazione di bower comando, la mia struttura di directory sarebbe simile a questa:
Questo installa il bower_components cartella direttamente nella directory del componente, che non è quello che voglio. voglio il reddit elemento cartella per essere un fratello di tutte le dipendenze di cui ha bisogno:
Questo metodo garantisce che quando un utente installa questo componente utilizzando Bower, il componente e le dipendenze verranno installati correttamente nel bower_components cartella.
Con il .bowerrc file aggiunto alla cartella del tuo componente e il bower.json configurare con le dipendenze appropriate, il passo successivo è quello di eseguire installazione di bower, per fare in modo che Bower abbatta i componenti appropriati e aggiungili al progetto.
In questo tutorial, volevo assicurarmi di gettare solide basi su come utilizzare la nuova lastra di polimero Polymer e alcune delle motivazioni alla base delle scelte progettuali che il team ha fatto.
Nella parte successiva di questa serie, esaminerò il nuovo componente della documentazione incluso nel boilerplate e come renderà la condivisione e la demo del componente sostanzialmente più semplice. Ti mostrerò anche come configurare il componente da condividere tramite il registro di Bower.
