NPM : Guide complet du package manager de NodeJS

Vous souhaitez devenir développeur full-stack, backend ou frontend ou vous l’êtes déjà ? Vous souhaitez utiliser JavaScript dans vos projets de développement ? Ou est-ce déjà le cas ? NPM est l’un des outils couramment utilisés dans ce langage, mais savez-vous exactement de quoi il s’agit ?

Dans cet article, vous allez découvrir ce qu’est le npm et la manière de l’utiliser dans vos différents projets. Nous allons également vous fournir un tutoriel qui explique étape par étape comment créer votre propre package et le publier dans le registre de npm.

Qu’est-ce que le npm ?

npm est développé par Isaac Z. Schlueter, il s’est inspiré des projets tels que PEAR (PHP) et CPAN (Perl). Pour bien comprendre le npm, il faut faire un petit bond dans le passé et aller au tout au début du développement web. À cette époque, les développeurs étaient obligés à chaque fois de télécharger les bibliothèques et de les inclure dans une balise HTML comme suit :

<script src=”jquery-3.5.1.min.js”></script>

Mais le souci est qu’il y avait tellement de bibliothèques à ajouter dans les projets qu’au final, les développeurs avaient du mal à tous les inclure, ce qui rendait le travail pénible. C’est ainsi que Isaac Z. Schlueter a conçu un outil qui a permis de regrouper toutes les bibliothèques dans un registre appelé NPM. Les développeurs auront juste à installer ce registre dans leur projet et ainsi avoir accès à toutes les bibliothèques instantanément.

Comment fonctionne npm ?

npm joue deux rôles clés : 

1. Il est utilisé comme une référence pour la publication des projets Node.js open source. Ici, on peut parler d’une plateforme en ligne où les développeurs partagent leurs outils écrits en JavaScript.
2. npm permet d’interagir avec les navigateurs et les serveurs grâce aux lignes de commande. Cet utilitaire donne la possibilité d’installer et de désinstaller des paquets dans votre projet ainsi que de prendre la gestion des versions et dépendances nécessaires à l’exécution d’un projet.

Pour installer un paquet dans votre projet, il vous faut un fichier appelé paquage.json dans le projet. Dans ce fichier se trouvent les métadonnées spécifiques à chaque projet.

L’ordre des métadonnées est la suivante :

• Le nom du projet ;
• La version initiale ;
• Description ;
• Le point d’entrée ;
• Commandes de test ;
• Le référentiel git ;
• Mots clés ;
• License ;
• Dépendances ;
• Les devDependencies.

Petit rappel : JSON est un acronyme pour JavaScript Object Notation, c’est un format qui permet de conserver et d’échanger des informations lisibles par l’homme. L’extension du fichier est .json et  ce dernier ne contient que du texte.

Comment installer npm sur un système Linux ou Windows ?

La méthode la plus rapide et la plus simple pour installer npm sur Linux ou Windows est d’installer la dernière version de NodeJS puisqu’ils viennent ensemble. Pour ce faire, vous pouvez suivre notre tutoriel sur Node.js.

Pour vérifier si vous avez installé node et npm, tapez ces lignes de commande pour voir leurs versions : 

node -v  
npm -v

Dans le cas échéant, vous aurez un message qui dira que la commande n’existe pas.

Pour être sûr que vous avez la dernière version de npm, tapez la commande suivante :

npm install npm -g

On remarque ici qu’après l’exécution de la commande, on a deux paquets qui ont été ajoutés et 39 autres ont été audités. 

Comment installer un nouveau paquet ?

Après avoir installé le npm, vous pouvez installer n’importe quel package disponible dans le registre. Mais il faut savoir qu’il existe deux méthodes d’installation de paquet avec npm : localement ou globalement.

Mode local

Pour cette méthode, vous devez vous rendre dans le répertoire où vous voulez installer le paquet grâce à la commande cd puis tapez la commande : 

npm install nomDuPaquet

Remplacez le nomDupaquet par le nom du paquet à installer.

Mode global

Quand un module est installé en mode global, tout le monde peut y avoir accès. Donc, pensez à lancer votre terminal en mode administrateur si vous êtes sur Windows ou utiliser sudo si vous êtes sur Linux. 

À titre d’exemple, nous allons installer le paquet nodemon. C’est un paquet qui se charge de relancer automatiquement un programme après une modification. Alors, tapez cette commande dans votre terminal :

npm install nodemon –global

Comment installer un paquet npm depuis GitHub ?

Si vous souhaitez installer un paquet depuis GitHub, il faut suivre les étapes suivantes : 

