Comment créer une librairie NPM : guide complet pour développeurs JavaScript

TopTechAlternative il y a 2 semainesDernière mise à jour : 17.05.2026

0 14 17 minutes de lecture

Créer une librairie NPM permet de partager du code réutilisable avec toute la communauté JavaScript. Découvrez un guide complet pour développer, tester et publier votre premier package NPM.

Dans le monde du développement JavaScript, npm (Node Package Manager) est devenu un outil indispensable pour la gestion des dépendances et le partage de code réutilisable. Que vous développiez un site web simple ou une application web complexe, les librairies npm simplifient le développement en fournissant des solutions prêtes à l’emploi aux problèmes courants.

Sommaire

Qu’est-ce que npm ?

npm (Node Package Manager) est le gestionnaire de paquets par défaut pour JavaScript et Node.js. Il permet aux développeurs d’installer, de partager et de gérer des librairies et des dépendances, simplifiant et optimisant ainsi le développement d’applications.

npm donne accès à un vaste écosystème de paquets open source hébergés sur le registre npm, ce qui en fait l’un des plus grands répertoires de logiciels au monde.

npm est intégré à Node.js ; par conséquent, une fois Node.js installé, vous avez automatiquement accès à npm. Vous pouvez vérifier si npm est installé en exécutant la commande suivante dans votre terminal :

npm -v

Cette commande devrait renvoyer la version de npm installée sur votre système.

L’importance de créer une librairie NPM

Créer une librairie NPM est devenu une compétence essentielle pour les développeurs JavaScript modernes. Aujourd’hui, l’écosystème Node.js repose largement sur des packages réutilisables permettant d’accélérer le développement d’applications web, mobiles et backend.

Qu’il s’agisse de petites fonctions utilitaires, de composants React, d’outils CLI ou de frameworks complets, pratiquement tous les projets JavaScript utilisent des packages NPM. Cette immense librairie open source facilite le partage de code, améliore la productivité et favorise la collaboration entre développeurs du monde entier.

De nombreux développeurs souhaitent désormais publier leurs propres librairies afin de :

partager du code réutilisable,
créer des outils internes,
contribuer à l’open source,
améliorer leur portfolio,
gagner en visibilité professionnelle.

Le fonctionnement de NPM repose principalement sur les packages Node.js distribués via le registre officiel. Selon plusieurs guides techniques publiés par la communauté freeCodeCamp et d’autres ressources spécialisées, la création d’un package NPM suit généralement plusieurs étapes : initialisation du projet, configuration du fichier package.json, création du code principal puis publication via npm publish.

Dans ce guide complet, vous allez apprendre comment créer une librairie NPM professionnelle étape par étape, configurer correctement votre projet, publier votre package et appliquer les meilleures pratiques modernes utilisées par les développeurs expérimentés.

Comment fonctionne npm ?

npm fonctionne grâce à trois composants clés :

1. Le registre npm – Un dépôt public hébergeant des paquets JavaScript open source.
2. L’interface de ligne de commande npm (CLI) – Un outil permettant aux développeurs d’installer, de mettre à jour et de gérer des paquets depuis la ligne de commande.
3. Le fichier package.json – Un fichier de métadonnées répertoriant les dépendances, les scripts et la configuration du projet.

Lorsque vous installez un paquet avec npm, celui-ci est téléchargé depuis le registre et enregistré dans le dossier node_modules de votre projet.

Par exemple, pour installer Lodash, une librairie utilitaire populaire, vous exécuteriez la commande suivante :

npm install lodash

Cela permettra de :

Téléchargez la dernière version de lodash depuis le registre npm.
Ajoutez-la à votre dossier node_modules.
Mettez à jour les fichiers package.json et package-lock.json pour refléter cette nouvelle dépendance.

Le rôle du fichier package.json

Le fichier package.json est au cœur de tout projet npm. Il sert de modèle et contient des informations sur le projet, notamment :

Métadonnées du projet (nom, version, description)
Dépendances (packages externes requis pour le projet)
Scripts (commandes permettant d’automatiser des tâches comme le démarrage d’un serveur ou l’exécution de tests)
Informations de version (garantissant la compatibilité entre les différentes versions des dépendances)

Un fichier package.json typique ressemble à ceci :

