Je me souviens parfaitement du moment, au début de ma carrière de développeur, où j'ai commencé à percevoir que les choses s'éloignaient de ce que je connaissais, pour se diriger vers un ensemble plus complexe d'outils et de pratiques, ancrés dans la ligne de commande et quelque chose appelé npm.

Voici la première partie d'un guide du débutant où nous couvrons le vaste sujet de Node Package Manager, ou npm. Nous prenons souvent pour acquis ces trois petites lettres — npm — lorsque nous les tapons dans la ligne de commande, mais npm fait partie d'un écosystème beaucoup plus vaste qui pourrait sembler intimidant ou déroutant pour quiconque s'y lance pour la première fois. Ce guide contribuera à démystifier cet écosystème et vous aidera non seulement à comprendre ce qu'est npm et ce qu'il fait, mais aussi à vous sentir à l'aise pour travailler avec lui.

Table des matières

Le développement moderne "back-of-the-front-end" — dont npm fait partie — semble complexe car il s'appuie sur de nombreux outils interconnectés. Si vous ajoutez à cela le fait que le monde du front-end semble évoluer beaucoup plus vite qu'il ne le fait en réalité, on a l'impression qu'on sera bientôt largué si l'on ne saute pas tout de suite sur la dernière nouveauté.

C'est pourquoi nous avons créé ce guide — pour rendre la technologie plus accessible et vous permettre de l'utiliser dans votre propre travail.

À qui s'adresse ce guide ?

Dans mon propre parcours d'apprentissage du dev, je lisais des guides sur des technologies qui me passionnaient, puis j'arrivais à une partie qui disait "il suffit d'installer npm" ceci ou cela, et je poussais un soupir et j'abandonnais l'idée d'utiliser cet outil qui avait l'air si cool. Ou, lors de journées plus aventureuses, je copiais la commande, mais je me retrouvais inévitablement à une autre étape que je n'avais pas comprise ("il suffit", disaient-ils toujours, "de faire [une chose dont je n'avais aucune idée]"), ou je recevais un message d'erreur que le guide n'expliquait pas et qui m'arrêtait net.

Peu importe ce qu'était npm, ce que faisaient ces commandes et où vous étiez censé les taper, personne n'avait jamais pris le temps de me l'expliquer. Et plus je lisais des guides écrits par des personnes qui considéraient ces connaissances comme acquises, plus je me sentais isolé.

Si tout cela vous semble familier : cette série est pour vous.

Vous faites très probablement partie du groupe que l'on a décrit ces dernières années comme le "front du front-end". Comme moi, vous connaissez probablement bien votre affaire en matière de HTML et de CSS. Vous connaissez peut-être aussi un peu de JavaScript, soit le JavaScript "classique", soit jQuery. L'un ou l'autre est parfait, à la fois pour les besoins de cet article et en général.

Vous avez peut-être même essayé un framework comme React ou Vue, mais vous vous êtes surtout contenté de copier et coller des éléments pour lancer votre projet, sans savoir exactement ce qu'ils faisaient.

Ce billet est pour vous si vous sentez le grand fossé entre les définitions plus traditionnelles et "modernes" du développement front — et si vous craignez de nuire à votre carrière si vous ne comblez pas ce gouffre.
Ce billet est pour vous si vous n'êtes pas vraiment sûr de savoir à quoi rime toute cette agitation autour des terminaux et des lignes de commande, et que vous préféreriez de loin ne jamais en toucher un du tout.
Ce billet est pour vous si vous vous demandez pourquoi les autres développeurs semblent aimer rendre les choses si compliquées, et quel est l'intérêt de toutes ces lignes de commande, alors que vous pourriez simplement écrire du HTML, du CSS et du JavaScript à la place.
Ce billet est pour vous si vous vous sentez exclu. Si vous avez l'impression qu'il y a une chose, une chose vraiment importante, que personne n'a jamais pris la peine de vous expliquer, et que vous avez peur d'être le seul à ne pas comprendre.
Sachez ceci, ami développeur front : vous n'êtes pas seul. Vous êtes loin de l'être. Vous êtes exactement là où j'étais il n'y a pas si longtemps, et le souvenir troublant de cet endroit est encore frais dans mon esprit.

Laissez-moi essayer de répondre aux questions que vous vous posez probablement — les mêmes que j'avais — de la manière dont j'aurais aimé que quelqu'un le fasse pour moi, avant même que je sache comment les poser.

Ce qui est couvert dans ce guide

Ce guide est une série d'articles. Non que ce sujet soit difficile à comprendre, mais parce qu'il comporte de nombreuses parties, et que chacune mérite une explication à part entière. C'est un vaste territoire avec de nombreux trous de lapin à explorer. En nous concentrant sur une étape à la fois, nous pouvons consacrer du temps à rendre les choses claires et compréhensibles. L'objectif n'est pas de tout couvrir, mais je veux être plus complet que rapide.

Nous commencerons par parler de la situation actuelle, de ce qu'est npm, d'où il vient et comment nous en sommes arrivés là. À partir de là, nous couvrirons ce qu'est Node, puis ce que sont les gestionnaires de paquets en général, avant de travailler réellement avec npm. Nous terminerons par l'installation de Node et de npm, l'initialisation d'un projet pour avoir une idée de son fonctionnement, et enfin, l'installation d'un projet npm réel depuis GitHub avec tous ses paquets et commandes.

Une partie (ou la totalité) de tout cela peut sembler très intimidant pour le moment, mais ne vous inquiétez pas. C'est pourquoi nous consacrons ensemble la durée d'un guide entier.

Ce qu'il faut savoir avant de commencer

Je vais faire de mon mieux pour supposer le moins possible à votre sujet, au-delà du fait que vous êtes un développeur Web qui sait généralement comment construire un site Web avec HTML et CSS. Vous n'aurez pas besoin d'en savoir beaucoup sur JavaScript ou d'en écrire pour suivre ce guide, mais il sera certainement utile que vous ayez au moins une compréhension de base de ce qu'est JavaScript et de son fonctionnement.

JSON est le seul autre élément qu'il pourrait être utile de connaître avant de commencer. Si vous n'êtes pas familier avec JSON, il peut être utile de jeter un coup d'œil à ce guide sur JSON, (NdT : et/ou à celui-ci en français) ou du moins de le préparer pour le moment où nous arriverons à cette partie.

En outre, il se peut que je fasse référence à des outils, projets et frameworks spécifiques tels que Bootstrap, React, Vue et SvelteKit, mais je ne supposerai pas que vous ayez une quelconque expérience pratique de ces outils, ni que vous ayez déjà utilisé npm ou la ligne de commande.

Prêt à commencer ? Commençons par clarifier ce que nous entendons par "npm", c'est-à-dire ce qu'il représente et comment il s'intègre au développement Web moderne.