javascript - ¿Cómo conecto componentes de bower con sails.js?

dependency-management

Question

Me gustaría poder instalar dependencias de Javascript a través de bower y usarlas en la aplicación sails.js , pero no puedo encontrar una manera de hacerlo sin copiar los archivos bower_components carpeta bower_components a los activos de Sails. carpeta.

Idealmente, creo que me gustaría utilizar requirejs y señalar los componentes de main.js en el archivo main.js Puede que esté tratando de clavar una clavija cuadrada en un agujero redondo, por favor, avíseme si es así. Cualquier idea sobre la gestión de components/libraries con velas es bienvenida.

Answer 1

En Sails 0.10 el directorio ''assets / linker'' ya no existe, sin embargo, encontré una ventaja en una solución simple que proporciona cierta automatización al bower -> asset Linker Workflow y también permite un control detallado sobre qué es exactamente lo que termina vinculado.

La solución está agregando grunt-bower bower a su tarea Sails.js compileAssets

grunt.registerTask(''compileAssets'', [
''clean:dev'',
''bower:dev'',
''jst:dev'',
''less:dev'',
''copy:dev'',
''coffee:dev''
]);

A continuación, configure su tarea grunt-bower como tal (como tasks / config / bower.js ):

module.exports = function(grunt) {
grunt.config.set(''bower'', {
dev: {
dest: ''.tmp/public'',
js_dest: ''.tmp/public/js'',
css_dest: ''.tmp/public/styles''
}
});
grunt.loadNpmTasks(''grunt-bower'');
};

Esto copiará automáticamente los archivos bower js y css en el lugar adecuado para que el enlazador de activos de Sail encuentre y agregue automáticamente a la plantilla de diseño de su proyecto. Cualquier otro archivo js o css se agregará automáticamente después de los archivos de su bower.

Sin embargo, esto todavía no es una bala de plata ya que esta configuración tiene dos grandes salvedades:

1 - Los archivos que se agregan a través de bower-grunt deben estar listados en la matriz principal de bower.json. Si ve que un archivo no se está cargando, lo debe esperar, debe editar ese archivo bower.json o agregar la dependencia manualmente a través de las opciones específicas del paquete de grunt- bower .

2 - El orden de los archivos de bower en el vinculador de activos actualmente es alfabético. Mi único recurso para ajustar este orden hasta el momento es retocar una tarea adicional para reordenar manualmente los archivos antes del resto de la tarea compileAssets de Sail. Sin embargo, estoy seguro de que hay algo que Gunt-Bower podría hacer apoyando el pedido de copias de paquetes .

Answer 2

Hay más de un enfoque para conectar SailsJS y Bower.

Un paquete para SailsJS que integra Bower a través de un generador personalizado existe aquí: https://www.npmjs.com/package/sails-generate-bower

También hay uno para Gulp.

Answer 3

La manera más simple que he encontrado de lograr esto es simplemente agregar los componentes individuales de Bower a su archivo tasks/pipeline.js . Por ejemplo, así es cómo puede agregar Modernizr:

// Client-side javascript files to inject in order
// (uses Grunt-style wildcard/glob/splat expressions)
var jsFilesToInject = [
// Load sails.io before everything else
''js/dependencies/sails.io.js'',
// Dependencies like jQuery, or Angular are brought in here
''js/dependencies/**/*.js'',
// =========================================================
// Modernizr:
''bower_components/modernizr/modernizr.js'',
// =========================================================
// All of the rest of your client-side js files
// will be injected here in no particular order.
''js/**/*.js''
];

Un enlace a bower_components/modernizr/modernizr.js luego se inserta en el marcador de posición <!--SCRIPTS--> en su plantilla de diseño, y también se minimiza, etc., cuando ejecuta sails lift --prod .

Answer 4

Perdón por mi retraso.

Creo que incluir bower_components en el linker es una mala idea, porque cuando levantes las velas, todo lo que se copie será en .tmp e incluirá en las etiquetas. Por ejemplo, si ha incluido Angular con bower, tendrá dos inclusiones en su script: una para angular.js y otra para angular.min.js. Y tener ambos es un error.

Aquí está mi solución en mis proyectos:

• He creado una carpeta bower_component en mi directorio raíz.

• He agregado esta línea en mi Gruntfile.js en los archivos de la matriz en copy: dev

  {''.tmp / public / linker / js / angular.js'': ''./bower_components/angular/angular.js''}

Y para cada archivo que quiero incluir, necesito agregar manualmente una nueva línea en esta matriz. No he encontrado otra solución automática. Si alguien encuentra una mejor solución ...;)

Answer 5

Nota : la siguiente respuesta ya no es completamente relevante para la versión actual de SailsJS porque no hay soporte para la carpeta del enlazador a partir de SailsJS 0.10.

Ver: Velas que no generan vinculador

Respuesta original:

Pude encontrar una solución para esto, que en realidad es bastante simple. No me había dado cuenta de que podrías configurar dónde coloca los archivos en bower.

Cree un archivo .bowerrc y cambie el directorio donde están instalados los componentes de bower; en el caso de Sailjs, debe colocarlos en la carpeta de activos.

/*
* Create a file called .bowerrc and put the following in it.
* This file should be in the root directory of the sails app.
*/
{
"directory": "assets/linker/bower_components"
}

Sails usará ronco para copiarlos en la carpeta .tmp / public / assets cada vez que se cambie un archivo. Si no desea que las velas eliminen y vuelvan a copiar continuamente esos archivos, puede excluirlos en el archivo grunt.

/*
* This is not necessary, but if you have a lot of components and don''t want
* them constantly being deleted and copied at every file change you can update
* your Gruntfile.js with the below.
*/
clean: {
dev: [''.tmp/public/**'',
''!.tmp/public'',
''!.tmp/public/bower_components/**''],
build: [''www'']
},

Un consejo sobre el uso de requirejs con velas. De forma predeterminada, recibirá un error del archivo socket.io, ya que sails lo cargará sin usar requirejs. Esto arrojará un error ya que socket.io soporta la carga de estilo amd, más detalles aquí http://requirejs.org/docs/errors.html#mismatch .

La forma más sencilla de solucionar esto es simplemente comentar las líneas cerca del final de socket.io.js.

/*
* Comment the below out in the file assets/js/socket.io.js, if using requirejs
* and you don''t want to modify the default sails setup or socket.io.
*/
if (typeof define === "function" && define.amd) {
define([], function () { return io; });
}

La otra forma sería recodificar los archivos de velas en assets / js llamados "socket.io.js", "sails.io.js" y app.js para que sean módulos amd.