{
  "name": "my-awesome-project",
  "version": "1.0.0",
  "description": "A sample project demonstrating npm usage",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"No tests specified\" && exit 0"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "eslint": "^8.0.0"
  },
  "author": "Your Name",
  "license": "MIT"
}

Dépendances – Liste les paquets essentiels au fonctionnement de l’application.
Dépendances de développement – Inclut les dépendances réservées au développement (par exemple, les outils de test et d’analyse statique du code).
Scripts – Définit les commandes en ligne de commande pour l’automatisation des tâches.

Pour installer toutes les dépendances listées dans package.json, exécutez simplement :

npm install

Cela garantit que tous les packages requis sont téléchargés et prêts à l’emploi.

Créer une librairie NPM : les Commandes npm essentielles

Voici quelques commandes npm essentielles que vous utiliserez fréquemment pour Créer une librairie NPM :

Commande	Description
`npm init -y`	Crée un fichier package.json par défaut
`npm install <package-name>`	Installe un paquet et l’ajoute aux dépendances.
`npm install <package-name> --save-dev`	Installe un paquet et l’ajoute aux dépendances de développement.
`npm uninstall <package-name>`	Supprime un paquet du projet
`npm update`	Met à jour toutes les dépendances installées
`npm outdated`	Vérification des dépendances obsolètes
`npm run <script-name>`	Exécute un script défini dans package.json

Pourquoi utiliser une librairie npm ?

Avec la complexité croissante du développement web moderne, l’utilisation des librairies npm est devenue essentielle pour créer des applications évolutives et maintenables. Plutôt que de tout développer de zéro, vous pouvez tirer parti de librairies pré-compilées, testées et optimisées pour accélérer le développement et garantir la fiabilité.

Dans cette section, nous explorerons les principaux avantages de l’utilisation des librairies npm et expliquerons pourquoi elles sont cruciales pour le développement JavaScript et React.

Réutilisation du code et modularisation

L’un des principaux avantages des librairies npm est la réutilisation du code. Au lieu de réécrire les mêmes fonctions ou utilitaires dans différents projets, les développeurs peuvent :

✅ Utiliser des librairies open source existantes pour les fonctionnalités courantes (par exemple, la mise en forme des dates, les requêtes HTTP, les composants d’interface utilisateur).
✅ Créer et publier leurs propres librairies réutilisables pour les partager entre plusieurs projets.

Par exemple, au lieu d’implémenter manuellement une fonction pour formater les dates, vous pouvez installer un paquetage bien maintenu comme date-fns :

npm install date-fns

Vous pourrez ensuite l’utiliser dans votre projet :

import { format } from "date-fns";

const formattedDate = format(new Date(), "yyyy-MM-dd");
console.log(formattedDate); // Outputs: 2024-02-04 (or the current date)

Cette approche modulaire permet de gagner du temps et garantit la cohérence entre les projets.

Gestion simplifiée des dépendances

npm simplifie la gestion des dépendances d’un projet. Au lieu de télécharger et de gérer manuellement différentes versions de librairie externes, npm automatise ce processus grâce aux fichiers package.json et package-lock.json.

Voici quelques-unes de ses principales fonctionnalités :

🔹 Installation automatique : exécutez npm install, et toutes les dépendances seront installées.
🔹 Gestion des versions : spécifiez les versions des packages pour éviter les ruptures de compatibilité.
🔹 Dépendances homologues : assurez la compatibilité entre les différentes librairies .

Par exemple, voici comment npm aide à gérer les versions des dépendances dans package.json :

"dependencies": {
  "react": "^18.0.0",
  "axios": "^1.5.0"
}

^18.0.0 – Permet les mises à jour mineures, mais empêche les changements majeurs incompatibles.
axios – Garantit un traitement cohérent des requêtes HTTP entre les différents projets.

Pour mettre à jour toutes les dépendances en toute sécurité, exécutez :

npm update

Pour mettre à jour toutes les dépendances en toute sécurité, exécutez :

Écosystème piloté par la communauté

npm bénéficie d’une communauté active et en pleine expansion, ce qui signifie que des développeurs du monde entier contribuent et maintiennent des milliers de librairies utiles. Il en résulte :

