Share
A medida que la plataforma web ha madurado, las herramientas para gestionar nuestros proyectos también han madurado. En este tutorial, le presentaré una de estas herramientas que facilita mucho más la administración de las dependencias de su proyecto: Bower.
La primera vez que miré a Bower, no estaba exactamente segura de cómo encajaba: no era solo un administrador de paquetes de JavaScript, como Jam, y no era un cargador de módulos, como RequireJS. Se llama a sí mismo un gestor de paquetes del navegador, pero ¿qué significa esto exactamente? ¿En qué se diferencia eso de un gestor de paquetes JavaScript? La principal diferencia es que Bower no solo maneja las bibliotecas de JavaScript: administrará cualquier paquete, incluso si eso significa HTML, CSS o imágenes. En este caso, un paquete significa cualquier código de terceros encapsulado, generalmente accesible públicamente desde un repositorio Git.
Bower es sólo un gestor de paquetes.
Lo importante a tener en cuenta aquí es que Bower es sólo Un gestor de paquetes, y nada más. No ofrece la capacidad de concatenar o minimizar el código, no es compatible con un sistema de módulos como AMD: su único propósito es administrar paquetes.
Basta de chat: vamos a ver cómo funciona esto!
Por supuesto, antes de que podamos usar Bower, tendremos que instalarlo. Esto es fácil: use NPM:
npm install -g bower
Asegúrese de instalarlo globalmente (con -sol), porque esto es específico del proyecto.
Si no sabe el nombre del paquete que desea, puede encontrar paquetes utilizando el Bower Search mando. Si lo usa sin un término de búsqueda, obtendrá una lista de todos los paquetes de Bower disponibles. Para filtrarlos, usa un término de búsqueda.
búsqueda de Bower búsqueda de Bower backbone búsqueda de Bower bootstrap
Si prefiere buscar a través de una GUI, diríjase a http://sindresorhus.com/bower-components/.
Una vez que haya encontrado el paquete que desea instalar, simplemente use instalación de la glorieta para instalarlo.
instalación de bower jquery instalación de bower backbone
Para instalar una versión específica de un paquete, incluya el número de versión después de él, con un hash entre:
Bower instalar jquery # 1.7.0
Mira eso componentes Carpeta que Bower acaba de crear para nosotros. Dentro de ella, deberías ver tres carpetas: columna vertebral, jquery, y guion bajo. El guión bajo fue instalado porque es una dependencia de Backbone; eso es práctico Luego, si compara el contenido de estas carpetas con sus URL de repositorio (de la búsqueda o el resultado de la instalación), verá que son exactamente iguales. Esto ilustra bien el hecho de que Bower es, en su nivel más básico, un atajo para Git..
Pero puedes pasar el instalación de la glorieta Manda otras cosas también. En función de lo que acabamos de ver, tiene sentido que pueda utilizar una URL de Git:
bower install git: //github.com/pivotal/jasmine.git
También puede utilizar un enlace a un solo archivo:
instalación de Bower http://backbonejs.org/backbone-min.js
Incluso puede instalar un paquete desde su propia computadora: algo en lo que está trabajando, quizás:
Bower Install ~ / code / secretProject
Es posible que se note en la salida de la instalación de la glorieta comando que menciona el almacenamiento en caché del paquete: lo hace guardando una copia del mismo en ~ / .bower /. Bower puede usar este repositorio para acelerar las instalaciones posteriores del mismo paquete..
Si sale la próxima versión de una biblioteca y desea actualizarla, puede hacerlo fácilmente ejecutando esto:
actualización de Bower
Tenga en cuenta que no puede pasar un nombre de paquete a actualizar ordena y solo actualiza ese paquete individual: aun así los actualizará a todos. Puede obtener la última versión de un solo paquete ejecutando instalación de la glorieta ; simplemente sobrescribirá la versión que tienes actualmente.
Si alguna vez cambian sus necesidades, puede desinstalar fácilmente un paquete con el desinstalar mando:
bower desinstalar jquery
Por lo tanto, tenemos nuestros paquetes instalados. Ahora, queremos usarlos. Recuerde, Bower es solo un administrador de paquetes, por lo que no hay una forma específica de Bower para usar estos paquetes. Por ahora, solo nos quedaremos con las etiquetas de script antiguas:
Abre esto en un navegador y verás el texto "JQUERY!"; esa es la señal de que está funcionando!
Como mencioné anteriormente, Bower no tiene un sistema para cargar paquetes en tu página, pero eso no significa que no debas usar uno. Bower no tiene opiniones y le permite a usted elegir el método con el que se sienta más cómodo. Tal vez son múltiples etiquetas de script que concatenan y minimizan en el momento de la compilación. Tal vez sea RequireJS (que podemos obtener, a través de Bower). Tal vez sea Sprockets u otro sistema de empaquetado de activos del lado del servidor. Es completamente de usted.
Hay algunos otros comandos de Bower que deberías saber. primero, lista de glorietas o bower ls listará los paquetes que tienes instalados actualmente.
Tenga en cuenta que esto no significa que tengamos jQuery instalado dos veces; significa que jQuery es una dependencia de 'sayHi' (un paquete que construiremos más adelante).
Si desea ver a qué URL del repositorio se refiere un paquete determinado, use la búsqueda de Bower comando, usando el nombre del paquete como el argumento:
los información de la glorieta El comando le dirá qué versiones de un paquete están disponibles:
Finalmente, para eliminar todos los paquetes guardados en caché. ~ / .bower, correr bower cache-clean:
Accentsconagua
componente.json Expedientelos componente.json El archivo es una parte importante de los paquetes Bower. Veremos cómo crear un paquete a continuación; Pero primero, veamos cómo podemos usar un componente.json archivo para hacer que la instalación de paquetes para un proyecto (no paquete) sea un poco más simple.
Solo hay cuatro propiedades que Bower usa en el componente.json expediente. Primero está el nombre del proyecto; Suficientemente simple.
"nombre": "MyProject"
El siguiente es un número de versión:
"name": "MyProject", "version": "0.0.1"
los principal la propiedad es para definir las partes de su componente, pero como todavía no estamos creando un componente, volveremos a él. La propiedad final es dependencias, que describe de qué paquetes depende nuestro componente (o, en este caso, nuestro proyecto). Es un objeto y para cada propiedad, la clave es el nombre del paquete y el valor es la versión.
"name": "MyProject", "version": "0.0.1", "dependencies": "backbone": "latest", "requirejs": "2.1.1"
Ahora si creas una carpeta de proyecto y pones lo anterior en tu componente.json archivo, podemos instalar todos los componentes simplemente ejecutando:
instalación de la glorieta
Y ahora todos nuestros paquetes están instalados. Si luego deseamos instalar otros paquetes e incluirlos en nuestro componente.json, podemos usar el --salvar bandera.
Bower instalar jquery --save
Ahora puedes abrir nuestro componente.json archivo y ver que una entrada para jQuery se añadió a nuestra dependencias objeto.
Terminemos este tutorial construyendo nuestro propio paquete súper simple e instalándolo a través de Bower. Será un paquete bastante sin sentido, pero cubrirá casi todos los pasos del proceso de creación de un paquete..
Vamos a construir un paquete super-simple.
Crear un directorio de proyecto, llamado Di hola. Dentro de ella, comenzaremos con nuestra componente.json expediente. Estás familiarizado con todas las propiedades, excepto principal.
"name": "SayHi", "version": "1.0.0", "main": "./sayhi.js", "dependencies": "jquery": "latest"
los principal la propiedad debe ser la ruta al archivo principal que compone su paquete; Si tiene varios archivos, puede establecerlo en una serie de rutas. Para ser honesto, no estoy exactamente seguro de lo que hace esto. Solo se le permite tener un archivo de cada tipo (por lo tanto, uno .html archivo, o uno .js archivo) en su principal array, y Bower seguirá descargando todo el repositorio, y no solo los archivos principales cuando lo instales. No puedo encontrar ninguna documentación que indique claramente para qué sirve, pero puedo encontrar a otros que se preguntan lo mismo. Tal vez será utilizado en futuras versiones de Bower. Si tiene alguna información al respecto, deje un comentario a continuación.!
De todos modos, ahora es el momento de crear el repositorio Git.
git init git agregar component.json git commit -m 'added component.json'
Como ha visto, cuando instalamos las dependencias de nuestro paquete mientras estamos aquí en desarrollo, obtendremos una componentes Carpeta en nuestro repositorio. He visto varios repositorios de componentes diferentes, y ninguno de ellos tiene esto componentes carpeta registrada, así que vamos a agregarla a la .gitignore expediente; las dependencias se instalarán automáticamente cuando un usuario instale nuestro paquete. Al desarrollar para Node.js, hacemos lo mismo con el nodo_módulos carpeta y el paquete.json expediente.
Entonces, en un .gitignore expediente:
componentes
Y entonces:
git add .gitignore git commit -m 'agregado .gitignore file' bower install
Ahora, podemos escribir nuestro sayhi.js código:
función sayHi (selector) var el = $ (selector); función de retorno (nombre) el.text ("Hola" + nombre + "!"); Es bastante simple; acabamos de pasar el Di hola funciona como un selector para un elemento, y devuelve una función que puede tomar un nombre y escribir el mensaje en ese elemento. Lo he hecho de esta manera porque nos permite "almacenar en caché" el elemento y porque hace que el código sea un poco más interesante..
Bien, ahora tenemos que comprometernos:
git add sayhi.js git commit -m 'agregado sayhi.js'
El último paso es agregar una etiqueta Git con el número de versión, porque así es como Bower distingue la versión:
git tag -a 1.0.0 -m 'sayHi v1.0.0'
El siguiente paso sería enviar este repositorio a GitHub y luego registrar el paquete con Bower. El registro es simple: use el registro de la glorieta comando, pasándole el nombre que desea que tenga su paquete y la URL de git para el repositorio:
bower register packageName git: //your/git/url.git
No voy a hacer esto, porque es un paquete inútil. Pero recuerde que también podemos usar Bower para instalar un paquete local. Lo que haré para simular GitHub lo más cerca posible es crear un clon simple de este repositorio (GitHub almacena repositorios vacíos).
git clone - ruta anterior / a / sayHi ruta / to / sayHi.git
Cree una nueva carpeta de proyecto fuera de su Di hola carpeta, discos compactos en, y prueba esto:
ruta de instalación de Bower / to / sayHi.git
El resultado debe indicar que se instaló bien y que jQuery también se instaló. Se puede ver que este fue el caso mirando dentro de la componentes carpeta.
Ahora, podemos usar el código en una index.html expediente:
Abrelo. Funciona!
Configure Bower creando una
.Bowerrcexpediente.
No hay mucho que puedas hacer para configurar Bower, pero hay algunas cosas. Configure Bower creando una .Bowerrc archivo dentro de su directorio personal. Es un archivo JSON con una combinación de estas tres propiedades:
directorio: el nombre del directorio de componentes; por defecto componentes.json: el nombre del archivo de componentes; por defecto componentes.json.punto final: Esto le permite ejecutar su propio servidor Bower, para servir paquetes personalizados desde detrás de un firewall. Puede obtener una implementación simple de un servidor Bower en Github.Por ejemplo:
"directorio": "paquetes", "json": "bibliotecas.json"
Si ha mirado a otros gestores de paquetes, puede que se pregunte qué es lo atractivo de Bower, especialmente cuando parece carecer de muchas características que otros tienen. Yo también tenía la misma pregunta. Pero después de entender cómo usar Bower, esta línea de las preguntas frecuentes tenía mucho más sentido:
Bower es un componente de nivel inferior que Jam, Volo o Ender. Estos gestores podrían consumir Bower como una dependencia..
Por lo tanto, incluso si no usa Bower por sí mismo, es bueno conocer los comandos, ya que se construirán otras herramientas a su alrededor. De hecho, el nuevo y popular Yeoman usa Bower para la administración de paquetes. Si aún no está familiarizado con Yeoman, ese es su próximo paso después de leer este artículo.!
Así que ese es Bower, el gestor de paquetes del navegador completamente sin opiniones. ¿Qué pensáis? ¿Es esta una biblioteca que utilizará o no le importaría menos? Vamos a escucharlo en los comentarios..
