Comment inclut-on Bootstrap in Node Project
J'ai un projet de pile MEAN qui a été échafaudé à l'aide de la commande de base npm. Pour le moment, le Bootstrap est inclus en utilisant CDN:
link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css')
Ma question est de savoir comment puis-je ajouter bootstrap en utilisant npm pour que le projet fonctionne de la même manière qu'avec l'inclusion CDN. En particulier, lorsque j'exécute
npm install bootstrap
un répertoire boostrap est créé dans node_modules. Cependant, si j'essaie d'inclure le bootstrap.css de ce répertoire, il casse les polices glyphicon. Quelqu'un pourrait-il nous conseiller sur la façon de procéder?
P.S. Je poserais également la même question concernant l'AngularJS lui-même.
Vous pouvez utiliser le gestionnaire de packages du navigateur, c'est-à-dire bower
Bower offre une solution générique et non exprimée au problème de la gestion des packages frontaux, tout en exposant le modèle de dépendance des packages via une API qui peut être consommée par une pile de build plus avisée. Il n'y a pas de dépendances à l'échelle du système, aucune dépendance n'est partagée entre différentes applications et l'arborescence des dépendances est plate.
Si vous voulez plus de connaissances sur ce qui est meilleur et fiable, vous lisez également link .
La principale différence entre npm et Bower est l'approche pour l'installation des dépendances de package. npm installe les dépendances pour chaque package séparément, et crée donc une grande arborescence de dépendances de packages (node_modules/grunt/node_modules/glob/node_modules/...), où il pourrait y avoir plusieurs versions du même paquet. Pour le JavaScript côté client, cela est inacceptable: vous ne pouvez pas ajouter deux versions différentes pour jQuery ou toute autre bibliothèque à une page. Avec Bower, chaque paquet est installé une fois (jQuery sera toujours dans le bower_components/jquery, quel que soit le nombre de packages qui en dépendent) et en cas de conflit de dépendance, Bower n'installera tout simplement pas le package incompatible avec celui déjà installé.
Installation de Bower
Vous installez simplement les packages
Syntaxe
npm install -g bower
Vous pouvez consulter le Doc pour des informations complètes.
Par exemple:
Structure du répertoire
project Folder
+ bower_components
+ bootstrap
+ dist
+ css
+ bootstrap.css
+ jquery
+ jquery.js
+ public
+ index.html
+ app.js
Vous pouvez maintenant définir le chemin statique dans app.js
app.use(express.static(path.join(__dirname, 'bower_components')));
Maintenant, vous pouvez utiliser simplement dans votre fichier index.html
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<link rel='stylesheet' href='/bootstrap/dist/css/bootstrap.css' />
</head>
<body>
{{{ yield }}}
</body>
<script src="/bootstrap/dist/jquery/jquery.js"></script>
</html>
Captures d'écran
Structure du répertoire avec le fichier app.js
Fichier Html normal