🌎 Développement plus rapide – Plus besoin de réinventer la roue.
🛠️ Solutions éprouvées – De nombreuses librairies ont fait leurs preuves en production.
📚 Documentation complète – La plupart des packages npm sont fournis avec des instructions d’utilisation claires et des exemples.

Les librairies npm populaires incluent :

Library	Purpose
React (`react`)	Librairie d’interface utilisateur pour la création d’applications web
Axios (`axios`)	Client HTTP pour effectuer des requêtes API
Lodash (`lodash`)	Fonctions utilitaires pour manipuler les tableaux, les objets et les chaînes de caractères
Express (`express`)	Framework web pour la création de services backend
Jest (`jest`)	framework de test JavaScript

Par exemple, utiliser Axios pour effectuer une requête API :

import axios from "axios";

axios.get("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

Cela remplace la nécessité d’écrire manuellement des requêtes de récupération complexes avec gestion des erreurs.

Présentation de Yarn : une alternative à npm

Bien que npm soit le gestionnaire de paquets par défaut pour Node.js, une alternative performante existe : Yarn. Développé par Facebook en 2016, Yarn a été créé pour améliorer la vitesse, la sécurité et la fiabilité de la gestion des dépendances.

Dans cette section, nous verrons ce qu’est Yarn, en quoi il diffère de npm et dans quels cas il peut être préférable d’utiliser Yarn plutôt que npm.

Qu’est-ce que Yarn ?

Yarn (Yet Another Resource Negotiator) est un gestionnaire de paquets similaire à npm, mais axé sur la performance, la sécurité et la cohérence. Il offre :

🚀 Une installation des dépendances plus rapide grâce aux téléchargements parallèles
🔐 Une gestion des paquets plus sécurisée grâce à la vérification des sommes de contrôle
📦 Une résolution fiable des dépendances grâce à un cache hors ligne

Pour vérifier si Yarn est installé, exécutez :

yarn -v

Si vous ne l’avez pas encore, vous pouvez l’installer globalement à l’aide de npm :

npm install --global yarn

Une fois installé, vous pouvez l’utiliser comme npm pour gérer les dépendances.

Différences entre npm et Yarn

Bien que npm et Yarn aient la même fonction, ils présentent quelques différences clés :

Fonctionnalité	npm	Yarn
Vitesse	Installe les paquets un par un	Installe plusieurs paquets en parallèle (plus rapide)
Fichier de verrouillage	`package-lock.json`	`yarn.lock`
Cache hors ligne	Non disponible (par défaut)	Peut installer des paquets à partir du cache local
Sécurité	Vérifie l’intégrité des paquets, mais ne prend pas en charge le calcul des sommes de contrôle.	Utilise la vérification de somme de contrôle pour la sécurité
Prise en charge des monorepos	Prend en charge les espaces de travail, mais n’est pas optimisé.	Prise en charge intégrée des monorepos avec espaces de travail

Comparaison des performances

Lors de l’installation des dépendances, Yarn est souvent plus rapide car il télécharge les paquets en parallèle, tandis que npm les installe séquentiellement.

Par exemple, pour installer toutes les dépendances d’un projet :

# With npm
npm install

# With Yarn
yarn install

Yarn peut également installer des paquets à partir d’un cache local, ce qui signifie qu’il n’a pas toujours besoin de récupérer les dépendances sur Internet.

Commandes Yarn courantes vs. npm

De nombreuses commandes npm ont un équivalent dans Yarn :

Action	Commande npm	Commande de Yarn
Initialiser un nouveau projet	`npm init`	`yarn init`
Installer toutes les dépendances	`npm install`	`yarn install`
Installer un paquet	`npm install package-name`	`yarn add package-name`
Installer une dépendance de développement	`npm install package-name --save-dev`	`yarn add package-name --dev`
Retirer un colis	`npm uninstall package-name`	`yarn remove package-name`
Mettre à jour tous les packages	`npm update`	`yarn upgrade`
Exécuter un script	`npm run script-name`	`yarn script-name`

Par exemple, installer axios avec Yarn :

yarn add axios

Quand utiliser Yarn plutôt que npm

Le fil est un excellent choix lorsque :

Vous souhaitez des installations plus rapides ? Yarn installe plusieurs paquets en parallèle, ce qui le rend plus rapide que npm.
Vous avez besoin d’une meilleure cohérence des dépendances ? Le fichier yarn.lock garantit que tous les développeurs utilisent les mêmes versions de dépendances.
Vous travaillez avec des monorepos ? Les espaces de travail intégrés de Yarn facilitent la gestion de plusieurs projets au sein d’un même dépôt.
Vous souhaitez une sécurité renforcée ? La vérification par somme de contrôle de Yarn empêche l’installation de paquets corrompus.

Néanmoins, npm s’est considérablement amélioré ces dernières années, notamment avec la version 7 et suivantes, ce qui en fait un choix viable pour la plupart des projets.

Passer de npm à Yarn

Si votre projet a été initialement configuré avec npm mais que vous souhaitez passer à Yarn, vous pouvez :

1️⃣ Supprimez le dossier node_modules et le fichier package-lock.json

rm -rf node_modules package-lock.json

2️⃣ Exécutez Yarn pour installer les dépendances

yarn install

Cela générera un fichier yarn.lock, garantissant ainsi que toutes les dépendances seront gérées par Yarn à l’avenir.

npm et Yarn sont deux outils puissants de gestion de paquets. Le choix entre les deux dépend des besoins de votre projet :

✔️ Utilisez npm si vous souhaitez le gestionnaire de paquets par défaut, largement utilisé et compatible avec la plupart des projets.
✔️ Utilisez Yarn si vous avez besoin d’installations plus rapides, d’une sécurité renforcée et de la prise en charge des monorepos.

En définitive, ces deux outils vous permettent d’installer, de gérer et de publier efficacement des paquets JavaScript.

Comment créer une librairie npm

Créer une librairie npm est un excellent moyen de partager du code réutilisable, de contribuer à la communauté open source, voire de simplifier le développement de plusieurs projets. Dans cette section, nous détaillerons étape par étape le processus de configuration, de codage et de préparation d’une librairie en vue de sa publication sur npm.

Créer une librairie npm : débuter avec un nouveau forfait

Avant d’écrire du code, vous devez configurer un package npm. Suivez ces étapes :

Étape 1 : Créer un nouveau dossier de projet

mkdir my-awesome-library
cd my-awesome-library

Étape 2 : Initialiser npm

Exécutez la commande suivante pour créer un fichier package.json :

npm init

Il vous sera demandé de saisir des informations telles que :

Nom du package
Version
Description
Point d’entrée (par défaut : index.js)
Auteur
Licence

💡 Pour ignorer les invites et créer un fichier package.json par défaut, utilisez :

npm init -y

Écrire du code modulaire et réutilisable

Dans le dossier du projet, créez un fichier nommé index.js et ajoutez le code suivant :

function formatDate(date) {
  if (!(date instanceof Date)) {
    throw new Error("Invalid date");
  }
  return date.toISOString().split("T")[0];
}

module.exports = { formatDate };

Ajout de dépendances et de dépendances homologues

Votre librairie peut dépendre de packages externes. Par exemple, utilisons date-fns pour une meilleure mise en forme des dates.

Pour l’installer comme dépendance, exécutez :

npm install date-fns

Ensuite, modifiez index.js pour utiliser date-fns :

const { format } = require("date-fns");

function formatDate(date) {
  if (!(date instanceof Date)) {
    throw new Error("Invalid date");
  }
  return format(date, "yyyy-MM-dd");
}

module.exports = { formatDate };

Si vous créez une librairie spécifique à React, vous devez ajouter React comme dépendance homologue :

npm install react --save-peer

Cela garantit que les utilisateurs de votre librairie installent React séparément, évitant ainsi les conflits de versions.

Avant de publier, vous devez tester le bon fonctionnement de votre package lorsqu’il est installé comme dépendance.

Étape 4 : Lier le package localement

Exécutez la commande suivante dans votre dossier de paquets :

npm link

Ensuite, dans un autre projet où vous souhaitez utiliser votre package, accédez à ce projet et exécutez :

npm link my-awesome-library

Vous pouvez maintenant importer et utiliser votre fonction :

const { formatDate } = require("my-awesome-library");

console.log(formatDate(new Date())); // Output: 2025-02-04 (or the current date)

Une fois que vous êtes satisfait de votre package, il est temps de le publier sur npm.

Comment publier votre librairie npm

Maintenant que nous avons créé notre package npm, l’étape suivante consiste à le publier sur le registre npm afin que d’autres puissent l’installer et l’utiliser. Dans cette section, nous verrons comment publier le package étape par étape.

Création d’un compte npm

Avant de publier, vous avez besoin d’un compte npm.

Étape 1 : Inscrivez-vous à npm

Rendez-vous sur https://www.npmjs.com/signup et créez un compte.
Vérifiez votre adresse e-mail.

Étape 2 : Connectez-vous à npm depuis le terminal.

Exécutez la commande suivante dans votre terminal :

npm login

Vous serez invité à saisir :

Votre nom d’utilisateur npm
Votre mot de passe
Votre adresse e-mail (associée à votre compte npm)

Si la connexion réussit, vous verrez un message :

Logged in as your-username on https://registry.npmjs.org/

Configuration du fichier package.json pour la publication

Étape 3 : Assurez-vous que le nom de votre colis est unique

Chaque paquet npm nécessite un nom unique. Exécutez la commande suivante pour vérifier si le nom souhaité est disponible :

npm search my-awesome-library

Si le nom est déjà pris, vous devrez modifier le fichier package.json et changer le champ « name ».

Étape 4 : Ajouter des métadonnées et des mots-clés

Ouvrez le fichier package.json et assurez-vous qu’il contient des métadonnées utiles :

{
  "name": "my-awesome-library",
  "version": "1.0.0",
  "description": "A simple npm package for formatting dates",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "https://github.com/yourusername/my-awesome-library.git"
  },
  "keywords": ["date", "formatter", "utility", "npm package"],
  "author": "Your Name <your-email@example.com>",
  "license": "MIT"
}

