Guide du débutant sur npm, le Node Package Manager –
Node.js permet d'écrire des applications en JavaScript sur le serveur. Il est construit sur le moteur d’exécution JavaScript V8 et écrit en C ++ – donc c'est rapide. À l'origine, il était conçu comme un environnement de serveur pour les applications, mais les développeurs ont commencé à l'utiliser pour créer des outils pour les aider dans l'automatisation des tâches locales. Depuis lors, un tout nouvel écosystème d'outils basés sur les nœuds (tels que Grunt Gulp et webpack ) a évolué pour transformer le visage du développement frontal
Pour utiliser ces outils (ou packages) dans Node.js, nous devons être en mesure de les installer et de les gérer de manière utile. C'est là que npm, le gestionnaire de packages Node, entre en jeu. Il installe les packages que vous souhaitez utiliser et fournit une interface utile pour travailler avec eux.
Dans ce guide, nous allons examiner les bases de l'utilisation de npm. Nous allons vous montrer comment installer des packages en mode local et global, ainsi que supprimer, mettre à jour et installer une certaine version d'un package. Nous vous montrerons également comment travailler avec package.json pour gérer les dépendances d'un projet. Si vous êtes plutôt un passionné de vidéo, pourquoi ne pas vous inscrire à SitePoint Premium et regarder notre screencast gratuit: Qu'est-ce que npm et comment puis-je l'utiliser?
Mais avant de commencer à utiliser npm, nous devons d'abord installer Node.js sur notre système. Faisons-le maintenant.
Installation de Node.js
Rendez-vous sur la page de téléchargement de Node.js et récupérez la version dont vous avez besoin. Des programmes d'installation Windows et Mac sont disponibles, ainsi que des binaires Linux précompilés et du code source. Pour Linux, vous pouvez également installer Node via le gestionnaire de packages, comme indiqué ici .
Voyons où le nœud a été installé et vérifions la version:
$ quel nœud
/ usr / bin / node
$ node --version
v12.15.0
Pour vérifier que votre installation a réussi, essayons le REPL de Node:
$ node
> console.log ('Le nœud est en cours d'exécution');
Le nœud est en cours d'exécution
> .help
.break Parfois, vous êtes coincé, cela vous fait sortir
.clear Alias pour .break
.editor Entrer en mode éditeur
.exit Quitter la repl
.help Imprimer ce message d'aide
.load Charger JS à partir d'un fichier dans la session REPL
.save Enregistrer toutes les commandes évaluées dans cette session REPL dans un fichier
Appuyez sur ^ C pour abandonner l'expression actuelle, ^ D pour quitter la repl
L'installation de Node.js a fonctionné, nous pouvons donc maintenant concentrer notre attention sur npm, qui était inclus dans l'installation:
$ which npm
/ usr / bin / npm
$ npm --version
6.13.7
Mise à jour de npm
npm, qui correspondait à l'origine à Node Package Manager, est un projet distinct de Node.js. Il a tendance à être mis à jour plus fréquemment. Vous pouvez vérifier la dernière version npm disponible sur cette page . Si vous vous rendez compte que vous disposez d'une ancienne version, vous pouvez mettre à jour comme suit.
Pour les utilisateurs Linux et Mac, utilisez la commande suivante:
npm install -g npm @ latest
Pour les utilisateurs de Windows, le processus pourrait être légèrement plus compliqué. Voici ce qu'il dit sur la page d'accueil du projet :
De nombreuses améliorations pour les utilisateurs de Windows ont été apportées dans npm 3 – vous aurez une meilleure expérience si vous exécutez une version récente de npm. Pour effectuer la mise à niveau, utilisez l'outil de mise à niveau de Microsoft téléchargez une nouvelle version de Node ou suivez les instructions de mise à niveau de Windows dans la publication Installation / mise à niveau de npm . [19659021] Pour la plupart des utilisateurs, l'outil de mise à niveau sera le meilleur choix. Pour l'utiliser, vous devez ouvrir PowerShell en tant qu'administrateur et exécuter la commande suivante:
Cela vous permettra d'exécuter des scripts sur votre système. Ensuite, vous devrez installer l'outil npm-windows-upgrade . Après avoir installé l'outil, vous devez l'exécuter pour qu'il puisse mettre à jour npm pour vous. Faites tout cela dans la console PowerShell élevée:
npm peut installer des packages en mode local ou global. En mode local, il installe le package dans un dossier node_modules dans votre répertoire de travail parent. Cet emplacement appartient à l'utilisateur actuel.
Si vous n'utilisez pas un gestionnaire de versions (ce que vous devriez probablement être), les packages globaux sont installés dans {prefix} / lib / node_modules / qui appartient à root (où {préfixe} est généralement / usr / ou / usr / local ). Cela signifie que vous devrez utiliser sudo pour installer les packages de manière globale, ce qui pourrait entraîner des erreurs d'autorisation lors de la résolution des dépendances tierces, tout en étant un problème de sécurité.
Changeons cela!
Il est temps de gérer ces packages
Modification de l'emplacement des packages globaux
Voyons ce que la sortie npm config nous donne:
$ npm config list
; cli configs
metrics-registry = "https://registry.npmjs.org/"
scope = ""
user-agent = "npm / 6.13.7 node / v12.15.0 linux x64"
; emplacement du noeud bin = / usr / bin / nodejs
; cwd = / home / sitepoint
; HOME = / home / sitepoint
; "npm config ls -l" pour afficher toutes les valeurs par défaut.
Cela nous donne des informations sur notre installation. Pour l'instant, il est important d'obtenir l'emplacement global actuel:
$ npm config get prefix
/ usr
C'est le préfixe que nous voulons changer, afin d'installer des packages globaux dans notre répertoire personnel. Pour ce faire, créez un nouveau répertoire dans votre dossier personnel:
$ cd ~ && mkdir .node_modules_global
$ npm config set prefix = $ HOME / .node_modules_global
Avec ce simple changement de configuration, nous avons modifié l'emplacement où les packages Node globaux sont installés. Cela crée également un fichier .npmrc dans notre répertoire personnel:
$ npm config get prefix
/home/sitepoint/.node_modules_global
$ cat .npmrc
prefix = / home / sitepoint / .node_modules_global
npm est toujours installé dans un emplacement appartenant à root. Mais comme nous avons changé l'emplacement de notre package global, nous pouvons en profiter. Nous devons réinstaller npm, mais cette fois dans le nouvel emplacement appartenant à l'utilisateur. Cela installera également la dernière version de npm:
npm install npm @ latest -g
Enfin, nous devons ajouter .node_modules_global / bin à notre variable d'environnement $ PATH afin de pouvoir exécuter des packages globaux à partir de la ligne de commande. Pour ce faire, ajoutez la ligne suivante à votre .profile .bash_profile ou .bashrc et redémarrez votre terminal:
Pour le moment, nous n'avons qu'un seul package installé à l'échelle mondiale – le npm emballer lui-même. Modifions cela et installons UglifyJS (un outil de minification JavaScript). Nous utilisons le drapeau - global mais cela peut être abrégé en -g :
$ npm install uglify-js --global
/home/sitepoint/.node_modules_global/bin/uglifyjs -> /home/sitepoint/.node_modules_global/lib/node_modules/uglify-js/bin/uglifyjs
+ uglify-js@3.7.7
a ajouté 3 packages de 38 contributeurs en 0.259s
Comme vous pouvez le voir sur la sortie, des packages supplémentaires sont installés. Ce sont les dépendances d'UglifyJS.
Liste des packages globaux
Nous pouvons répertorier les packages globaux que nous avons installés avec la commande npm list :
C'est mieux; maintenant, nous ne voyons que les packages que nous avons installés ainsi que leurs numéros de version.
Tous les packages installés globalement seront disponibles à partir de la ligne de commande. Par exemple, voici comment utiliser le package Uglify pour réduire example.js en example.min.js :
$ uglifyjs example.js -o example.min.js
Installation de packages en mode local
Lorsque vous installez des packages localement, vous le faites normalement à l'aide d'un fichier package.json . Allons-y et créons-en un:
$ mkdir project && cd project
$ npm init
nom du package: (projet)
version: (1.0.0)
description: Démo de package.json
point d'entrée: (index.js)
commande de test:
référentiel git:
mots clés:
auteur:
licence: (ISC)
Appuyez sur Retournez pour accepter les valeurs par défaut, puis appuyez à nouveau pour confirmer vos choix. Cela créera un fichier package.json à la racine du projet:
Astuce: Si vous voulez un moyen plus rapide de générer un fichier package.json utilisez npm init --y .
Les champs sont, espérons-le, assez explicite, à l'exception des scripts principaux et . Le champ principal est le point d'entrée principal de votre programme et le champ scripts vous permet de spécifier des commandes de script qui sont exécutées à différents moments du cycle de vie de votre package. Nous pouvons les laisser tels quels pour l'instant, mais si vous souhaitez en savoir plus, consultez la documentation package.json sur npm et cet article sur utilisant npm comme outil de construction [19459005
$ npm install underscore
L'avis npm a créé un fichier de verrouillage en tant que package-lock.json. Vous devez valider ce fichier.
npm WARN project@1.0.0 Pas de champ de référentiel.
+ underscore@1.9.2
a ajouté 1 package à partir de 1 contributeur et a audité 1 package en 0.412s
trouvé 0 vulnérabilités
Notez qu'un fichier de verrouillage est créé. Nous y reviendrons plus tard.
Maintenant, si nous regardons dans package.json nous verrons qu'un champ de dépendances a été ajouté :
Comme vous pouvez le voir, Underscore v1.9.2 a été installé dans notre projet. Le signe d'insertion ( ^ ) à l'avant du numéro de version indique que lors de l'installation, npm récupère la version la plus élevée du package, il peut trouver où seule la version principale doit correspondre (sauf si package-lock.json est présent). Dans notre cas, ce serait inférieur à la v2.0.0. Cette méthode de gestion des versions des dépendances (major.minor.patch) est connue sous le nom de versioning sémantique . Vous pouvez en savoir plus à ce sujet ici: Versionnement sémantique: pourquoi vous devriez l'utiliser .
Notez également que Underscore a été enregistré en tant que propriété du champ dépendances . Ceci est devenu la valeur par défaut dans la dernière version de npm et est utilisé pour les packages (comme Underscore) requis pour l'exécution de l'application. Il serait également possible d'enregistrer un package en tant que devDependency en spécifiant un indicateur - save-dev . devDependencies sont des packages utilisés à des fins de développement, par exemple pour exécuter des tests ou transpiler du code.
Astuce: vous pouvez également ajouter private: true à package .json pour empêcher la publication accidentelle de référentiels privés, ainsi que la suppression des avertissements générés lors de l'exécution de npm install .
De loin la principale raison de l'utilisation du package . json pour spécifier les dépendances d'un projet est la portabilité. Par exemple, lorsque vous clonez le code de quelqu'un d'autre, il vous suffit d'exécuter npm i dans la racine du projet et npm résoudra et récupérera tous les packages nécessaires pour que vous puissiez exécuter l'application. Nous verrons cela plus en détail plus tard.
Avant de terminer cette section, vérifions rapidement que Underscore fonctionne. Créez un fichier appelé test.js à la racine du projet et ajoutez ce qui suit:
const _ = require ("underscore");
console.log (_. range (5));
Exécutez le fichier à l'aide de node test.js et vous devriez voir [0, 1, 2, 3, 4] sortir à l'écran.
Désinstallation des packages locaux
npm est un gestionnaire de packages, il doit donc pouvoir supprimer un paquet. Supposons que le package Underscore actuel nous cause des problèmes de compatibilité. Nous pouvons supprimer le package et installer une version plus ancienne, comme ceci:
$ npm uninstall underscore
supprimé 1 paquet en 0,386s
Liste $ npm
project@1.0.0 / home / sitepoint / project
└── (vide)
Installation d'une version spécifique d'un package
Nous pouvons maintenant installer le package Underscore dans la version souhaitée. Nous faisons cela en utilisant le signe @ pour ajouter un numéro de version:
$ npm install underscore@1.9.1
+ underscore@1.9.1
ajouté 1 paquet en 1.574s
Liste $ npm
project@1.0.0 / home / sitepoint / project
└── underscore@1.9.1
Mise à jour d'un package
Vérifions s'il existe une mise à jour pour le package Underscore:
$ npm obsolète
Forfait actuel recherché Dernier emplacement
souligner 1.9.1 1.9.2 1.9.2 projet
La colonne Actuelle nous montre la version installée localement. La colonne Latest nous indique la dernière version du package. Et la colonne Wanted nous indique la dernière version du package que nous pouvons mettre à niveau sans casser notre code existant.
Vous vous souvenez du fichier package-lock.json antérieur? Introduit dans npm v5, le but de ce fichier est de garantir que les dépendances restent exactement identiques sur toutes les machines sur lesquelles le projet est installé. Il est généré automatiquement pour toutes les opérations où npm modifie le dossier node_modules ou le fichier package.json .
Vous pouvez continuer et essayer si vous le souhaitez. Supprimez le dossier node_modules puis réexécutez npm i (c'est l'abréviation de npm install ). npm va réinstaller Underscore v1.9.1, même si nous venons de voir que la v1.9.2 est disponible. En effet, nous avons spécifié la version 1.9.1 dans le fichier package-lock.json :
Avant l'émergence du fichier package-lock.json les versions de package incohérentes étaient un gros casse-tête pour les développeurs. Cela a été normalement résolu en utilisant un fichier npm-shrinkwrap.json qui devait être créé manuellement.
Supposons maintenant que la dernière version d'Underscore corrige le bogue que nous avions précédemment et que nous voulons mettre à jour notre package pour cette version:
$ npm underscore update
+ underscore@1.9.2
mise à jour 1 package en 0,236s
Liste $ npm
project@1.0.0 / home / sitepoint / project
└── underscore@1.9.2
Astuce: pour que cela fonctionne, Underscore doit être répertorié comme une dépendance dans package.json . Nous pouvons également exécuter npm update si nous avons de nombreux modules obsolètes que nous voulons mettre à jour.
Recherche de packages
Nous avons utilisé la commande mkdir plusieurs fois dans ce tutoriel. Existe-t-il un package Node qui possède cette fonctionnalité? Utilisons recherche npm :
Notez que la liste des dépendances a été mise à jour automatiquement. Si vous souhaitez installer un package sans l'enregistrer dans package.json utilisez simplement l'argument - no-save .
Supposons que vous avez cloné le code source de votre projet sur une autre machine et nous voulons installer les dépendances. Supprimons d'abord le dossier node_modules puis exécutons npm install :
$ rm -R node_modules
$ npm list --depth = 0
project@1.0.0 / home / sitepoint / project
├── DÉPENDANCE NON RÉPONDUE mkdirp@1.0.3
├─┬ DÉPENDANCE NON RÉPONDUE request@2.88.0
...
└── DEPENDANCE UNMET underscore@1.9.2
npm ERR! manquant: mkdirp@1.0.3, requis par project@1.0.0
npm ERR! manquant: request@2.88.0, requis par project@1.0.0
npm ERR! manquant: underscore@1.9.2, requis par project@1.0.0
...
$ npm install
ajouté 50 packages de 60 contributeurs et audité 65 packages en 1.051s
trouvé 0 vulnérabilités
Si vous regardez votre dossier node_modules vous verrez qu'il est recréé à nouveau. De cette façon, vous pouvez facilement partager votre code avec d'autres sans gonfler votre projet et les référentiels sources avec des dépendances.
Gestion du cache
Lorsque npm installe un package, il conserve une copie, donc la prochaine fois que vous voudrez l'installer paquet, il n'a pas besoin de frapper le réseau. Les copies sont mises en cache dans le répertoire .npm de votre chemin d’accueil:
Ce répertoire sera encombré d'anciens packages au fil du temps, il est donc utile de le nettoyer de temps en temps:
$ npm cache clean --force
Vous pouvez également purger tous les dossiers node_module de votre espace de travail si vous avez plusieurs projets de nœuds sur votre système que vous souhaitez nettoyer:
find. -name "node_modules" -type d -exec rm -rf '{}' +
Audit
Avez-vous remarqué que toutes ont trouvé 0 vulnérabilités dispersées dans la sortie CLI? La raison en est qu'une nouvelle fonctionnalité a été introduite dans npm qui permet aux développeurs de rechercher les vulnérabilités de sécurité connues dans les dépendances.
Essayons cette fonctionnalité en installant une ancienne version de express :
$ npm install express@4.8.0
express@4.8.0
ajout de 36 packages de 24 contributeurs et vérification de 123 packages en 2.224s
trouvé 21 vulnérabilités (8 faibles, 9 modérées, 4 élevées)
exécutez `npm audit fix` pour les corriger, ou` npm audit` pour plus de détails
Dès que nous avons terminé l'installation, nous obtenons un rapport rapide indiquant que plusieurs vulnérabilités ont été trouvées. Vous pouvez exécuter la commande npm audit pour afficher plus de détails:
$ npm audit
=== rapport de sécurité d'audit npm ===
# Exécutez npm install express@4.17.1 pour résoudre 21 vulnérabilités
┌───────────────┬────────────────────────────────── ─────────────────────────────┐
│ Élevé │ Déni de service à expression régulière │
├───────────────┼────────────────────────────────── ─────────────────────────────┤
│ Package │ négociateur │
├───────────────┼────────────────────────────────── ─────────────────────────────┤
│ Dépendance de │ express │
├───────────────┼────────────────────────────────── ─────────────────────────────┤
│ Chemin │ express> accepte> négociateur │
├───────────────┼────────────────────────────────── ─────────────────────────────┤
│ Plus d'informations │ https://nodesecurity.io/advisories/106 │
└───────────────┴────────────────────────────────── ─────────────────────────────┘
┌───────────────┬────────────────────────────────── ─────────────────────────────┐
│ Modéré │ Timing Attack │
├───────────────┼────────────────────────────────── ─────────────────────────────┤
│ Paquet │ signature de cookie │
├───────────────┼────────────────────────────────── ─────────────────────────────┤
│ Dépendance de │ express │
├───────────────┼────────────────────────────────── ─────────────────────────────┤
│ Chemin │ express> signature de cookie │
├───────────────┼────────────────────────────────── ─────────────────────────────┤
│ Plus d'informations │ https://nodesecurity.io/advisories/134 │
└───────────────┴────────────────────────────────── ─────────────────────────────┘
Vous obtiendrez une liste détaillée des packages présentant des vulnérabilités. Si vous regardez le champ Chemin il montre le chemin de dépendance. Par exemple, le chemin express> accepte> négociateur signifie qu'Express dépend du package Accepte . Le package Accepte dépend du package négociateur qui contient la vulnérabilité.
Il existe deux façons de résoudre tous ces problèmes. Nous pouvons soit exécuter la commande npm install express@4.17.1 comme suggéré, soit exécuter le correctif d'audit npm . Faisons ce dernier:
$ npm correctif d'audit
+ express@4.17.1
ajouté 20 packages de 14 contributeurs, supprimé 7 packages et mis à jour 29 packages en 1,382 s
correction de 21 vulnérabilités sur 21 dans 122 packages analysés
La commande npm audit fix installe automatiquement toutes les mises à jour compatibles avec les dépendances vulnérables. Bien que cela puisse sembler magique, notez que les vulnérabilités ne peuvent pas toujours être corrigées automatiquement. Cela peut se produire si vous utilisez un package qui a subi une modification majeure qui pourrait interrompre votre projet actuel s'il était mis à jour. Pour des situations comme celle-ci, vous devrez revoir votre code et appliquer manuellement le correctif.
Vous pouvez également exécuter le correctif d'audit npm --force si cela ne vous dérange pas de mettre à niveau des packages avec des changements de rupture. . Après avoir exécuté la commande, exécutez npm audit pour vous assurer que toutes les vulnérabilités ont été résolues.
Alias
Comme vous l'avez peut-être remarqué, il existe plusieurs façons d'exécuter les commandes npm. Voici une brève liste de certains des alias npm couramment utilisés:
npm i : installez le package local
npm i -g : installez le package global
npm un : désinstallez local package
npm up : packages de mise à jour npm
npm t : exécution des tests
npm ls : liste des modules installés
npm ll ou npm la : imprimer des informations supplémentaires sur les packages lors de la liste des modules
Vous pouvez également installer plusieurs packages à la fois comme ceci:
$ npm i express momemt lodash mongoose body-parser webpack
Si vous souhaitez afficher toutes les commandes npm courantes, exécutez simplement npm help pour la liste complète. Vous pouvez également en savoir plus dans notre article 10 trucs et astuces qui feront de vous un ninja npm .
npx
Vous pourriez également entendre parler de npx lors de vos voyages. Ne confondez pas cela avec npm. Comme nous l'avons appris, npm est un outil pour gérer vos packages, tandis que npx est un outil pour exécuter des packages . Il est fourni avec la version 5.2 + de npm.
Une utilisation typique de npx consiste à exécuter des commandes ponctuelles. Par exemple, imaginez que vous vouliez faire tourner un simple serveur HTTP. Vous pourriez installer le package de serveur http globalement sur votre système, ce qui est idéal si vous utilisez régulièrement le serveur http . Mais si vous voulez simplement tester le package, ou si vous souhaitez garder vos modules installés globalement au minimum, vous pouvez vous rendre dans le répertoire où vous souhaitez l'exécuter, puis exécuter la commande suivante:
npx http- serveur
Et cela fera tourner le serveur sans installer quoi que ce soit dans le monde.
Dans ce didacticiel, nous avons couvert les bases de travailler avec npm. Nous avons montré comment installer Node.js à partir de la page de téléchargement du projet, comment modifier l'emplacement des packages globaux (afin d'éviter d'utiliser sudo ) et comment installer les packages en mode local et global. Nous avons également couvert la suppression, la mise à jour et l'installation d'une certaine version d'un package, ainsi que la gestion des dépendances d'un projet.
Avec chaque nouvelle version, npm fait d'énormes progrès dans le monde du développement frontal. Selon son co-fondateur sa base d'utilisateurs change et la plupart de ceux qui l'utilisent ne l'utilisent pas du tout pour écrire Node. Au contraire, cela devient un outil que les gens utilisent pour assembler JavaScript en amont (sérieusement, vous pouvez l'utiliser pour installer à peu près n'importe quoi) et qui devient une partie intégrante de l'écriture de JavaScript moderne.
Utilisez-vous npm dans vos projets? Sinon, le moment est peut-être venu de commencer.
J'écris du code clair, lisible et modulaire. J'adore apprendre de nouvelles technologies qui apportent des gains d'efficacité et une productivité accrue à mon flux de travail.
Peter est développeur indépendant des Pays-Bas construisant des applications Web Ruby on Rails pour ses clients. Il aime également jouer avec les frameworks JavaScript frontaux et s'intéresse aux nouvelles technologies Web en général. Dans ses temps libres, il fait du vélo tous les jours et il est aussi un parachutiste passionné.
