command-line-interface - tutorial - bower wikipedia
¿Cuál es la manera “correcta” de referirse a las dependencias de javascript instaladas a través de bower en un archivo HTML de proyecto de yeoman? (2)
Las guías de inicio rápido y del administrador de paquetes de Yeoman sugieren usar Bower para administrar las dependencias.
Se instalan en
app/bower_components/[component_name]
La guía solo sugiere insertar un
<script src="app/bower_components/[component_name]/[relevant_file.js]"></script>
línea en su archivo html.
Esta bien. Excepto si ese componente tiene dependencias. Bower amablemente obtiene esos componentes, pero, por lo que puedo ver, no te da una lista de ellos y el orden en que deben insertarse en tu código. (Sé que obtienes una lista de lo que se instaló cuando realizas la instalación, y uno podría desenterrarlo de un archivo json en algún lugar, pero aún así es solo el nombre de Bower para el componente, no la ruta al archivo real que necesita ser referenciado). Lo que significa que, para un componente popular como jquery-maonsonry, tengo que insertar manualmente
<script src="bower_components/get-size/get-size.js"></script>
<script src="bower_components/doc-ready/doc-ready.js"></script>
<script src="bower_components/eventEmitter/EventEmitter.js"></script>
<script src="bower_components/eventie/eventies.js"></script>
<script src="bower_components/get-style-property/get-style-property.js"></script>
<script src="bower_components/jquery-bridget/jquery-bridget.js"></script>
<script src="bower_components/matches-selector/matches-selector.js"></script>
<script src="bower_components/outlayer/outlayer.js"></script>
<script src="bower_components/jquery-masonry/masonry.js"></script>
Todo lo cual tuve que buscar y encontrar el nombre del archivo js relevante. Dado que todos estos archivos ya están definidos en los archivos de dependencias de json, y Bower los conoce, existe una forma en que el código anterior se puede generar automáticamente. Ya sea para que lo ponga en mi html manualmente, o un enlace simbólico que apunta a la salida de un comando de observación. Soy consciente de que require.js puede gestionar esto en mi nombre, pero ¿hay alguna forma de solucionarlo?
Acabo de poner un código en npm que coloca sus dependencias en una matriz ordenada. https://www.npmjs.org/package/dependency-orderer
Si no está utilizando grunt bower-install, o no quiere usar etiquetas de script (si está empaquetando su javascript, lo que debería ser), espero que esto le sirva.
Con ganas de escuchar comentarios, ya que este es el primer módulo que he publicado.
Escribí una herramienta que ayuda con esto, grunt-bower-install . Es un complemento que funciona bien con el flujo de trabajo de Yeoman. Ejecute manualmente la instalación de grunt bower-install después de cualquier cambio en los componentes de su bower. (Después de instalar uno nuevo, quite uno, lo que sea).
Lo probé con jquery-masonry ...
$ bower install jquery-masonry --save
$ grunt bower-install
... y terminó con ...
<!-- bower:js -->
<script src="bower_components/outlayer/item.js"></script>
<script src="bower_components/get-size/get-size.js"></script>
<script src="bower_components/jquery-masonry/masonry.js"></script>
<!-- endbower -->
La razón por la que este complemento no puede ser más útil se debe a que el archivo bower.json cada paquete no especifica una propiedad main . Sin ese conocimiento, un script (como el mío) no puede detectar de manera confiable el archivo central del paquete real.
Estas herramientas son todas jóvenes. Dada la naturaleza gratuita de Bower, cualquiera puede registrar un paquete. El autor tiene la opción de no mencionar las dependencias, dejar de lado la propiedad main , elegir incluir archivos innecesarios y terminamos con un poco de caos. Bower ofrece el flujo de trabajo ideal para los usuarios finales si los autores de paquetes simplemente evitan estos patrones. Esperemos que retomarán estas prácticas más pronto que tarde.
Sin embargo, aparte de ese caos, esto sigue siendo mucho mejor de lo que era hace un par de años. De hecho, tuvo que desenterrar estos complementos, extraer su archivo .zip en una carpeta y, de todos modos, encontrar el archivo real que deseaba.
Así que, para abreviar, una herramienta como grunt-bower-install puede ayudar, pero al final, lo que hiciste originalmente es el enfoque más seguro.
Sólo una actualización.
El generator-webapp Yeoman ahora incluye esta tarea Grunt, grunt-bower-install , fuera de la caja. Por lo tanto, el resultado que describí anteriormente está fuera de fecha.
Los nuevos resultados al usar la instalación de grunt-bower-install con jquery-masonry
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/get-style-property/get-style-property.js"></script>
<script src="bower_components/get-size/get-size.js"></script>
<script src="bower_components/eventie/eventie.js"></script>
<script src="bower_components/doc-ready/doc-ready.js"></script>
<script src="bower_components/eventEmitter/EventEmitter.js"></script>
<script src="bower_components/jquery-bridget/jquery.bridget.js"></script>
<script src="bower_components/matches-selector/matches-selector.js"></script>
<script src="bower_components/outlayer/item.js"></script>
<script src="bower_components/outlayer/outlayer.js"></script>
<script src="bower_components/jquery-masonry/masonry.js"></script>
<!-- endbower -->