🔹 dépôt – Utile si vous prévoyez d’héberger le projet sur GitHub.
🔹 mots-clés – Permettent aux utilisateurs de trouver votre package sur npm.
🔹 licence – Spécifie les conditions d’utilisation de votre package (par exemple, MIT, GPL, etc.).

Publication du paquet

Étape 5 : Publiez votre package sur npm

Exécutez la commande suivante dans le dossier de votre projet :

npm publish

En cas de succès, vous obtiendrez un résultat similaire à :

+ my-awesome-library@1.0.0

Votre colis est maintenant disponible à l’adresse suivante :

📌 https://www.npmjs.com/package/my-awesome-library

Étape 6 : Apporter des modifications et mettre à jour le package

Pour publier une nouvelle version, mettez à jour le champ « version » dans le fichier package.json. npm utilise le versionnage sémantique (SemVer).

Correctif : Corrections de bugs (1.0.0 → 1.0.1)
Mise à jour mineure : Nouvelles fonctionnalités, rétrocompatibilité (1.0.0 → 1.1.0)
Mise à jour majeure : Changements importants (1.0.0 → 2.0.0)

Au lieu de mettre à jour manuellement le fichier package.json, utilisez :

npm version patch   # 1.0.0 → 1.0.1
npm version minor   # 1.0.0 → 1.1.0
npm version major   # 1.0.0 → 2.0.0

