web-dev-qa-db-fra.com

Êtes-vous censé créer un lien vers bower_components en production?

Je suis relativement nouveau dans l'utilisation de Bower et je ne peux pas dire si vous êtes censé créer un lien vers bower_components en production. Dois-je utiliser une tâche difficile pour lier ou copier les fichiers dont j'ai besoin à partir de bower_components dans un répertoire séparé?

Je pose cette question parce que je n'ai jamais vu un site Web qui possède un répertoire appelé "bower_components", donc j'ai un peu peur. Tous les guides pour débutants sont simplement liés à 'bower_components/...', comme le tutoriel angular.

gruntjsbower
44
Kevin Evans

utilisez-vous Yeoman?

En fonction de votre Gruntfile.js, vous devriez avoir différentes tâches, l'une d'entre elles est 'bower-install': cette tâche --- read you index.html, trouvera le bloc de commentaires suivant

<!-- bower:js -->
<!-- endbower -->

et inject à l'intérieur de toutes vos dépendances spécifiées dans votre bower.json. Cela signifie que la tâche écrira pour tous vos blocs <script src "/ bower_components/..">.

Vous n'avez jamais remarqué un site Web avec des références "bower_components" car votre répertoire/app est votre environnement de "développement", votre projet source. À partir de la source, vous allez créer l'application de production exécutant la tâche "build": cette tâche est composée de différentes sous-tâches qui font différents travaux, l'un d'eux est concaténation tous les scripts ajoutés par la tâche bower_install dans un seul js fichier.

Ensuite, il y a une autre tâche qui réduira ce fichier, une autre qui exécutera des tests, une autre qui créera un répertoire "dist" où réside votre site de production et ainsi de suite ...

Si vous utilisez Yeoman, toutes ces tâches sont déjà configurées dans Gruntfile.js, ouvrez-le et essayez de comprendre ce que fait chaque tâche.

À première vue, il peut être assez difficile à comprendre, par exemple, la tâche de génération fait référence à 14 ou 15 sous-tâches, je vous suggère d'enregistrer des tâches personnalisées qui n'exécutent qu'une seule tâche et de voir ce qui se passe.

À votre santé

25
Sergio Rinaudo

Vous pouvez donner un meilleur nom à votre répertoire d'installation de bower en créant un .bowerrc fichier (à côté de votre bower.json file) et en définissant la propriété directory sur autre chose. Par exemple, j'ai les éléments suivants dans mon .bowerrc:

{
  "directory": "public/vendor"
}

Ensuite, il y a aussi la question étroitement liée de savoir si vous devez ou non archiver le contenu de ce répertoire pour contrôler les sources. Pour une discussion beaucoup plus approfondie de cette question, voir ici .

Et enfin, comme d'autres l'ont déjà mentionné, il est recommandé de concaténer et de minimiser vos dépendances frontales.

12
Sergey K

Je ne vois aucun problème avec un lien direct vers celui-ci, mais généralement, vous voudrez concaténer tous vos scripts en un seul fichier et l'uglifier afin que la taille du fichier soit réduite pour la production.

Le grognement tâche uglify peut gérer ces deux choses pour vous assez facilement. Il vous suffit de fournir un tableau de fichiers à joindre.

// Project configuration.
grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/input2.js']
      }
    }
  }
});
5
dezman

Il est assez courant de commencer en utilisant simplement bower_components. Vous pouvez le voir dans les références de script du projet de démarrage à base angulaire . Une fois que vous arrivez à déployer une application de production et que le temps de chargement et les performances deviennent critiques, vous devez envisager de passer à une solution pour fusionner et réduire les dépendances.

3
Scott Willeke