Pourquoi installer Twitter Bootstrap via npm?


233

Question 1:

Quel est exactement le but de l'installation de Twitter Bootstrap via npm? Je pensais que npm était destiné aux modules côté serveur. Est-il plus rapide de servir vous-même les fichiers d'amorçage que d'utiliser un CDN?

Question 2:

Si je devais installer npm Bootstrap, comment pointerais-je vers les fichiers bootstrap.js et bootstrap.css?


9
Le cas d'utilisation principal auquel je peux penser est d'utiliser Browserify pour votre développement JS frontal.
cvrebert

1
@cvrebert: merci d'avoir fourni la réponse tl; dr :)
Ivan Durst

Réponses:


143
  1. L'intérêt d'utiliser CDN est qu'il est plus rapide , tout d'abord, car il s'agit d'un réseau distribué , mais d'autre part, parce que les fichiers statiques sont mis en cache par les navigateurs et les chances sont élevées que, par exemple, la jquerybibliothèque du CDN que votre site les utilisations avaient déjà été téléchargées par le navigateur de l'utilisateur, et donc le fichier avait été mis en cache, et donc aucun téléchargement inutile n'a lieu. Cela étant dit, c'est toujours une bonne idée de prévoir une solution de rechange .

    Maintenant, le point du paquet npm de bootstrap

    est qu'il fournit le fichier javascript de bootstrap en tant que module . Comme cela a été mentionné ci-dessus, cela lui permet d' requireutiliser browserify , qui est le cas d'utilisation le plus probable et, si je comprends bien, la principale raison de la publication de bootstrap sur npm.

  2. Comment l'utiliser

    Imaginez la structure de projet suivante:

    projet
    | - node_modules
    | - public
    | | - css
    | | - img
    | | - js
    | | - index.html
    | - package.json
    
    

Dans votre, index.htmlvous pouvez référencer à la fois csset des jsfichiers comme celui-ci:

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

Quelle est la manière la plus simple et correcte pour les .cssfichiers. Mais il est préférable d'inclure le bootstrap.jsfichier comme celui-ci quelque part dans vos public/js/*.jsfichiers:

var bootstrap = require('bootstrap');

Et vous incluez ce code uniquement dans les javascriptfichiers dont vous avez réellement besoin bootstrap.js. Browserify prend soin d'inclure ce fichier pour vous.

Maintenant, l'inconvénient est que vous avez maintenant vos fichiers frontaux en tant que node_modulesdépendances, et le node_modulesdossier n'est généralement pas archivé avec git. Je pense que c'est la partie la plus controversée, avec de nombreuses opinions et solutions .


MISE À JOUR mars 2017

Près de deux ans se sont écoulés depuis que j'ai écrit cette réponse et une mise à jour est en place.

Maintenant, la méthode généralement acceptée consiste à utiliser un bundle comme webpack (ou un autre bundle de votre choix) pour regrouper tous vos actifs dans une étape de construction.

Tout d'abord, il vous permet d'utiliser la syntaxe commonjs tout comme browserify, donc pour inclure du code bootstrap js dans votre projet, vous faites de même:

const bootstrap = require('bootstrap');

Quant aux cssfichiers, webpack a ce qu'on appelle des " chargeurs ". Ils vous permettent d'écrire ceci dans votre code js:

require('bootstrap/dist/css/bootstrap.css');

et les fichiers css seront "magiquement" inclus dans votre build. Ils seront ajoutés dynamiquement en tant que <style />balises lors de l'exécution de votre application, mais vous pouvez configurer le webpack pour les exporter en tant que cssfichier séparé . Vous pouvez en savoir plus à ce sujet dans la documentation de webpack.

En conclusion.

  1. Vous devez «regrouper» le code de votre application avec un regroupeur
  2. Vous ne devez pas valider node_modulesni les fichiers construits dynamiquement dans git. Vous pouvez ajouter un buildscript à npm qui devrait être utilisé pour déployer des fichiers sur le serveur. Quoi qu'il en soit, cela peut être fait de différentes manières en fonction de votre processus de construction préféré.

1
Je viens de le faire mais continue à obtenir localhost: 3000 / bootstrap 404 (Not Found), des réflexions à ce sujet?
emerak

Je dirais que "les chances sont élevées que, par exemple, la bibliothèque jquery du CDN que votre site utilise ait déjà été téléchargée par le navigateur de l'utilisateur" est une exagération