1. Allez sur le référentiel GitHub du paquet ;
2. Copiez le lien de clonage ;
3. Rendez-vous sur le terminal et tapez : 

npm install git + lien_copier

Faisons un exemple d’installation de paquet, tapez la commande suivante sur votre terminal :

npm install git+https://github.com/expressjs/express.git

Comment connaître l’état d’un paquet ?

Si vous voulez obtenir une liste des paquets qui ne sont pas encore mis à jour, vous pouvez taper l’une des commandes suivantes :

• Pour les paquets installés localement : 

npm outdated

• Et pour les paquets installés globalement : 

npm outdated -g

Ces commandes nous donnent toutes les dépendances qui ne sont pas à jour, y compris les dépendances des dépendances (c’est seulement dans le cas où vos paquets dépendent des autres paquets).

Maintenant, si un paquet n’est pas à jour, comment y remédier ?

Cela est possible avec ces commandes : 

• Pour les paquets installés localement : 

npm update

• Et pour les paquets installés globalement :

npm update -g

Si vous souhaitez supprimer un paquet, tapez cette commande :

npm uninstall nom_du_paquet

Qu’est-ce le pnpm ?

Il s’agit d’une alternative de npm. Lorsque vous l’avez installée, vous pouvez l’utiliser en faisant pnpm install pour gérer les dépendances de tout le projet de manière transparente.

Si vous avez 5 projets qui utilisent la même version de React, pnpm installera en une fois les dépendances. Cela veut dire que tout va plus vite que si vous utilisez le standard npm pour télécharger les ressources.

npm met des packages en cache puis fait une copie à chaque installation. pnpm, lui est en liaison directe avec le référentiel local central.

Voici la commande pour installer pnpm : 

npm install -g pnpm

pnpm est vraiment demandé dans les entreprises qui utilisent un grand nombre de projets possédant la même dépendance pour la gestion de ces dernières. Par exemple, avec la commande pnpm recursive install, vous pouvez initialiser 50 projets.

Qu’est-ce que le npx ?

Vous avez sans doute entendu parler de npx, il ne faut surtout pas le confondre avec npm. Comme dit, npm est l’outil permettant de prendre en main la gestion de vos packages. npx, quant à lui, est un outil qui permet d’exécuter les packages. Il n’est disponible qu’avec les versions 5.2+ de npm.

Utiliser npx est très pertinent lorsque vous exécutez des commandes ponctuelles. Imaginez un instant que vous souhaitez lancer un simple serveur HTTP. Pour cela, vous pouvez installer le package de serveur http d’une manière globale sur votre système, mais cela n’est avantageux que lorsque vous utilisez constamment le serveur http. 

Dans le cas où vous souhaitez juste effectuer un test sur le package, alors allez dans le répertoire cible et exécutez la commande suivante : 

npx http- serveur

Cette commande lancera le serveur sans aucune installation de ressource.

Qu’est-ce que Bower et Yarn ?

Bower est le gestionnaire de paquet qui était utilisé avant npm, mais Bower n’a pas de registre centralisé, ce qui posait un certain souci. Nous vous déconseillons fortement d’utiliser Bower. 

Yarn, quant à lui, est un nouveau gestionnaire qui est plus rapide que npm, précisément la version 5 de npm. Certaines fonctionnalités de npm sont inspirées de Yarn, par exemple :

• package.lock.json est inspiré de yarn.lock
• npx est inspiré de yarn create

Comment choisir un package ?

Vous souhaitez réaliser une tâche, mais vous n’avez aucune idée du package qui pourrait répondre à vos exigences ? Alors, voici ce que nous vous recommandons.

Il faut savoir que l’étape la plus importante et la plus délicate est le choix du package à utiliser dans votre projet. Donc, il faut consacrer du temps pour la recherche d’un package qui va s’adapter au mieux à votre programme. Pour cela, il faut : 

• Consultez les CRAN Tasks Views, notamment la page consacrée à la statistique publique ;
• Voir la liste des logiciels libres utiles pour la statistique publique.

Pour utiliser un package dans un programme, il faut qu’il remplisse les deux conditions suivantes :

1. Le package doit améliorer réellement votre programme (rapidité d’exécution, simplicité et concision du code, simplification de tâches complexes…) ;
2. Le niveau de risque du package doit être très faible.

Ce dernier point est important puisque le package va être utilisé très souvent et durant une longue période. Il faut tenir rigueur des packages que vous utilisez sur une longue durée par rapport aux packages utilisés juste pour une étude ponctuelle. 

Comment évaluer le risque que présente un package ?

La manière d’évaluer le risque que présente un package lorsque vous l’utiliser est d’analyser les différentes dimensions suivantes :