Ensuite, publiez la nouvelle version :

npm publish

Si vous publiez accidentellement un paquet et que vous devez le supprimer :

npm unpublish my-awesome-library --force

⚠️ Remarque : Vous ne pouvez dépublier un package que dans les 72 heures suivant sa publication.

🎯 Vous avez publié votre librairie npm avec succès ! Les autres développeurs peuvent désormais l’installer à l’aide de :

npm install my-awesome-library

En respectant le versionnage sémantique, en rédigeant une documentation claire et en assurant la maintenance de votre package, vous contribuez à l’écosystème open-source et rendez votre code réutilisable.

Comment utiliser votre librairie npm dans un projet React

Maintenant que notre package npm est disponible, voyons comment l’installer, l’importer et l’utiliser dans un projet React créé avec Vite. Cette section vous guidera tout au long du processus, aussi bien avec npm qu’avec Yarn.

Installation de votre package

Étape 1 : Créer un nouveau projet React avec Vite (si nécessaire)

Si vous n’avez pas de projet React existant, créez-en un avec Vite :

Utilisation de npm

npm create vite@latest my-react-app --template react
cd my-react-app
npm install

Utiliser du Yarn

yarn create vite@latest my-react-app --template react
cd my-react-app
yarn install

Une fois l’installation terminée, vous pouvez démarrer le serveur de développement :

