ruby-on-rails - single - install bower js

¿Cómo gestionar las dependencias de Javascript con Bower en aplicaciones Rails?

Question

Las dependencias de Javascript están creciendo en mi aplicación Rails y está dando lugar a algunos problemas. Por un lado, con tantos resulta difícil rastrear y actualizar versiones de diferentes bibliotecas de Javascript. Al principio intenté convertirlas en gemas , pero luego tengo que manejarlas. Algunas ya son gemas (como backbone-rails) pero me gustaría tener un administrador de paquetes consistente.

Así que estoy buscando en Bower , "un gestor de paquetes para la web". Algunas publicaciones de blog de kaeff y de af83 han sido útiles, pero todavía tengo problemas. Espero que esta pregunta pueda llevar a una variedad de respuestas que las personas puedan usar para encontrar la mejor solución para sus proyectos.

Particularmente me gustaría ver consejos para administrar activos a través de Bower en un despliegue de Heroku.

Answer 1

Acabo de escribir una guía para hacer Rails + Bower + Heroku. Espero que ayude.

Answer 2

En el caso de que alguien más piense que usar Bower en su proyecto de rieles es una buena idea, piénselo nuevamente.

Los paquetes Bower simplemente no están hechos para integrarse con rieles o ruedas dentadas.

Lo que esto significa:

• por lo general, no especificarán un archivo index.js para incluir sus javascript a través de ruedas dentadas que requieren directivas.
• Tendrá que analizar y hurgar en el paquete Bower y resolver exactamente lo que necesita y de dónde (sus rutas requeridas son un poco largas)
• los paquetes de bower no especifican de manera uniforme una llave principal, e incluso si lo hacen, las ruedas dentadas / soporte de bower actuales parecen ignorarlos
• activos adicionales como fuentes, imágenes y plantillas no se incluirán en su compilación de activos de producción (Rails 4 solo incluye app / asset / xxx)
• El uso de config.assets.precompile patrones para intentar y "sortear" el problema es de grano grueso y recogerá muchos cruceros en sus directorios de componentes de la glorieta
• Los paquetes Bower no utilizarán los ayudantes de la ruta de la URL de la rueda dentada, por lo que cualquier referencia a las imágenes y fuentes dentro de CSS / SCCS no tendrá la ruta de los activos correcta. Buena suerte con eso.
• Tendrá que resolver todos los problemas en CADA proyecto en el que utiliza paquetes de Bower
• bundle install ya no funciona para las dependencias de sus proyectos y también tiene que usar otro administrador de paquetes

En contraste, las gemas de activos son fáciles de crear y proporcionan una abstracción uniforme para atraer activos a su proyecto. Usted tiene la oportunidad de modificar los archivos originales y usar ayudantes de activos para que las cosas funcionen bien con sus proyectos de rieles. Hay un blog decente sobre la creación de gemas de activos, así como un railscast general sobre la creación de gemas también.

OMI Sería mejor para la comunidad de ferrocarriles mantener actualizadas las gemas de activos que cualquier proyecto que tenga que lidiar con los problemas de un paquete Bower que nunca fue diseñado para conectarse al flujo de activos de los ferrocarriles.

Answer 3

He estado trabajando en este problema durante los últimos días y me he conformado con el siguiente proceso.

Usa la gema de bower-rails . Proporciona una serie de agradables tareas de rake que ayudan a integrar el uso de Bower con una aplicación de rieles y el flujo de activos. Prefiero seguir con la configuración de bower.json en lugar de la DSL basada en ruby ​​que proporciona Bower-Rails. Me atengo a la ubicación predeterminada de bower que almacena los activos en vendor / asset / bower_components. Asegúrese de agregar lo siguiente a su application.rb.

config.assets.paths <<  Rails.root.join("vendor","assets","bower_components")

Una vez que haya agregado paquetes a su bower.json, ejecute lo siguiente:

rake bower:install

para instalar sus paquetes javascript. Luego hace referencia al javacript en sus archivos application.js y application.css.

Como se observó en @andrew-hacking arriba, los rieles y la glorieta no funcionan bien con los paquetes de javascript que tienen css e imágenes, específicamente css que hace referencia a las imágenes. Bower-Rails ayuda a solucionar este problema con la tarea de rake proporcionada:

rake bower:resolve 

Resuelve las rutas relativas de los activos en los componentes mediante la reescritura de las referencias de URL en los archivos css de los componentes con el método de ayuda de Rails para hacer referencia al activo en una forma amigable de canalización de activos. Vea BowerRails::Performer#resolve_asset_paths para más detalles.