• L’opportunité 
• La qualité de la documentation 
• La facilité d’utilisation 
• La popularité et la communauté d’utilisateurs 
• La réactivité de la maintenance 
• La qualité des développements
• La réputation des auteurs

Utiliser un package reste un choix crucial

Avoir un package dans votre projet vous permet de gagner en temps et productivité, mais aussi d’aller directement à l’essentiel. Toutefois, cela cause certains inconvénients.  

Les packages utilisés créent une certaine dépendance aux programmes que vous écrivez et c’est ce qui causera une certaine fragilité. Les packages suivent un cycle de vie. Par exemple, une nouvelle version du package peut apporter une modification au fonctionnement interne du package et impacter votre programme. Il se peut également que l’auteur du package décide un jour de retirer son package du CRAN.

Il existe des packages qui dépendent d’autres packages et là, il y aura plusieurs dépendances, donc autant de sources de fragilité pour votre programme. Grâce à la fonction tools::package_dependencies(), vous pouvez trouver l’ensemble des dépendances d’un package. Pour trouver l’ensemble des dépendances de rmarkdown, effectuer ceci :

tools::package_dependencies("rmarkdown", recursive = TRUE)

## $rmarkdown 
## [1] "tools" "utils" "knitr" "yaml" "htmltools" "evaluate" 
## [7] "jsonlite" "tinytex" "xfun" "jquerylib" "methods" "stringr" 
## [13] "digest" "grDevices" "base64enc" "rlang" "fastmap" "highr" 
## [19] "glue" "magrittr" "stringi" "stats"

Il faut noter que le simple fait qu’un package répond à votre besoin ne suffit pas pour l’utiliser, surtout si vous voulez que votre programme fonctionne sur une longue durée. Donc, utiliser un package revient à effectuer un petit arbitrage entre avantages et inconvénients, mais aussi à analyser les risques d’instabilité.

Le package npm ridicule, mais très utilisé

npm propose plus d’un million de packages ainsi que d’autres services et outils. Nous avons par exemple is.odd qui est un package qui renvoie la réponse true si le nombre qui lui est fourni est un entier impair. Vous pouvez obtenir le même résultat en divisant le nombre par 2 afin de connaître la parité, ce qui rend ce package un peu ridicule. Cependant, il faut savoir que ce package a plus de 400000 téléchargements actuellement tout simplement parce qu’il est utilisé dans plusieurs autres packages en tant que dépendance.

Les dépendances npm et devDependencies

Il est crucial de gérer les dépendances des packages pour le bon fonctionnement de votre programme. Mais quand est-ce qu’on parle de dépendance npm et de devDependencies (dépendance de développement) ?

Quand l’installation de package se fait grâce à : npm instal “nom_package”, alors vous l’installez en tant que dépendance. Le package est en même temps répertorié dans le fichier package.json sous les dependencies list.

À partir du moment où vous ajoutez le -D drapeau ou –save-dev, vous êtes sur le point d’installer le package en tant devDependencies et là il l’ajoute au devDependencies liste.

Les devDependencies sont créés tout simplement comme des packages de développement qui ne sont pas nécessaire en production. Par exemple, les packages de test comme Webpack ou Babel. 

Comment savoir si vous pouvez utiliser un package ?

Comme dit précédemment, utiliser un package nécessite de faire un petit arbitrage entre risque et avantage. Les lignes qui suivent donnent des conseils pour effectuer cela.

L’opportunité

Utiliser des packages ou non comporte des risques. Cependant, cela peut être dangereux, voire très dangereux, de vouloir tout faire par vous-même alors qu’il existe un package qui répond à cela. Si c’est possible, n’essayez pas de réinventer la roue. Vouloir coder vous-même des tâches complexes rendra votre programme difficile à maintenir et peut présenter des bugs qui provoqueront probablement des failles de sécurité.

Pour ce faire, le premier conseil serait d’utiliser à chaque fois un package lorsque vous avez une opération difficile à coder par vous-même. Par exemple : 

• Vous voulez vérifier si un vecteur numérique comporte des nombres pairs. Il ne serait pas judicieux pour ce cas d’utiliser la fonction is.odd() du package FSA alors qu’elle peut simplement s’écrire de cette manière : 

is_odd <- function(x) 
{ 
x %% 2 == 0 
}

• Dans le cas où vous voulez manipuler des données au format JSON ou XML, vous avez la possibilité d’utiliser la méthode des expressions régulières. Cependant, il est déconseillé d’utiliser cette technique, car elle est dangereuse. Le mieux dans ce cas est d’utiliser les packages jsonlite ou xml2 par exemple.

