Outil de développement Web front-end - outil de gestion des packages de dépendances Bower_compétences Javascript

Bower est un outil de gestion de packages lancé par Twitter. Basé sur l'idée modulaire de nodejs, les fonctions sont dispersées dans différents modules afin qu'il y ait une connexion entre les modules. Bower est utilisé pour gérer cette connexion entre les modules.

Les outils de gestion de colis ont généralement les fonctions suivantes :

a) Mécanisme d'enregistrement : chaque package doit déterminer un identifiant unique afin qu'il puisse être correctement associé lors de la recherche et du téléchargement, de sorte que l'outil de gestion des packages doit conserver les informations d'enregistrement et peut s'appuyer sur d'autres plates-formes.

b) Stockage du fichier : Déterminez l'emplacement où le fichier est stocké. Il peut être retrouvé lors du téléchargement. Bien entendu, cette adresse est accessible sur le réseau.

c) Téléchargement et téléchargement : il s'agit de la fonction principale de l'outil et peut améliorer la commodité d'utilisation du package. Par exemple, si vous souhaitez utiliser jquery, il vous suffit de l’installer. Vous n’avez pas besoin de chercher partout pour le télécharger. Le téléchargement n'est pas nécessaire et dépend de l'emplacement où le fichier est stocké, mais un certain mécanisme est nécessaire pour le garantir.

d) Analyse des dépendances : C'est également l'un des principaux problèmes résolus par les outils de gestion de packages. Puisqu'il existe des connexions entre les packages, les dépendances entre eux doivent être traitées lors du téléchargement. Lors du téléchargement d'un package, vous devez également télécharger les packages dépendants.

Puisque bower est développé sur la base de nodejs, vous devez d'abord disposer d'un environnement nodejs. Quant à installer nodejs de cette manière, il existe de nombreux tutoriels sur Internet. D'ailleurs, vous devez également installer git pour utiliser bower. , je n'entrerai donc pas dans les détails ici.

Avantages apportés par bower

Si vous avez un projet qui doit utiliser JQuery, dans des circonstances normales, nous devons nous rendre sur le site officiel de jQuery pour télécharger la bibliothèque. Dans ce cas, chaque fois que jquery est mis à jour, nous devons nous rendre sur le site officiel de jQuery. pour le télécharger, ce qui serait très gênant, ne serait-il pas très pratique s'il existait un outil capable de saisir une commande pour nous permettre de choisir la version à télécharger, et si nous voulions mettre à jour toutes les bibliothèques de notre projet. Dans la dernière version, il suffit de saisir une commande. Un autre avantage de bower est que si vous installez bootstrap, il téléchargera automatiquement jquery, car bootstrap dépend de jquery. En termes simples, tant que la bibliothèque que nous téléchargeons dépend d'une autre bibliothèque. , Bower téléchargera automatiquement la bibliothèque dépendante pour nous. Bower est si puissant.

Installation de tonnelle

　npm install -g bower signifie installer dans l'environnement global

Utiliser Bower

　1. Téléchargez la bibliothèque via bower

Installation Bower (nom du package tel que : jquery) [#version telle que : #1.7] La ​​version est facultative, si elle n'est pas écrite, la dernière version sera téléchargée par défaut

Par exemple : bower install bootstrap#2.2

2. Si vous devez mettre à jour toutes les bibliothèques, nous pouvons saisir la commande suivante

Mise à jour Bower

Si vous avez besoin de générer toutes les informations sur un package que vous avez téléchargé, par exemple, si vous êtes dans une équipe et que vous souhaitez que les autres sachent quelles bibliothèques vous avez utilisées et quelles sont leurs versions, alors nous pouvons le faire avec le commande suivante.
Nous devons d’abord initialiser une description de package. Cela créera un répertoire de bower.json dans le répertoire de votre environnement d'exécution actuel

　`bower init -y`

Alors passe

　`bower install jquery --save`

Il ajoutera des informations sur la version de jquery au fichier bower.json. Si vous souhaitez en ajouter plusieurs, vous pouvez transmettre l'espace bower install jquery bootstrap less --save
.

Ce qui suit est le contenu du fichier bower.json

{
"name": "down",
"authors": [
"xxxxxxxx"
],
"description": "",
"main": "",
"moduleType": [],
"license": "MIT",
"homepage": "",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"bootstrap": "^3.3.6",
"less": "^2.6.1",
"jquery": "^2.2.2"
}
}

Bien sûr, si vous êtes nouveau sur nodejs, vous pourriez être un peu confus, car il ne s'agit pas d'un tutoriel de base sur nodejs. Si vous voulez comprendre et apprendre node, vous devez apprendre sur Internet.

En plus de ces avantages, bower possède également des fonctions plus puissantes, que vous devez découvrir, je ne les présenterai pas ici. Après tout, je viens de commencer à apprendre node
.

----------------------------------------------- --- -------Ligne de démarcation-------------------------------------- ----

La relation entre bower et npm

Pour installer bower, vous devez l'installer via npm

La différence entre bower et npm :

1. Dans la version précédente de npm, il ne pouvait pas partager le code dépendant, c'est-à-dire que dans la version précédente de npm, si vous téléchargiez un bootstrap, car le bootstrap dépend de jquery, il inclura également jquery. mais si une autre de vos bibliothèques utilise également jquery, elle téléchargera également un jquery. Dans ce cas, le code sera répété.

Leur structure est comme ceci :

bootstrapjQuery
　　xxxxxxxxxjRequête

Ils sont dupliqués, c'est vrai, mais il semble que ce problème ait été résolu dans la dernière version de npm.

　2.npm téléchargera l'environnement de développement ensemble, et bower téléchargera uniquement le module frontal compilé.

　3. NPM est principalement utilisé pour la gestion des packages de dépendances internes des projets Node.js. Les modules installés se trouvent dans le dossier node_modules dans le répertoire racine du projet. Dans la plupart des cas, Bower est utilisé pour le développement front-end. Il gère les dépendances sur CSS/JS/templates et autres contenus, et la structure du répertoire de téléchargement dépendant peut être personnalisée. --Le contenu de ce paragraphe a été trouvé en ligne.

La soi-disant structure de répertoires personnalisée signifie que si vous ouvrez bower dans ce répertoire de fichiers, il téléchargera le package dont vous avez besoin sous ce fichier, et npm ne prend pas en charge cela.

Résumé : On peut simplement comprendre que npm est utilisé pour gérer les modules nodejs, c'est-à-dire les packages, et bower est utilisé pour gérer nos bibliothèques front-end.

À propos de l'outil de développement web front-end - outil de gestion des packages de dépendances bower, l'éditeur vous le présentera ici, j'espère qu'il vous sera utile !