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 jquery
bibliothè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' require
utiliser 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.
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 à la fois css
et des js
fichiers 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 .css
fichiers. Mais il est préférable d'inclure le bootstrap.js
fichier comme celui-ci quelque part dans vos public/js/*.js
fichiers:
var bootstrap = require('bootstrap');
Et vous incluez ce code uniquement dans les javascript
fichiers 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_modules
dépendances, et le node_modules
dossier 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 css
fichiers, 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 css
fichier séparé . Vous pouvez en savoir plus à ce sujet dans la documentation de webpack.
En conclusion.
- Vous devez «regrouper» le code de votre application avec un regroupeur
- Vous ne devez pas valider
node_modules
ni les fichiers construits dynamiquement dans git. Vous pouvez ajouter un build
script à 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é.