La qualité de la documentation

Si vous trouvez des documents riches, détaillés et qui présentent des exemples d’utilisation, c’est un signe que le package est bon. Grâce aux packages R, vous pouvez créer des pages de documentation appelées vignette. Avec la fonction vignette(), vous pouvez lister les vignettes d’un package.

Les auteurs de package possèdent des sites pour chacun de leur package. N’utilisez pas des packages qui n’ont pas de site internet et de vignette.

La facilité d’utilisation

Selon le niveau d’entretien d’un package, l’utilisation peut être plus ou moins facile. Il est difficile d’utiliser des packages mal conçus, c’est-à-dire que :

• Les noms des fonctions et le paramétrage sont difficiles à comprendre ;
• Les messages d’erreur sont moins détaillés.

Popularité et communauté d’utilisateur

 Utiliser un package peu connu présente d’énormes risques. En effet, 

• Vous aurez de la difficulté à obtenir de l’aide ;
• Il y aura peut-être une présence de bug non détecté ;
• Ou vous allez remarquer une adéquation du package.

Évaluer la popularité d’un package reste une tâche difficile. Donc, pour y arriver, il faut essayer de collecter des indices, c’est-à-dire :

• Chercher à savoir s’il y’a des articles écrits sur le package ;
• Voir dans les forums s’il y a plus d’interaction au sujet du package ;
• Regarder le nombre d’étoiles sur GitHub ou GitLab, un package qui possède moins de 30 étoiles est pris comme confidentiel ;
• Le nombre de téléchargements de package est un bon indice. Mais comment le connaître ? Puisque le CRAN possède beaucoup de miroirs, il est impossible de connaître le nombre total de téléchargements. Dans ce cas, il faut utiliser le package cranlogs qui peut donner le nombre de téléchargements. Pour déterminer le nombre de téléchargements du package ggplot2 le mois passé par exemple, exécutez ceci : 

with(
  cranlogs::cran_downloads(packages = "ggplot2", when = "last-month"), 
  sum(count)
)

Gestion des caches   

À chaque installation d’un nouveau paquet, npm conserve une copie en cache dans un répertoire .npm. Donc, à la prochaine installation, nul besoin d’aller sur le réseau avant de pouvoir l’effectuer. 

Cependant, comme à chaque installation une copie est gardée, il est recommandé de nettoyer de temps en temps votre répertoire.

Maintenant que vous savez installer un package npm, gérer les dépendances, et même savoir lesquels utiliser dans vos projets, il est temps de savoir comment créer et publier un paquet npm. 

Tutoriel : les différentes étapes pour la création d’un paquet npm

Première étape : mise en place

Tout d’abord, il faut que vous créiez un dossier en lui donnant le nom github-repos-search et aussi un fichier package.json. Pour ce faire, voici les commandes à taper :

mkdir github-rep-rech
cd github-rep-rech
npm init -y

Après cela, vous allez initialiser le projet en tant que dépôt git grâce à la commande suivante : 

git init 

Il faut exclure le dossier node_modules en créant un fichier .gitignore puis ajouter la ligne suivante dans ce dernier : 

node_modules

Puis, on installe le paquet qui va servir à appeler l’API GitHub : 

npm install axios@0.20.0

Vous devez ensuite vérifier votre fichier package.json si elle ressemble à ceci :

{
  "name": "github-rep-rech",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
	"axios": "^0.20.0"
  },
  "devDependencies": {},
  "scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

À noter que github-repos-search est le nom de votre projet et il doit être unique sur le dépôt npm. Pour vérifier cela, il faut lancer ce lien sur votre navigateur :

<a href= »https://www.npmjs.com/package/https://www.npmjs.com/package/<nom_de_votre_projet>

Deuxième étape : écrire votre code  

Pour cette étape, il faut créer un fichier index.js en y ajoutant le code suivant : 

const getRepos = async ({
  username = 'myogeshchavan97',
  page = 1,
  per_page = 30
} = {}) => {
  try {
	const repos = await axios.get(	`https://api.github.com/users/${username}/repos?page=${page}&per_page=${per_page}&sort=updated`
	);
	return repos.data
	.map((repo) => {
 	return {
    	name: repo.name,
    	url: repo.html_url,
    	description: repo.description,
    	stars: repo.stargazers_count
 	};
	})
	.sort((first, second) => second.stars - first.stars);
  } catch (error) {
	return [];
  }
};getRepos().then((repositories) => console.log(repositories));

Petite explication des lignes de code ci-dessus :

• La fonction getRepos a pour paramètre username, page et per_page. Ces paramètres ont été initialisés avec des valeurs dans cette partie :

