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?

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é.

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.

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.

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)