Crear un package en Bower

  • Por
Cómo crear y compartir un package en Bower, de modo que se pueda instalar y mantener con el gestor de dependencias.

Como ya sabrás, Bower es un gestor de paquetes orientado para la web, con el que gestionar las dependencias de un proyecto, en el área frontend. Si no lo estás usando ya y quieres saber algo más puedes leer el artículo sobre Bower. Nosotros aquí vamos a ir un paso más allá, enseñando a crear paquetes de manera que se puedan distribuir usando Bower.

Pasar a ser productores de Packages en Bower puede ser útil por muchos motivos. Para empezar por compartir y colaborar de manera ordenada con la comunidad al liberar tu código, y así facilitar que otras personas usen tus librerías, plugins, componentes, etc. Pero también por tu propio beneficio, permitiendo apoyrte en esta fantástica herramienta para gestionar tus propios paquetes.

Básicamente, para publicar tu package en Bower necesitas:

  1. Tener un manifiesto o declaración en el bower.json
  2. Tener subido el paquete a un repositorio Git
  3. Especificar detalladamente las versiones del proyecto
  4. Registrar tu paquete para que Bower lo reconozca

Te explicaremos con detalle cada uno de estos pasos, indicando cómo gestionar las herramientas necesarias: Git, GitHub o el propio Bower.

Crear el bower.json

A través del archivo bower.json especificamos las dependencias de un proyecto, como se explicó en el artículo sobre cómo usar Bower. Pero también podemos indicar los datos necesarios para que Bower lo reconozca como un repositorio con un package instalable por otras personas.

El archivo bower.json lo creamos con el comando:

bower init

Eso inicia un procedimiento mediante el cual debemos indicar varias informaciones. Realmente lo único necesario sería el nombre del paquete y la versión, pero podemos indicar muchas otras cosas.

Más abajo tienes un código de archivo bower.json que te puede servir de ejemplo. Es básicamente lo que generas con el comando "bower init", al que le he agregado la versión, unas keywords y poco más. Es interesante ver como hay algunas carpetas y archivos adicionales dentro del array ignore, con los que indico a Bower que, cuando instale este package como dependencia, ignore algunos elementos, que no serán instalados en la carpeta bower_components de todo el mundo que lo use. Esto es útil porque muchas veces en tu repositorio tienes archivos que no necesitan distribuirse para todas las personas.

{
  "name": "dw-flagsprites",
  "version": "0.0.3",
  "authors": [
    "Miguel Angel Alvarez <miguel@desarrolloweb.com>"
  ],
  "description": "Custom Element realizado con Polymer. The falgs come from a unique PNG image that we use with CSS sprites",
  "main": "dw-flagsprites.html",
  "moduleType": [],
  "keywords": [
    "country",
    "flags",
    "sprites",
    "css",
    "web-components",
    "polymer"
  ],
  "license": "MIT",
  "homepage": "http://www.desarrolloweb.com",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests",
    ".gitignore",
    "css-sprites-im-using",
    "css"
  ],
  "dependencies": {
    "polymer": "~1.2.1"
  }
}

Además, como habrás visto, también declaro las dependencias de mi propio package, asi que cuando Bower lo instale, instalará también todas las dependencias que yo necesito. En este caso se trata de Polymer, la librería de Google para hacer Web Components.

Subir el paquete a un repositorio Git

Esta parte en realidad es sencilla, pero requiere que sepas algunas cosas sobre Git. Te recomendamos leer nuestro Manual de Git, que introduce en los pasos necesarios para que puedas entender las diferentes acciones a realizar para tener tu paquete en un repositorio Git.

Para publicar tu package de Bower y disponibilizarlo para que otras personas lo puedan instalar, además de tenerlo en un repositorio Git, deberás tenerlo en un hosting remoto de repositorios públicos, como GitHub. Así que nuestra tarea en este caso será crear el repositorio en local y luego subirlo a GitHub.

Este procedimiento sería suficiente para tratarlo por separado, pero básicamente tendrás qe realizar los siguientes pasos:

1.- Inicializa el repositorio en local en tu carpeta del proyecto que quieres subir a Bower

git init

2.- Añade archivos del proyecto al "staging area"

git add .

3.- Haz el commit de los archivos para que estén en local

git commit -am "commit de mi proyecto"