Je dois dire que la réponse du webpack est correcte. Mais pour répondre à la question OP: il n'y a pas de moyen intéressant de tester si un script / feuille de style est chargé. HTTP / 2 peut résoudre ces problèmes avec le multiplexage. Mais pour la plupart, vous pouvez utiliser le webpack et l' deferattribut sur vos scripts ou fichiers de chargement paresseux
Tamb

187

Si vous NPM ces modules, vous pouvez les servir en utilisant une redirection statique.

Installez d'abord les packages:

npm install jquery
npm install bootstrap

Puis sur le server.js:

var express = require('express');
var app = express();

// prepare server
app.use('/api', api); // redirect API calls
app.use('/', express.static(__dirname + '/www')); // redirect root
app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // redirect bootstrap JS
app.use('/js', express.static(__dirname + '/node_modules/jquery/dist')); // redirect JS jQuery
app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // redirect CSS bootstrap

Puis, enfin, au .html:

<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

Je ne servirais pas les pages directement à partir du dossier où se trouve votre fichier server.js (qui est généralement le même que node_modules) comme proposé par TimeWonder , de cette façon, les gens peuvent accéder à votre fichier server.js.

Bien sûr, vous pouvez simplement télécharger et copier-coller sur votre dossier, mais avec NPM, vous pouvez simplement mettre à jour en cas de besoin ... plus facile, je pense.


2
Pour ceux qui travaillent avec un projet de nœud express généré par Web Storm, vous devez ajouter le code dans votre app.js
kemicofa ghost

Je n'ai jamais proposé de conserver les fichiers frontaux statiques avec les fichiers du serveur.
heure du

Faites-vous ces appels à l'application pendant le chargement du fichier js ou à l'intérieur du gestionnaire prêt?
pupeno

@Pablo, je l'utilise au tout début, tout comme dans l'extrait de code.
Augusto Goncalves

1
Comment le même /jsitinéraire peut-il rediriger vers deux répertoires distincts? Comment gérerait-il les fichiers en conflit dans chacun?
Jacob Ford

72

Réponse 1:

  • Le téléchargement de bootstrap via npm (ou bower) vous permet de gagner du temps de latence. Au lieu d'obtenir une ressource distante, vous en obtenez une locale, c'est plus rapide, sauf si vous utilisez un cdn (cochez la réponse ci-dessous)

  • "npm" devait à l'origine obtenir Node Module, mais avec l'essor du langage Javascript (et l'avènement de browserify), il a un peu grandi. En fait, vous pouvez même télécharger AngularJS sur npm, ce n'est pas un framework côté serveur. Browserify vous permet d'utiliser AMD / RequireJS / CommonJS côté client afin que les modules de nœuds puissent être utilisés côté client.

Réponse 2:

Si vous npm installez bootstrap (si vous n'utilisez pas un fichier grunt ou gulp particulier pour déplacer vers un dossier dist), votre bootstrap sera situé dans "./node_modules/bootstrap/bootstrap.min.css" si je ne me trompe pas.


5
vous pouvez utiliser une commande copy et l'appeler via une exécution npm , une tâche grunt ou une tâche gulp . Ce faisant, je n'ai pas besoin de contrôler à la source le répertoire "node_modules" (il suffit d'appeler "npm install" lors de la construction / du déploiement), et je peux référencer "styles / bootstrap.min.css" au lieu de "./node_modules/bootstrap /bootstrap.min.css ".
Bless Yahu

S'il y a un inconvénient à copier les fichiers, c'est naturellement que vous aurez deux copies de ces dépendances dans votre référentiel. La méthode de redirection statique mentionnée par @augusto semble plus efficace.
estaples

3
  1. Utilisez npm / bower pour installer bootstrap si vous souhaitez le recompiler / modifier moins de fichiers / tester. Avec grunt, il serait plus facile de le faire, comme indiqué sur http://getbootstrap.com/getting-started/#grunt . Si vous souhaitez uniquement ajouter des bibliothèques précompilées, n'hésitez pas à inclure manuellement les fichiers au projet.

  2. Non, vous devez le faire vous-même ou utiliser un outil de grognement séparé. Par exemple, «grunt-contrib-concat» Comment concaténer et réduire plusieurs fichiers CSS et JavaScript avec Grunt.js (0.3.x)

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.