{
  username = 'myogeshchavan97',
  page = 1,
  per_page = 30
} = {}

• L’API GitHub est appelée ici :

const repos = await axios.get(
`https://api.github.com/users/${username}/repos?page=${page}&per_page=${per_page}&sort=updated`
 	);

• Puis, grâce à la fonction map, on choisit les champs requis dans la réponse :

repos.data
  .map((repo) => {
 	return {
 	name: repo.name,
 	url: repo.html_url,
 	description: repo.description,
 	stars: repo.stargazers_count
 	};
  })

Ensuite, un tri est effectué selon un nombre décroissant d’étoile de telle sorte que le premier élément de la liste soit celui avec la meilleure note :

.sort((first, second) => second.stars - first.stars);

Si tout est correct, vous allez obtenir un tableau vide dans le bloc catch.

Troisième étape : lancer le code 

Pour commencer cette étape, vous allez taper la commande suivante : 

node index.js

Une fois que celle-ci est exécutée, vous allez obtenir une liste de 30 premiers dépôts.

Si vous voulez obtenir les 60 premiers dépôts, vous pouvez juste modifier la fonction getRepos comme ceci : 

getRepos({
  username = 'myogeshchavan97',
  page: 1,
  per_page: 50
}).then((repositories) => console.log(repositories));

Maintenant que vous savez comment fonctionne cette fonction, voyons comment faire un appel à la méthode getRepos depuis n’importe quel autre fichier. 

Supprimez les lignes de code entourés en rouge de votre fichier index.js :

Et mettez cette ligne de code à la place :

module.exports = { getRepos };

Le code ci-dessus permet d’exporter la fonction getRepos comme étant la propriété d’un objet. Ainsi, vous pouvez facilement exporter d’autres fonctions plus tard.

Quatrième étape : tester le paquet npm 

Maintenant, vous savez créer un paquet. Mais avant de le publier sur le répertoire npm, il faut au moins vérifier si tout marche bien. Une manière simple d’effectuer cette vérification est la suivante : 

npm link

Tutoriel : comment publier un paquet npm ?

Pour publier un paquet npm, il faut tout d’abord créer votre compte sur la plateforme : https://www.npmjs.com. Une fois que cela est fait, il faut pusher github-rep-rech dans GitHub.

Après cela repartez sur votre projet, dans notre cas, c’est le dossier github-rep-rech, pour ajouter quelques informations supplémentaires.

{
  "name": "github-rep-rech",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "homepage": "https://github.com/myogeshchavan97/github-rep-rec",
  "repository": {
 	"type": "git",
 	"url": "git+https://github.com/myogeshchavan97/github-rep-rech.git"
  },
  "dependencies": {
 	"axios": "^0.20.0"
  },
  "devDependencies": {},
  "scripts": {
 	"test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
 	"github",
 	"repos",
 	"repositories",
 	"sort",
 	"stars"
  ],
  "author": "Juvenal ",
  "license": "ISC"
}

Vous avez remarqué que les informations ajoutées sont : homepage, repository, keywords et author. 

Il faut aussi créer un fichier readme.md à l’intérieur du dossier github-rep-rech, dans lequel vous mettrez toutes les informations utiles concernant votre paquet. 

Après cela, depuis votre dossier github-rep-rech, lancez la commande suivante :

npm login

Il vous sera demandé de saisir vos identifiants pour la connexion donc faites cela. Une fois connecté, vous pouvez maintenant publier votre package grâce à la commande suivante :

npm publish

Les commandes de base

Voici une liste de quelques commandes de base que vous devez absolument connaître :

• Installer npm :

$ curl https://npmjs.org/install.sh | sh

• Vérifiez la version :

$ npm -v

• Initialiser un projet :

$ npm init

• Installer des modules :

$ npm install 
$ npm i 

Pour résumer, dans cet article, vous avez découvert les bases pour pouvoir travailler avec npm. Nous avons montré comment installer les packages, quel package choisir pour son projet. Nous avons également vu la manière de gérer les dépendances, la mise à jour et la suppression des packages. À côté de sa première fonction qui est la base de données en ligne pour des paquets node.js, il est un outil de gestion de dépendance et de fichiers package.json grâce à son interface.

Si vous souhaitez en apprendre davantage sur les bibliothèques JavaScript ou connaître d’autres langages de programmation ainsi que d’autres outils sur ce domaine, n’hésitez pas à consulter la section programmation informatique et dataOps/devOps de notre blog. Et si vous souhaitez vous initier au Big Data, nous vous offrons cette formation qui vous apprendra à développer des applications Spark avec Scala.