Share
En mi último tutorial sobre la biblioteca de polímeros, expliqué cómo aprovechar esta gran nueva herramienta para crear componentes web reutilizables. El punto clave del tutorial y del uso de componentes es ayudar a nuestro desarrollo mediante:
Todavía estoy fascinado con él y quería explorar esto un poco más al revisar una nueva plantilla que el equipo de Polymer lanzó para facilitar la implementación y reutilización..
Una de las peculiaridades del proceso de desarrollo de Polymer que no mencioné, fue la desconexión entre el desarrollo de un componente y su disponibilidad para que otros puedan reutilizarlo. Echemos un vistazo a un fragmento de mi tutorial anterior:
Este propósito de este código es incluir el núcleo de polímero, la API principal que le permite definir los elementos personalizados. Para el desarrollo y las pruebas locales, esto realmente funciona perfectamente, pero desafortunadamente la ruta especificada realmente le impedirá compartir este componente. La razón de esto es que si otro usuario intenta instalar su elemento con Bower (que es el método de instalación preferido), terminará como un hermano de Polymer en su bower_components carpeta.
El problema con eso, es que el componente va a estar buscando … /Bower_components/polymer/polymer.html que será una ruta no válida. Los componentes siempre deben asumir que sus dependencias son hermanos, por lo que en realidad debería estar buscando … /Polímero / polímero.html. Este es el "camino canónico".
Al conversar con el asombroso Rob Dodson del equipo de Polymer, dijo que la única forma de evitar esto era desarrollarlo usando el método que describí originalmente y una vez que estaba listo para compartir mi componente, convierta todos mis caminos que busquen. bower_components a ... / cuando esté listo para publicar mi elemento.
Obviamente, esto no es ideal y probablemente podría haber creado algún tipo de tarea Grunt para analizar a través de mis archivos de componentes para hacer estas actualizaciones. Afortunadamente, el equipo de Polymer no ha hecho nada al respecto y ha encontrado una solución creativa que ellos llaman la elemento sin título.
Accentsconagua
elemento sin título ModeloCuando mencione elemento sin título, Me refiero a una nueva plantilla que está disponible para hacer que la creación de componentes reutilizables e implementables sea sustancialmente más fácil, al brindarle una base de base para trabajar. Ayuda a eliminar los problemas que mencioné anteriormente por:
La gran victoria para esto es poder desarrollar su componente sin tener que pasar por la molestia de realizar cambios sustanciales en el camino que no solo son engorrosos, sino que también pueden romper su elemento si pierde algo..
Actualmente, el proyecto es una parte de PolymerLabs, ya que se pone a prueba, pero ciertamente se ve bastante sólido:
Ahora lo primero que querrá hacer es crear un directorio de desarrollo que alojará su nuevo componente, así como todos los componentes Bower que instalará. Llamé al mío polímero de v. A partir de ahí, tendrás que ir a la elemento sin título Github repo y lo descarga en su nueva carpeta de desarrollo. Este es un paso importante porque necesitar para extraer el contenido en esa carpeta, para evitar los problemas de directorio de hermanos que mencioné anteriormente.
Extrayendo el .cremallera archivo creará una nueva carpeta llamada untitled-element-master que contiene los archivos de plantilla que necesitará para crear su nuevo componente. Deberá cambiar el nombre de un par de cosas según el nombre de su componente. Esto incluye:
untitled-element-master carpetauntitled-element.htmluntitled-element.cssVoy a recrear el elemento Reddit que creé en mi último tutorial, así es como se verían los cambios:
untitled-element-master -> elemento reddit untitled-element.html -> reddit-element.html untitled-element.css -> reddit-element.css Aquí es cómo se veía el directorio antes:
Y aquí está lo que parece después de las actualizaciones:
La clave para comprender es que trabajará dentro de la elemento reddit carpeta al crear su componente y en pasos posteriores, cuando usamos Bower para instalar los componentes de Polymer, ese directorio será un hermano directo de los directorios recién instalados. Sé que realmente estoy insistiendo en este punto, pero es importante comprenderlo, ya que afecta su capacidad para compartir su componente..
Para terminar esto, querrá actualizar las referencias al nombre de su componente, dentro de los siguientes archivos:
Bower.jsondemo.htmlreddit-element.htmlCada uno de estos archivos contiene referencias a elemento sin título Dentro del código y necesita ser actualizado. Recuerde que cualquier referencia a elemento sin título debe ser cambiado a elemento reddit. Si desea estar absolutamente seguro, realice una búsqueda y reemplazo global con su editor.
Dado que Bower es el método preferido para instalar Polymer y compartir componentes, veamos algunos pasos para asegurarnos de que configuramos la configuración Bower del componente Reddit correctamente..
Por defecto, la plantilla incluye una Bower.json expediente. Este archivo se usa para enumerar varias cosas, incluido el nombre del componente y las dependencias que deben instalarse para usarlo. Esto es lo que parece:
"nombre": "reddit-element", "privado": verdadero, "dependencias": "polímero": "Polímero / polímero # maestro"
Primero, voy a quitar el privado propiedad, ya que evitará que el componente se incluya en el registro de Bower. Dado que se supone que se puede compartir, quiero que aparezca en la lista. Además, el componente Reddit necesita hacer una llamada Ajax, así que estoy incluyendo una dependencia en el polímero elementos principales conjunto de componentes que incluye la funcionalidad Ajax que necesito. Por último, agregaré un número de versión para rastrear esto en el futuro. Aquí está el resultado final:
"nombre": "reddit-element", "versión": "0.0.1", "dependencias": "polímero": "Polímero / polímero # ~ 0.2.3", "elementos centrales": "Polímero / elementos centrales # ~ 0.2.3 ",
El último bit de la configuración de Bower que se debe hacer es crear un archivo llamado .Bowerrc en el elemento reddit carpeta que define una ubicación de instalación personalizada para las dependencias de nuestro componente. Esto se define como datos JSON simples como este:
"directorio": "... /"
Lo que esencialmente hace es decirle a Bower que instale las dependencias de un nivel superior, para que sean hermanos de la elemento reddit carpeta. La razón por la que esto es importante es porque cuando alguien instala nuestro componente con Bower, se colocará en el bower_components carpeta como hermanos a todo lo demás allí (incluyendo Polymer). Al estructurar las cosas de esta manera, se asegura que nos estamos desarrollando de la misma manera que eventualmente estaremos compartiendo. También nos permite utilizar la ruta canónica que mencioné anteriormente, lo que garantiza una manera consistente de hacer referencia a otros componentes en nuestro código.
Repasemos las diferencias. Si no hubiera creado el .Bowerrc archiva y ejecuta el instalación de la glorieta comando, mi estructura de directorio se vería así:
Esto instala el bower_components carpeta directamente en el directorio del componente, que no es lo que quiero. Quiero el elemento reddit Carpeta para ser un hermano de todas las dependencias que necesita:
Este método garantiza que cuando un usuario instala este componente utilizando Bower, el componente y las dependencias se instalarán correctamente en el bower_components carpeta.
Con el .Bowerrc archivo agregado a la carpeta de su componente y la Bower.json Configuración con las dependencias adecuadas, el siguiente paso es ejecutar instalación de la glorieta, para que Bower baje los componentes apropiados y los agregue al proyecto.
En este tutorial, quería asegurarme de sentar una base sólida sobre cómo usar la nueva placa de soporte de polímero y algunas de las razones detrás de las opciones de diseño que el equipo ha tomado..
En la siguiente parte de esta serie, voy a repasar el nuevo componente de documentación que se incluye en la plantilla y cómo facilitará que compartir y demostrar su componente sea mucho más fácil. También le mostraré cómo configurar su componente para compartirlo a través del registro de Bower.
