web-dev-qa-db-fra.com

Comment connecter les composants de bower avec sails.js?

J'aimerais pouvoir installer les dépendances Javascript via bower et les utiliser dans une application sails.js , mais je ne peut pas trouver un moyen de le faire sans simplement copier un fichier de collage à partir du bower_components dossier dans le dossier Sails assets.

Idéalement, je pense que j'aimerais utiliser requirejs et pointer vers les composants bower dans le main.js fichier. J'essaie peut-être de pilonner une cheville carrée dans un trou rond, veuillez me le faire savoir si c'est le cas. Toute réflexion sur la gestion de components/libraries avec Voiles sont les bienvenus.

javascriptdependency-managementbowersails.js
42
Cole Reed

Dans Sails 0.10, le répertoire `` assets/linker '' n'existe plus, mais j'ai trouvé une piste sur une solution simple qui donne une certaine automatisation au bower -> workflow de l'éditeur de liens d'actifs tout en permettant un contrôle granulaire de ce qui finit par être lié.

La solution consiste à ajouter grunt-bower à votre tâche Sails.js compileAssets

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

Ensuite, configurez votre tâche grunt-bower comme ceci (comme 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');

};

Cela copiera automatiquement vos fichiers jower et css de bower au bon endroit pour l'éditeur de liens d'actif de Sail pour trouver et ajouter automatiquement au modèle de mise en page de votre projet. Tous les autres fichiers js ou css seront toujours automatiquement ajoutés après vos fichiers bower.

Cependant, ce n'est toujours pas une solution miracle, car cette configuration comporte 2 grandes mises en garde:

1 - Les fichiers ajoutés via bower-grunt doivent être répertoriés dans le tableau main de bower.json. Si vous voyez qu'un fichier n'est pas chargé, vous vous attendez à le faire, vous devez soit modifier ce fichier bower.json OR ajouter la dépendance manuellement via grunt-bower's packageSpecific options.

2 - L'ordre des fichiers Bower dans l'éditeur de liens d'actifs est actuellement alphabétique. Mon seul recours pour ajuster cet ordre jusqu'à présent est de bricoler une tâche supplémentaire pour réorganiser manuellement les fichiers avant le reste de la tâche compileAssets de Sail. Cependant celui-ci, je suis convaincu qu'il y a quelque chose que grunt-bower pourrait faire en prenant en charge la commande de copie de paquets .

42
user3429154

Remarque : la réponse suivante n'est plus complètement pertinente pour la version actuelle de SailsJS car il n'y a pas de support pour le dossier de l'éditeur de liens à partir de SailsJS 0.10.

Voir: Les voiles ne génèrent pas d'éditeur de liens

Réponse originale:

J'ai pu trouver une solution pour cela, qui est en fait assez simple. Je n'avais pas réalisé que vous pouviez configurer où bower place ses fichiers.

Créez un fichier .bowerrc et modifiez le répertoire dans lequel les composants de bower sont installés, dans le cas de Sailjs, ils doivent être placés dans le dossier des ressources.

/*
 * 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 utilisera alors grunt pour les copier dans le dossier .tmp/public/assets chaque fois qu'un fichier est modifié. Si vous ne souhaitez pas que les voiles suppriment et recopient continuellement ces fichiers, vous pouvez les exclure dans le fichier 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 conseil sur l'utilisation de requirejs avec des voiles. Par défaut, vous obtiendrez une erreur du fichier socket.io car les voiles le chargeront sans utiliser requirejs. Cela générera une erreur car socket.io prend en charge le chargement de style AMD, plus de détails ici http://requirejs.org/docs/errors.html#mismatch .

Le moyen le plus simple de résoudre ce problème consiste à simplement commenter les lignes près de la fin 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; });
 }

L'autre façon serait de recoder les fichiers voiles dans des actifs/js nommés "socket.io.js", "sails.io.js" et app.js pour être des modules AMD.

33
Cole Reed

Le moyen le plus simple que j'ai trouvé pour y parvenir est simplement d'ajouter les composants Bower individuels à votre tasks/pipeline.js fichier. Par exemple, voici comment ajouter 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 lien vers bower_components/modernizr/modernizr.js est ensuite inséré dans le <!--SCRIPTS--> espace réservé dans votre modèle de mise en page, et il est également réduit, etc., lorsque vous exécutez sails lift --prod.

11
Nick F

Désolé pour mon retard.

Je pense que l'inclusion de bower_components dans l'éditeur de liens est une mauvaise idée, car lorsque vous soulevez des voiles, tout ce qu'il contient sera copié en .tmp et inclus dans les balises. Par exemple, si vous avez inclus Angular avec bower, vous aurez deux inclusions dans votre script: une pour angular.js et une pour angular.min.js. Et avoir les deux est une erreur.

Voici ma solution sur mes projets:

  • J'ai créé un dossier bower_component dans mon répertoire racine.

  • J'ai ajouté cette ligne dans mon Gruntfile.js dans les fichiers du tableau en copie: dev

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

Et pour chaque fichier que je souhaite inclure, je dois ajouter manuellement une nouvelle ligne dans ce tableau. Je n'ai pas trouvé d'autre solution automatique. Si quelqu'un trouve une meilleure solution ...;)

3
user1853777

Il existe plusieurs approches pour connecter SailsJS et Bower.

Un package pour SailsJS qui intègre Bower via un générateur personnalisé existe ici: https://www.npmjs.com/package/sails-generate-bower

Il y en a un aussi pour Gulp.

1
István Döbrentei