web-dev-qa-db-fra.com

But de l'installation de Twitter Bootstrap via NPM?

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 les fichiers bootstrap vous-même que d'utiliser un CDN?

Question 2:

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

node.jstwitter-bootstrapexpressnpmcdn
223
James Fazio

  1. Le point d’utilisation de CDN est qu’il est plus rapide , tout d’abord parce qu’il s’agit d’un réseau distribué , mais aussi parce que les fichiers statiques sont mis en cache par les navigateurs et il y a de fortes chances que, par exemple, la bibliothèque jquery du CDN utilisée par votre site ait déjà été téléchargée par le navigateur de l'utilisateur et que, par conséquent, le fichier ait été mis en cache. téléchargement inutile est en cours. Cela étant dit, c’est toujours une bonne idée de prévoir un repli .

    Maintenant, le point du paquet npm de bootstrap

    est-ce qu'il fournit le fichier javascript ​​de bootstrap en tant que module. Comme cela a été mentionné ci-dessus, cela permet de require l’utiliser avec browserify , ce qui est le cas d’utilisation le plus probable et, si je comprends bien, la raison principale de bootstrap en cours de publication 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.html, vous pouvez référencer les fichiers css et js comme ceci:

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

Quel est le moyen le plus simple et correct pour les fichiers .css. Mais il est bien préférable d’inclure le fichier bootstrap.js de cette manière quelque part dans vos fichiers public/js/*.js:

var bootstrap = require('bootstrap');

Et vous n'incluez ce code que dans les fichiers javascript où vous avez réellement besoin de bootstrap.js. Browserify se charge d'inclure ce fichier pour vous.

L'inconvénient est que vous avez maintenant vos fichiers frontaux en tant que dépendances node_modules et que le dossier node_modules n'est généralement pas archivé avec git. Je pense que c’est la partie la plus controversée, avec beaucoup de 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.

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

Tout d'abord, cela vous permet d'utiliser la syntaxe commonjs exactement comme browserify, donc pour inclure le code bootstrap js dans votre projet, vous procédez de la même manière:

const bootstrap = require('bootstrap');

En ce qui concerne les fichiers css, Webpack a ce que l'on appelle " chargeurs ". Ils vous permettent d'écrire ceci dans votre code js:

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

et les fichiers CSS seront "comme par magie" inclus dans votre construction. Elles seront ajoutées dynamiquement sous forme de balises <style /> lors de l'exécution de votre application, mais vous pouvez configurer Webpack pour les exporter dans un fichier css distinct. Vous pouvez en savoir plus à ce sujet dans la documentation de Webpack.

En conclusion.

  1. Vous devriez "grouper" votre code d'application avec un bundle
  2. Vous ne devez pas valider ni node_modules, ni les fichiers construits dynamiquement dans git. Vous pouvez ajouter un script build à 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é.
137
timetowonder

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

Commencez par installer 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

Enfin, au format .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 identique à node_modules) en tant que proposé par timingowonder , ainsi les gens pourront 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 lorsque cela est nécessaire ... plus facile, je pense.

180
Augusto Goncalves

Réponse 1:

  • Le téléchargement de bootstrap à travers npm (ou bower) vous permet de gagner un peu de 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 le module Node, mais avec l'essort 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œud puissent être utilisés côté client.

Réponse 2:

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

72
mfrachet

  1. Utilisez npm/bower pour installer bootstrap si vous souhaitez le recompiler/modifier moins de fichiers/test. 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 des fichiers dans le projet.

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

3
7affer