Share
Dans mon dernier tutoriel sur la bibliothèque Polymer, j'ai expliqué comment tirer parti de ce nouvel outil génial pour créer des composants Web réutilisables. L’essentiel du tutoriel et de l’utilisation des composants est d’aider notre développement en:
Je suis toujours épris de cela et je voulais l'explorer un peu plus en consultant un nouveau modèle publié par l'équipe Polymer pour faciliter considérablement le déploiement et la réutilisation..
Une des bizarreries du processus de développement des polymères, que je n’ai pas abordée, c’est le décalage entre le développement d’un composant et sa mise à la disposition des autres utilisateurs. Jetons un coup d'oeil à un extrait de mon précédent tutoriel:
L'objectif de ce code est d'inclure Polymer Core, la principale API qui vous permet de définir les éléments personnalisés. Pour le développement et les tests locaux, cela fonctionne parfaitement, mais malheureusement, le chemin spécifié vous empêchera de partager ce composant. La raison en est que si un autre utilisateur tente d’installer votre élément avec Bower (la méthode d’installation préférée), il deviendra un frère de Polymer dans leur répertoire. bower_components dossier.
Le problème avec ça, c’est que le composant va chercher … /Bower_components/polymer/polymer.html qui sera un chemin invalide. Les composants doivent toujours supposer que leurs dépendances sont des frères et sœurs, ils doivent donc rechercher … /Polymer/polymer.html. C'est le "chemin canonique".
En discutant avec l’impressionnant Rob Dodson de l’équipe Polymer, il a expliqué que le seul moyen de contourner le problème était de développer à l’aide de la méthode que j’avais décrite à l’origine et que, une fois prêt à partager mon composant, convertissez tous les chemins que bower_components vers … / quand je suis prêt à publier mon élément.
Ce n’est évidemment pas idéal et j’aurais probablement pu créer un type de tâche Grunt pour analyser mes fichiers de composants afin d’effectuer ces mises à jour. Heureusement, l’équipe Polymer a fait des découvertes et a mis au point une solution créative qu’elle appelle le élément sans titre.
Accentsconagua
élément sans titre ModèleQuand je mentionne élément sans titre, Je parle d'une nouvelle chaudière disponible pour faciliter considérablement la création de composants réutilisables et déployables, en vous fournissant une base de travail sur laquelle vous pouvez travailler. Cela aide à éliminer les problèmes que j'ai mentionnés ci-dessus en:
La grande victoire pour cela est de pouvoir développer votre composant sans avoir à vous soucier de faire des changements de chemin substantiels qui ne sont pas seulement encombrants, mais pourraient casser votre élément si vous manquez quelque chose.
Actuellement, le projet fait partie de PolymerLabs au moment où il est mis à l'épreuve, mais il a certainement l'air assez solide:
Maintenant, la première chose à faire est de créer un répertoire de développement contenant votre nouveau composant, ainsi que tous les composants Bower que vous installerez. J'ai appelé le mien polymèredev. De là, vous devrez vous rendre au élément sans titre Github repo et téléchargez-le dans votre nouveau dossier de développement. C’est une étape importante parce que vous avoir besoin pour extraire le contenu dans ce dossier, pour éviter les problèmes de répertoire frères que j'ai mentionnés précédemment.
Extraire le .Zip *: français fichier va créer un nouveau dossier appelé untitled-element-master qui contient les fichiers passe-partout dont vous aurez besoin pour créer votre nouveau composant. Vous devrez renommer plusieurs éléments en fonction du nom de votre composant. Ceci comprend:
untitled-element-master dossieruntitled-element.htmluntitled-element.cssJe vais recréer l'élément Reddit que j'ai créé dans mon dernier tutoriel, voici donc comment se présenteraient les changements:
untitled-element-master -> reddit-element untitled-element.html -> reddit-element.html untitled-element.css -> reddit-element.css Voici à quoi ressemblait le répertoire auparavant:
Et voici à quoi cela ressemble après les mises à jour:
L’essentiel pour comprendre, c’est que vous travaillerez à l’intérieur du reddit-element lors de la création de votre composant et ultérieurement, lorsque nous utilisons Bower pour installer les composants Polymer, ce répertoire est un frère direct des répertoires nouvellement installés. Je sais que je suis vraiment dur sur ce point mais c'est une chose importante à comprendre, car cela affecte votre capacité à partager votre composant.
Pour finir, vous souhaiterez mettre à jour les références avec le nom de votre composant, à l’intérieur des fichiers suivants:
bower.jsondemo.htmlreddit-element.htmlChacun de ces fichiers contient des références à élément sans titre dans le code et doivent être mis à jour. Rappelez-vous que toute référence à élément sans titre devrait être changé en reddit-element. Si vous voulez être absolument sûr, effectuez une recherche et un remplacement globaux à l'aide de votre éditeur..
Puisque Bower est la méthode préférée pour installer Polymer et partager des composants, passons en quelques étapes pour nous assurer de configurer correctement la configuration de Bower du composant Reddit..
Par défaut, le standard inclut un bower.json fichier. Ce fichier est utilisé pour répertorier plusieurs éléments, notamment le nom du composant et les éventuelles dépendances à installer pour l'utiliser. Voici à quoi ça ressemble:
"name": "reddit-element", "private": true, "dépendances": "polymer": "Polymer / polymer # master"
Je vais d'abord enlever le privé propriété, car cela empêchera le composant d’être répertorié dans le registre Bower. Puisqu'il est supposé être partageable, je veux qu'il soit répertorié. De plus, le composant Reddit doit faire un appel Ajax, donc j'inclus une dépendance sur Polymer éléments de base ensemble de composants qui inclut la fonctionnalité Ajax dont j'ai besoin. Enfin, je vais ajouter un numéro de version pour suivre cette évolution. Voici le résultat final:
"name": "reddit-element", "version": "0.0.1", "dépendances": "polymère": "Polymère / polymère # ~ 0.2.3", "éléments centraux": "Polymère / éléments de base # ~ 0.2.3 ",
La dernière étape de la configuration de Bower consiste à créer un fichier appelé .Bowerrc dans le reddit-element dossier qui définit un emplacement d'installation personnalisé pour les dépendances de notre composant. Ceci est défini comme de simples données JSON comme ceci:
"répertoire": "… /"
En gros, cela indique à Bower d’installer les dépendances d’un niveau supérieur pour qu’elles soient les frères et soeurs de la même famille. reddit-element dossier. C’est important parce que lorsque quelqu'un installe notre composant avec Bower, il sera placé dans le bower_components dossier en tant que frères et sœurs à tout le reste là-bas (y compris Polymer). En structurant les choses de cette manière, nous nous assurons que notre développement se fait de la même manière que nous le partagerons éventuellement. Cela nous permet également d'utiliser le chemin canonique que j'ai mentionné ci-dessus, garantissant ainsi une manière cohérente de référencer d'autres composants de notre code..
Passons en revue les différences. Si je n'ai pas créé le .Bowerrc déposer et exécuter le bower installer commande, ma structure de répertoire ressemblerait à ceci:
Cela installe le bower_components dossier directement dans le répertoire du composant, ce qui n'est pas ce que je veux. je veux le reddit-element dossier pour être un frère de toutes les dépendances dont il a besoin:
Cette méthode garantit que lorsqu'un utilisateur installe ce composant à l'aide de Bower, le composant et les dépendances seront correctement installés dans le bower_components dossier.
Avec le .Bowerrc fichier ajouté au dossier de votre composant et le bower.json configuration avec les dépendances appropriées, la prochaine étape consiste à exécuter bower installer, faire en sorte que Bower détache les composants appropriés et les ajoute au projet.
Dans ce tutoriel, je souhaitais m'assurer que j'avais jeté les bases solides sur l'utilisation du nouveau passe-partout Polymer et la logique qui sous-tendait les choix de conception effectués par l'équipe..
Dans la partie suivante de cette série, je passerai en revue le nouveau composant de documentation inclus dans le standard et expliquera comment cela facilitera considérablement le partage et la démonstration de votre composant. Je vais également vous montrer comment configurer votre composant pour qu'il soit partagé via le registre Bower..