Nota: El comando anterior está preparado para que aquellos cambios en archivos ya gestionados por Git se suban directamente al sistema de control de versiones sin que tengas que hacer el correspondiente add. Pero no te añade los archivos nuevos que hayas podido crear al "staging area". Es como hacer un add y un commit, en un solo paso, pero solo afectando a los archivos que ya existían en el proyecto.

4.- Crea un repositorio en GitHub, que sea público. Para ello tendrás que acceder a GitHub con tu cuenta de usuario (te registras si no la tienes) y con el botón "+" crear un nuevo repositorio.

En el formulario donde apareces le asignas un nombre al repositorio, que debe ser el mismo nombre que asignaste en el bower.json (propiedad name del JSON).

5.- Enviar los archivos de tu repositorio local a GitHub

En la siguiente página, una vez creado el repositorio, donde te muestra GitHub varias informaciones de tu nuevo repo, tienes que reparar en una donde te indica cómo subir este repositorio que has creado en local a GitHub.

Son dos comandos de consola para ejecutar dos órdenes Git:

Insistimos que estos comandos deben ser los que te toque a ti personalmente, según el nombre de tu usuario y el del repo que hayas generado. Copio y pego comandos de ejemplo, solo para muestra, no para que los uses tú tal cual:

git remote add origin https://github.com/midesweb/dw-flagsprites.git
git push -u origin master

Detallar las versiones del proyecto

Ahora tienes que hacer una operativa que no resulta tan habitual con Git. Hay diversas maneras de conseguirla, nosotros te comentamos la más tradicional, por línea de comandos.

Se trata de especificar las versiones de tu proyecto, pues sin versiones Bower no te va a dejar publicarlo.

Para comunicar a Git las versiones de tu proyecto utilizas "tags" y existe un comando para crearlas.

git tag v0.0.1 -m "Primera version"

Una vez tienes tus versiones definidas como tags, entonces debes trasladarlas a GitHub, para lo que hay que escribir el comando push indicando las tags que quieres enviar, o bien con la opción --tag enviarlas todas.

git push origin master --tag

Para más información de tags en Git te recomiendo que leas el artículo Especificar versiones en Git con tag publicado en DesarrolloWeb.com.

Registrar tu package en Bower

Nos queda solamente la última acción, muy elemental, para decirle a Bower que hemos creado un paquete y que queremos que lo conozca para que se pueda usar como dependencia en otros proyectos.

Para ello usamos el comando "register" de Bower, indicando el nombre del paquete y la ruta del repositorio donde se encuentra.

bower register mi-paquete git://github.com/usuario/mi-paquete.git

A partir de entonces ya podrás instalar ese paquete vía Bower:

bower install mi-paquete --save

Con esto comienza una nueva etapa en tu software Open Source. Ahora es más fácil de instalar, facilitando que otras personas lo puedan usar también gracias a la gestión de dependencias con Bower. Bienvenido package!

Mandar a Bower una nueva versión del package

Vamos a suponer que actualizas el package y quieres que otras personas tengan los nuevos cambios disponibles para descarga durante la instalación, así como que puedan actualizar las versiones del paquete has publicado en Bower.

Si subes los cambios a GitHub únicamente advertirás que no se actualiza la versión que se distribuye a través de Bower. Para ello necesitas hacer un paso adicional que es crear un nuevo tag de versión.

Esta acción la haces como si estuvieras creando una etiqueta (tag) nueva, con el comando que vimos antes "git tag". Luego tendrás que subir el tag en el "push" con la opción "-tags". Ambos comandos ya los hemos indicado anteriormente en este post. Será algo como esto:

git tag v0.0.2 -m "Segunda versión"
git push origin master --tag

Eliminar un paquete de bower del registro

La acción de borrado del registro, unregister en inglés, permite decirle a Bower que deje de conocer un paquete previamente registrado. Generalmente no es una tarea que necesitarás realizar, puesto que lo ideal es que los paquetes estén siempre disponibles para el público, pero es posible.

El único detalle es que, para que Bower te permita borrar el registro del package, necesitarás ser administrador del repositorio de GitHub asociado al paquete que quieres desregistrar. Esa autenticación la haces con "bower login":

bower login

Entonces te pedirá los datos de tu cuenta de GitHub, usuario y clave. Y posteriormente realizas el comando que permite eliminar el registro del paquete.

bower unregister nombre-paquete

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir