Lorsque nous construisons des projets, nous utilisons tous divers outils pour faciliter et accélérer le développement. La plupart du temps, ces outils sont créés par d’autres développeurs et rendus publics pour une utilisation gratuite.
Imaginez que vous construisiez votre propre framework CSS : Vous seriez en train de créer vos propres systèmes de conception, vos classes utilitaires, vos différentes couleurs et leurs nuances, des milliers de lignes de Sass (qui seront finalement compilées en CSS), de nombreux composants personnalisés, des tests pour les bogues, et du financement, si d’autres développeurs vous aident à construire un tel projet. Ce travail peut être fastidieux – et coûteux.
Mais grâce à l’éventail toujours plus large de ressources gratuites créées par des développeurs, il est plus facile que jamais d’éviter tous ces coûts et ces efforts.
Dans ce tutoriel, nous allons parler de npm (Node package manager), un dépôt en ligne JavaScript pour les paquets Node.js open source. Nous apprendrons ce qu’est npm, comment l’utiliser, ainsi que le but des paquets et comment interagir avec eux localement et à distance.
Nous apprendrons également à utiliser l’interface de ligne de commande (CLI), à connaître les dépendances, les scripts et le fichier package.json.
Qu’est-ce que npm (Node Package Manager) ?
Bien que vous puissiez voir différentes variations de la signification de npm, l’acronyme signifie « Node package manager »
npm est un gestionnaire de paquets pour les projets Node.js mis à disposition pour un usage public. Les projets disponibles sur le registre npm sont appelés « packages »
npm nous permet d’utiliser facilement du code écrit par d’autres sans avoir à l’écrire nous-mêmes pendant le développement.
Le registre npm compte plus de 1,3 million de packages utilisés par plus de 11 millions de développeurs dans le monde. (Nous parlerons davantage des packages plus tard dans ce tutoriel)
Pourquoi utiliser npm ?
Voici quelques-unes des raisons pour lesquelles vous devriez utiliser npm :
- Il vous permet d’installer des bibliothèques, des frameworks et d’autres outils de développement pour votre projet, de manière similaire à l’installation d’une application mobile depuis un app store.
- Vous avez accès à des projets Node.js sûrs pour le développement.
- Il vous aide à accélérer la phase de développement en utilisant des dépendances pré-construites.
- npm propose gratuitement une grande variété d’outils.
- L’utilisation des commandes npm ne nécessite pas beaucoup d’apprentissage, car elles sont faciles à comprendre et à utiliser.
Ensuite, nous allons parler de l’interface de ligne de commande de npm.
L’interface de ligne de commande (CLI) de npm
L’interface de ligne de commande de npm est utilisée pour exécuter diverses commandes comme l’installation et la désinstallation de paquets, la vérification de la version de npm, l’exécution de scripts de paquets, la création du fichier package.json, et bien d’autres choses encore.
Au fur et à mesure que nous progressons dans ce tutoriel, nous verrons certains des cas d’utilisation de l’interface de ligne de commande.
Sur un ordinateur Windows, nous appelons généralement l’interface de ligne de commande Command Prompt. Sur un ordinateur Mac, elle est appelée le terminal.
Commandes et alias essentiels de npm
Dans cette section, nous allons passer en revue certaines des commandes npm les plus couramment utilisées et ce qu’elles font.
npm install
Cette commande est utilisée pour installer des paquets. Vous pouvez installer les paquets de manière globale ou locale. Lorsqu’un paquet est installé globalement, nous pouvons utiliser les fonctionnalités du paquet depuis n’importe quel répertoire de notre ordinateur.
En revanche, si nous installons un paquet localement, nous ne pouvons l’utiliser que dans le répertoire où il a été installé. Aucun autre dossier ou fichier de notre ordinateur ne peut donc utiliser le paquet.
npm uninstall
Cette commande est utilisée pour désinstaller un paquet.
npm init
La commande init est utilisée pour initialiser un projet. Lorsque vous exécutez cette commande, elle crée un fichier package.json.
Lorsque vous exécutez npm init, il vous sera demandé de fournir certaines informations sur le projet que vous initialisez. Ces informations incluent le nom du projet, le type de licence, la version, etc.
Pour ne pas avoir à fournir ces informations vous-même, vous pouvez simplement exécuter la commande npm init -y.
npm update
Utilisez cette commande pour mettre à jour un paquet npm dans sa dernière version.
npm restart
Sert à redémarrer un paquet. Vous pouvez utiliser cette commande lorsque vous souhaitez arrêter et redémarrer un projet particulier.
npm start
Utilisé pour démarrer un paquetage lorsque cela est nécessaire.
npm stop
Utilisé pour arrêter l’exécution d’un paquetage.
npm version
Vous indique la version actuelle de npm installée sur votre ordinateur.
npm publish
Utilisé pour publier un paquetage npm dans le registre npm. Ceci est surtout utilisé lorsque vous avez créé votre propre paquet.
Comment installer npm
Pour installer npm, vous devez d’abord installer Node.js sur votre ordinateur. Pour ce faire, rendez-vous sur le site web de Node.js et téléchargez-le. Nous vous recommandons de télécharger la version LTS, car il s’agit de la version la plus stable de Node.js.
L’installation de Node.js installe automatiquement npm – aucune installation séparée n’est nécessaire.
Comment vérifier la version actuelle de npm installée sur votre PC
Après avoir installé Node.js, exécutez les commandes suivantes pour voir vos versions de Node.js et de npm :
node -vLa commande suivante montrera la version actuelle de npm :
npm -vPaquets npm
Dans cette section, nous verrons comment installer et désinstaller des paquets npm globalement et localement, mettre à jour un paquet, lister les paquets, changer l’emplacement d’un paquet et rechercher des paquets installés.
Nous commencerons par discuter de ce qu’est un package npm et verrons quelques exemples de packages utilisés par les développeurs.
Qu’est-ce qu’un paquet Npm ?
Un package (nommé aussi paquet ou, paquetage) est simplement un projet pré-construit publié sur le répertoire npm. Ce que les paquets peuvent faire dépend uniquement du créateur du paquet et de ceux qui y contribuent.
Avec npm, nous pouvons accéder à de nombreux projets créés par d’autres développeurs. Imaginez créer votre propre framework CSS ; cela prendrait beaucoup de temps à faire. Les développeurs créent donc ces projets et les placent dans le registre npm afin que nous puissions les utiliser facilement et faciliter le processus de développement.
Un exemple d’un tel package npm est Tailwind CSS, un framework CSS à vocation utilitaire pour la création de pages web. D’autres paquets npm populaires incluent React, Chalk, Gulp, Bootstrap, Express et Vue.js, parmi beaucoup d’autres.
Comment installer un paquetage npm globalement
Lorsque vous installez un paquet npm de manière globale, vous pouvez y accéder depuis n’importe quel répertoire de votre ordinateur.
Dans cette section, vous verrez une façon pratique d’installer un paquetage globalement en exécutant une commande npm dans votre terminal.
Pour installer un paquetage de manière globale, utilisez cette commande :
npm install -g [package name]Notez que le drapeau -g dans la commande est ce qui permet au CLI npm d’installer le paquetage globalement.
Voici un exemple :
npm install -g typescriptLa commande ci-dessus installera TypeScript globalement sur votre ordinateur. Après l’installation, vous pouvez utiliser TypeScript dans n’importe quel répertoire.
Comment installer un paquet npm localement
Dans la section précédente, nous avons vu comment installer un package npm globalement. Parlons maintenant de l’installation d’un paquet localement.
Installer un package localement signifie que vous ne pouvez utiliser les fonctionnalités du package que dans le répertoire actuel. Pour ce faire, vous devez vous rendre dans le répertoire dans lequel vous souhaitez installer le paquet et exécuter cette commande dans le terminal :
npm install [package name]Voici un exemple :
npm install typescriptLa commande ci-dessus installera TypeScript localement, ce qui signifie qu’il ne fonctionnera que dans ce répertoire courant.
Comment désinstaller un paquet npm globalement
Dans les situations où nous n’avons plus besoin d’un paquet npm, vous pouvez le supprimer de votre ordinateur en le désinstallant.
Pour désinstaller un paquet globalement, utilisez ceci :
npm uninstall -g [package name]Voyons un exemple :
npm uninstall -g typescriptLa commande de l’exemple ci-dessus supprimera le paquetage TypeScript de votre ordinateur.
Comment désinstaller un paquetage npm localement
La désinstallation d’un paquetage npm installé localement est similaire à l’exemple précédent, sauf que cette fois, nous n’utiliserons pas le drapeau -g.
Voici la syntaxe :
npm uninstall [package name]Et voici un exemple fonctionnel :
npm uninstall typescriptComment mettre à jour npm et les paquets
Garder votre npm et vos paquets à jour est le meilleur moyen de garder les bogues et les failles de sécurité loin de votre code.
Pour mettre à jour npm à sa dernière version, utilisez la commande ci-dessous :
npm install npm@latest - gCeci met à jour npm de manière globale sur votre ordinateur.
Lorsque les créateurs d’un paquetage introduisent de nouvelles fonctionnalités ou corrigent des bogues, ils mettent à jour le paquetage dans le registre npm. Vous devez ensuite mettre à jour votre propre paquet afin d’utiliser les nouvelles fonctionnalités.
Voici la syntaxe de la commande que vous utiliseriez pour le faire :
npm update [package name]Et voici un exemple fonctionnel :
npm update typescriptLa commande ci-dessus met à jour TypeScript à sa dernière version.
En outre, tout comme dans les sections précédentes, nous pouvons utiliser le drapeau -g pour mettre à jour un paquet de manière globale. C’est-à-dire
npm update -g typescriptComment changer l’emplacement des paquets npm
Pour certains utilisateurs qui n’ont pas les droits d’administration sur leur ordinateur, l’exécution des commandes npm peut renvoyer un message d’erreur. Pour remédier à cela, vous pouvez modifier l’emplacement d’installation par défaut de vos paquets en définissant un nouvel emplacement/répertoire.
Voici la syntaxe pour le faire :
npm config set prefix [new directory path]Une fois que vous avez défini le nouveau chemin pour l’installation des paquets, tous vos paquets npm y seront enregistrés par défaut.
Comment lister globalement les paquets npm installés
Si vous vous demandez comment vérifier le nombre de paquets installés sur votre ordinateur, npm fournit une commande qui en dresse la liste.
En entrant la commande ci-dessous, vous obtenez la liste de tous les paquets installés globalement sur votre appareil :
npm list -gLorsque la commande ci-dessus est exécutée, vous verrez une liste complète des paquets que vous avez précédemment installés n’importe où sur votre ordinateur.
Dans la section suivante, nous verrons comment lister les paquets npm installés localement.
Comment lister les paquets npm installés localement
Comme dans la dernière section, nous pouvons également lister les paquets npm installés localement.
Pour voir une liste des paquets installés localement, exécutez la commande ci-dessous dans votre terminal :
npm listVous devez exécuter la commande ci-dessus dans le répertoire de votre projet afin de voir tous les paquets installés pour ce projet particulier.
Comment rechercher des paquets npm
Il y a plus de 1,3 million de paquets sur le registre npm, tous avec des fonctionnalités différentes. Le choix du bon paquet dépend de vos besoins et de vos objectifs.
Il existe des packages que vous devez utiliser lorsque vous travaillez avec certaines piles de développement. Par exemple, un paquet populaire dans React est React Router, qui est utilisé pour le routage dans React.
De la même manière, d’autres piles technologiques nécessitent différents packages.
Vous pouvez utiliser la barre de recherche du site web de npm pour rechercher des packages et voir ce que fait chacun d’entre eux. La plupart sont accompagnés d’instructions d’installation et de détails sur les fonctionnalités. Recherchez des paquets qui sont régulièrement maintenus, c’est-à-dire testés, corrigés et améliorés à intervalles réguliers par les développeurs de la communauté.
Fichiers et dossiers npm supplémentaires
Maintenant que nous savons ce que sont les packages npm et comment ils sont utilisés, examinons certains des autres fichiers et dossiers impliqués dans un projet basé sur npm.
Le fichier package.json
Le fichier package.json nous aide à garder la trace de tous les packages installés dans un projet donné. Lorsque vous créez un nouveau projet, il est important de commencer par créer ce fichier.
Il stocke des informations sur un projet comme le nom du projet, sa version, les scripts, les dépendances, etc.
Vous pouvez le faire en exécutant la commande npm init ou npm init -y dans le terminal du projet. Il suffit ensuite de remplir toutes les questions que le système pose lors de la création du fichier.
Après avoir généré le fichier package.json, tous les paquets installés, ainsi que leurs noms et versions, seront stockés dans le fichier.
Une autre utilisation importante du fichier package.json est observée lorsque nous clonons des projets sur GitHub. Lorsque les développeurs poussent leur projet vers un dépôt, ils laissent de côté le dossier node_modules, qui contient nos paquets et leurs dépendances.
Afin de générer votre propre dossier après avoir cloné un repo, vous devez exécuter la commande npm install dans le terminal de votre projet. Cela permettra à npm de parcourir le fichier package.json du dépôt et d’installer tous les paquets qui y sont répertoriés.
Une fois l’installation terminée, vous pouvez alors utiliser tous les paquets précédemment installés pour ce projet avant qu’il ne soit poussé vers GitHub.
Que sont les dépendances de npm ?
Lorsque nous installons des paquets, un dossier node_modules est créé où nous pouvons voir d’autres dossiers – à savoir, le dossier et les sous-dossiers de chaque paquet. Vous vous demandez peut-être pourquoi ces autres dossiers sont là alors que vous ne les avez pas installés.
Eh bien, dans votre fichier package.json, vos paquets sont répertoriés sous les dépendances car votre projet « dépend » de ces paquets pour effectuer son travail.
Les dossiers supplémentaires créés dans votre dossier node_modules sont d’autres paquets supplémentaires dont dépendent les paquets installés afin de vous offrir les meilleures fonctionnalités. Vous pouvez facilement vérifier cela en regardant le fichier package.json d’un paquet installé pour voir ses dépendances.
Que sont les scripts npm ?
les scripts npm sont des scripts personnalisés définis dans le fichier package.json afin d’automatiser certaines tâches. Vous pouvez également définir vos propres scripts pour automatiser diverses tâches telles que la minification de votre code CSS, le redémarrage de votre serveur à chaque modification, la construction d’un projet pour la production, etc.
Lorsque nous créons un fichier package.json, il y a généralement un script test qui est généré avec le fichier. Nous pouvons utiliser les scripts pour effectuer une variété de tâches comme le démarrage d’un serveur, la réduction de notre CSS, le regroupement de notre code pour la production, etc.
Un exemple populaire d’un tel script est le npm run start de React, qui démarre notre serveur de développement dans localhost:3000.
Comme le script ci-dessus, nous pouvons exécuter d’autres scripts en utilisant cette syntaxe de commande :
npm run [script-name]Résumé
Au fil des ans, npm est devenu une nécessité dans le développement d’applications web basées sur Node.js. npm nous donne accès à des millions de projets déployés par d’autres développeurs que vous pouvez utiliser gratuitement pour faire avancer votre propre projet.
Il existe une grande variété de paquets npm allant des frameworks CSS, des regroupeurs de fichiers, des frameworks JavaScript, des outils backend, et bien plus encore. Ces projets sont également sécurisés pour que d’autres développeurs puissent les utiliser, et beaucoup sont régulièrement maintenus et mis à jour.
Avec npm, le développement d’applications web est devenu plus facile ; nous ne sommes pas obligés de recréer la roue. Il nous suffit d’installer le paquet d’un autre développeur et de nous épargner des heures de codage.
En tant que développeurs, nous pouvons également créer nos propres paquets npm et les publier sur le registre npm pour que les autres développeurs puissent les utiliser. De la même manière que les utilisateurs de la communauté WordPress contribuent à l’amélioration et au succès de la plate-forme, les membres de la communauté Node.js peuvent également le faire.
Avez-vous créé un outil qui vous aide dans votre phase de développement et que vous aimeriez que les autres développeurs utilisent ? Partagez vos pensées dans la section des commentaires !