Mi preferencia es registrar todos los componentes_bower en nuestro repositorio, por lo que ejecutamos bower: install seguido por bower: resolver. A continuación, debe agregar las imágenes a las que se hace referencia en el paquete a su lista config.assets.precompile para sus entornos de producción y de ensayo. Por ejemplo, aquí está la configuración para agregar el componente javascript de select2 a su proyecto de rieles utilizando la glorieta y los rieles.

bower.json

{
    "name": "Acme",
    "private": true,
    "dependencies": {
        "select2": "3.5.1"
    }
}

app / asset / javascripts / application.js.coffee:

#= require select2/select2

app / asset / stylesheets / application.css.sass

//= require select2/select2

config / environment / staging.rb y config / tomatoes / production.rb:

config.assets.precompile += ["select2/*.png",
                            "select2/*.gif"]

No es perfecto, pero le brinda la administración de dependencias de sus componentes de javascript, y es mejor tratar de descubrir qué gemas necesita extraer para habilitar el componente de javascript deseado para la canalización de activos.

Answer 4

Proyecto Checkout Rails Assets . Ejemplo de uso:

source ''http://rubygems.org''
source ''https://rails-assets.org''

# gem ''rails-assets-BOWER_PACKAGE_NAME''
gem ''rails-assets-jquery'', ''~> 1.10.2''
gem ''rails-assets-sly'', ''~> 1.1.0''
gem ''rails-assets-raphael'', ''~> 2.1.0''

UPD (26.01.2016)
El proyecto Future of Rails-Assets está en discusión. Compruebe el hilo y tome su propia decisión: utilícelo o busque una solución alternativa.

Answer 5

Una forma es usar una versión de Sprockets que permite que su application.js requiera paquetes definidos por Bower. Esta función se agregó en Sprockets 2.6, que Rails 3.x no le permitirá agrupar debido a una restricción de versión . Para obtener esa característica, puede agrupar gem "sprockets", "2.2.2.backport1" .

Eso hará que Sprockets comience a buscar activos en vendor/assets/components también. La ruta es proveedor / componentes porque los paquetes Bower también pueden contener elementos de imagen o CSS, no solo Javascript. La forma en que Sprockets sabe qué Javascript debe incluir cuando necesite el paquete es leyendo el archivo bower.json de la propiedad main , que indica qué archivos debe incluir la canalización. Una consecuencia aquí es que muchos paquetes Bower no suministran esta propiedad o suministran fuentes principales que suponen que RequireJS está disponible (por ejemplo, d3 ). Puede ver qué fuente principal está definida con la bower list --map .

Cuando el main no le conviene, simplemente puede usar Bower para administrar un solo archivo JS remoto en lugar de un paquete. Josh Peek tiene una esencia que demuestra esto . La última versión de Bower espera bower.json lugar de component.json así que he actualizado los pasos:

$ npm install -g bower
$ mkdir -p vendor/assets
$ cd vendor/assets/
$ curl https://raw.github.com/gist/3667224/component.json > bower.json
$ bower install

Ese bower.json particular carga jQuery. Luego, en su application.js puede simplemente //= require jquery y Sprockets lo encontrará en su vendor/assets/components . Para agregar nuevas dependencias, simplemente bower.json en su bower.json y ejecute de nuevo la bower install bower.json , por ejemplo:

{
  "dependencies": {
    "jquery": "http://code.jquery.com/jquery-1.8.1.js",
    "d3": "http://cdnjs.cloudflare.com/ajax/libs/d3/3.0.8/d3.js"
  }
}

Si desea administrar sus recursos de lib y de vendor en un archivo de configuración, puede usar bower-rails , pero no tiene mucho sentido usar lib . Esa gema también proporciona algunas tareas de Rake, pero no hacen nada más que los comandos básicos de Bower.

Que yo sepa, todavía no hay manera de que Bower se instale según sea necesario durante la compilación de activos. Por lo tanto, si está utilizando un entorno de implementación como Heroku, deberá confirmar su directorio de vendor/assets/components y actualizarlo a través del comando bower .

Estaría bien si pudieras requerir tu conjunto completo de dependencias de Bower con una directiva en application.js . Un gist de kaeff ilustra cómo crear una directiva require_bower_dependencies . No hay gema que haga esto por ti todavía. Hasta entonces, debe declarar cada dependencia tanto en bower.json como en application.js .