npm run dev

yarn dev

Étape 2 : Installez votre package npm

Installez maintenant la librairie npm que nous avons créée précédemment (my-awesome-library).

Utilisation de npm

npm install my-awesome-library

Utiliser du Yarn

yarn add my-awesome-library

Importer et utiliser la librairie dans un composant React

Une fois installée, vous pouvez utiliser la librairie à l’intérieur d’un composant React.

Ouvrez le fichier src/App.jsx et modifiez-le comme suit :

import React from "react";
import { formatDate } from "my-awesome-library";

function App() {
  const today = new Date();
  return (
    <div>
      <h1>Formatted Date</h1>
      <p>{formatDate(today)}</p>
    </div>
  );
}

export default App;

Maintenant, exécutez votre application Vite React :

npm run dev

Ou avec du Yarn :

yarn dev

Cela affichera une date formatée sur la page web, confirmant ainsi que notre librairie fonctionne !

Gestion des mises à jour et des versions des packages

Pour mettre à jour votre package npm dans votre projet :

Utilisation de npm :

npm update my-awesome-library

Utiliser du Yarn :

yarn upgrade my-awesome-library

Si vous souhaitez vérifier les dépendances obsolètes :

npm outdated

yarn outdated

Utilisation d’une version locale de votre package en développement

Si vous apportez encore des modifications à votre package npm et que vous souhaitez le tester dans votre projet React avant de le publier, vous pouvez utiliser npm link ou yarn link.

Étape 1 : Liez votre package localement

Accédez au dossier de projet de votre package :

cd ~/path-to-my-awesome-library
npm link

yarn link

Étape 2 : Utilisez-le dans votre projet React

Accédez à votre application React et liez le package :

cd ~/path-to-my-react-app
npm link my-awesome-library

yarn link my-awesome-library

Désormais, lorsque vous importerez et utiliserez my-awesome-library, c’est la version locale qui sera utilisée au lieu de la version publiée.

Publication d’une mise à jour de votre forfait

1️⃣ Mettez à jour le numéro de version dans package.json (utilisez npm version patch pour les petites mises à jour).
2️⃣ Exécutez npm publish pour publier la nouvelle version.
3️⃣ Exécutez npm update my-awesome-library dans votre projet React pour obtenir la dernière version.

Dernières réflexions sur l’utilisation des librairies npm dans React (Édition Vite)

À ce stade, vous devriez disposer d’un package npm entièrement fonctionnel et savoir comment l’installer, l’utiliser et le mettre à jour dans un projet React utilisant Vite.

✔️ Vite est plus rapide que Create React App et offre de meilleures performances pour le développement.
✔️ npm et Yarn simplifient la gestion des dépendances.
✔️ npm link permet des tests locaux avant publication.
✔️ La mise à jour régulière des dépendances garantit la stabilité.

Ce flux de travail est essentiel pour les développeurs qui cherchent à créer, maintenir et distribuer des composants React réutilisables ou des utilitaires JavaScript.

Bonnes pratiques pour les librairies npm et Yarn

Maintenant que vous avez créé, publié et utilisé votre propre package npm, il est essentiel de suivre les bonnes pratiques pour garantir sa fiabilité, sa maintenabilité et sa facilité d’utilisation. Cette section aborde les principes et techniques clés pour rendre votre librairie npm aussi professionnelle que possible.

Rédigez une documentation pertinente

Une librairie bien documentée aide les autres développeurs à comprendre comment l’utiliser efficacement.

Que doit contenir votre documentation ?

📌 Instructions d’installation
📌 Exemples d’utilisation
📌 Référence API (fonctions, paramètres, valeurs de retour)
📌 Historique des versions et des mises à jour
📌 Guide de contribution (si logiciel libre)

Par exemple, un simple fichier README.md pour ma-super-librairie :

# my-awesome-library

A simple npm package for formatting dates.

## Installation

### Using npm
```sh
npm install my-awesome-library

Utiliser du Yarn :

yarn add my-awesome-library

Usage

import { formatDate } from "my-awesome-library";

console.log(formatDate(new Date())); // Outputs: 2025-02-04

Suivre le versionnage sémantique (SemVer)

Le versionnage permet de maintenir la compatibilité et d’informer les utilisateurs des modifications. npm suit le versionnage sémantique (SemVer) :

ÉCHEC MAJEUR.MINEUR.PATCH

Type de changement	Exemple	Signification
Patch	`1.0.0 → 1.0.1`	Corrections de bugs, aucune modification majeure
Minor	`1.0.0 → 1.1.0`	Nouvelles fonctionnalités, aucune modification majeure
Major	`1.0.0 → 2.0.0`	Changements majeurs

💡 Pour mettre à jour automatiquement les versions, utilisez :

```sh
npm version patch   # Small bug fix
npm version minor   # New feature added
npm version major   # Breaking changes

Ensuite, publiez la nouvelle version :

npm publish

👉 Utilisez un système de versionnage approprié pour éviter de casser les projets qui dépendent de votre librairie.

Maintenez les dépendances à jour

La mise à jour régulière des dépendances améliore la sécurité, les performances et la compatibilité.

Vérifiez les dépendances obsolètes :

npm outdated

yarn outdated

Mise à jour des dépendances :

npm update

yarn upgrade

Écrivez des tests unitaires pour votre librairie npm

Les tests permettent de s’assurer que votre package fonctionne correctement avant la publication des mises à jour.

Installer un framework de test (Jest)

npm install --save-dev jest

Créer un fichier de test (index.test.js)

const { formatDate } = require("./index");

test("formats a date correctly", () => {
  expect(formatDate(new Date("2025-02-04"))).toBe("2025-02-04");
});

test("throws an error if input is not a date", () => {
  expect(() => formatDate("not a date")).toThrow("Invalid date");
});

Exécuter les tests

shCopyEditnpm test

👉 Vous pouvez utiliser CI/CD (par exemple, GitHub Actions) pour exécuter automatiquement des tests à chaque envoi.

Utilisation de l’intégration continue et de la livraison continue (CI/CD) pour la publication automatisée

Automatisez la publication avec GitHub Actions

Créez un fichier .github/workflows/publish.yml :

ymlCopyEditname: Publish to npm
on:
  push:
    branches:
      - main

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
          registry-url: "https://registry.npmjs.org/"
      - run: npm install
      - run: npm test
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

1️⃣ Créer un jeton npm :

Exécuter :

shCopyEditnpm token create

Copiez le jeton et ajoutez-le à vos secrets GitHub (NPM_TOKEN).

2️⃣ Envoyez le code sur GitHub → Publication automatique sur npm !

👉 L’automatisation de la publication évite les erreurs humaines et garantit le contrôle qualité.

Assurer la compatibilité multiplateforme

Utilisez les modules ES (import/export) pour une compatibilité optimale.
Incluez la prise en charge de CommonJS (require/module.exports) pour les environnements plus anciens.
Effectuez des tests avec différentes versions de Node.js via l’intégration continue et le déploiement continu (CI/CD).

Exemple de fichier package.json pour une double compatibilité :

jsonCopyEdit"type": "module",
"main": "index.cjs",
"exports": {
  "import": "./index.mjs",
  "require": "./index.cjs"
}

👉 Cela garantit que votre package fonctionne partout (Node.js, React, Next.js, etc.).

Conclusion

Félicitations ! 🎉 Vous avez appris avec succès à créer, publier et utiliser votre propre package npm, tout en comprenant les avantages de npm et de Yarn pour la gestion des packages.

Dans ce guide, nous avons abordé les points suivants :

✔️ Qu’est-ce que npm et pourquoi est-il important ?
✔️ Comment utiliser npm et Yarn pour gérer les dépendances
✔️ Comment créer un package npm réutilisable
✔️ Comment publier et mettre à jour votre package sur npm
✔️ Comment intégrer votre package dans un projet React avec Vite
✔️ Bonnes pratiques pour écrire, tester et maintenir votre librairie

En suivant ces étapes, vous avez franchi une étape importante vers le développement open source et la programmation modulaire, rendant votre code réutilisable à la fois pour vous-même et pour la communauté des développeurs.