React Academy · Leçon

Publier sur npm et gérer le versionnage sémantique

Automatisez les versions avec changesets ou semantic-release et publiez des paquets à portée définie dans le registre npm

Leçon 4 sur 413 étapes

Publier sur npm et gérer le versionnage sémantique est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

npm publish --dry-run

Avant de publier, exécutez toujours npm publish --dry-run. Cette commande simule la publication sans rien téléverser réellement et vous montre précisément quels fichiers seraient inclus, leur taille ainsi que le contenu de l’archive tar du paquet. Elle permet de détecter les erreurs courantes, comme l’inclusion accidentelle de fichiers source ou l’absence du répertoire dist.

Contrôler les fichiers publiés

Contrôlez ce qui est publié à l’aide du champ files de package.json : "files": ["dist", "README.md"]. Cette approche par liste blanche est plus sûre que .npmignore, qui fonctionne comme une liste noire et peut laisser fuiter des fichiers sensibles si vous oubliez de les y ajouter. Incluez toujours dist, les déclarations de types et la documentation. N’incluez jamais src, les tests ou node_modules.

Principes du versionnage sémantique

Les paquets npm suivent le versionnage sémantique (semver) : MAJOR.MINOR.PATCH. Incrémentez MAJOR pour les changements incompatibles, comme la suppression de propriétés ou la modification des signatures de l’API. Incrémentez MINOR pour les nouvelles fonctionnalités rétrocompatibles, comme de nouveaux composants ou de nouvelles propriétés facultatives. Incrémentez PATCH pour les corrections de bogues rétrocompatibles. La version 0.x.x est considérée comme pré-stable : tout peut encore y devenir incompatible.

Versions préliminaires

Les identifiants de préversion indiquent qu’une version n’est pas prête pour la production : 1.0.0-alpha.1 pour les premières versions expérimentales, 1.0.0-beta.2 pour les versions dont les fonctionnalités sont terminées mais qui peuvent encore contenir des bogues, et 1.0.0-rc.1 (version candidate) pour les versions prêtes à être testées une dernière fois. Publiez les préversions avec npm publish --tag beta afin qu’elles ne deviennent pas l’installation par défaut.

L’outil Changesets

Changesets est l’outil standard de gestion du versionnage des paquets et des journaux des modifications dans les bibliothèques de composants. Processus : les contributeurs exécutent yarn changeset add pour consigner les modifications et leur type (major/minor/patch). L’intégration continue exécute yarn changeset version pour augmenter les versions des paquets. La publication exécute yarn changeset publish pour les publier sur npm.

Génération automatique de CHANGELOG

Changesets génère et entretient automatiquement CHANGELOG.md à partir des fichiers de modifications validés par les contributeurs. Chaque entrée comprend le numéro de version, la date de publication et la description des modifications. Vous obtenez ainsi un historique lisible de chaque version sans devoir entretenir manuellement le journal des modifications.

semantic-release comme solution alternative

semantic-release est un outil de versionnage entièrement automatisé qui détermine la prochaine version à partir de messages de commit conventionnels (feat: → minor, fix: → patch, BREAKING CHANGE: → major). Il augmente la version, génère le journal des modifications et publie sur npm — le tout étant déclenché par l’intégration continue lors de la fusion dans main. Aucune gestion manuelle des versions.

Accès npm : public ou restreint

Les paquets sans portée (my-component) sont toujours publics. Les paquets à portée (@myorg/my-component) sont restreints (privés) par défaut : rendez-les publics avec npm publish --access public. Les paquets restreints nécessitent un compte npm payant ou une organisation. Vérifiez les paramètres d’accès avant votre première publication.

Provenance npm

La provenance npm relie votre paquet publié à son commit git précis de manière vérifiable. Activez-la avec npm publish --provenance dans GitHub Actions. Les utilisateurs peuvent vérifier que le paquet installé a été construit à partir du commit source exact affiché sur la page du registre npm. Cela renforce considérablement la sécurité de la chaîne logistique logicielle.

Déprécier les anciennes versions

Lorsqu’une version contient un bogue critique ou un changement incompatible, dépréciez-la : npm deprecate your-package@1.2.3 "Security vulnerability, upgrade to 1.2.4". npm affiche un avertissement de dépréciation à toute personne qui installe cette version. Cela ne supprime pas la version — npm ne supprime pas par défaut les versions publiées — mais avertit les utilisateurs qu’ils doivent effectuer une mise à niveau.

Nommage des paquets à portée

Les paquets à portée utilisent le format @scope/package-name. La portée correspond généralement à votre nom d’utilisateur npm ou au nom de votre organisation. Les paquets à portée indiquent clairement qui en assure la maintenance et évitent les conflits de noms avec les paquets sans portée. Utilisez des paquets à portée pour les paquets privés ainsi que pour les paquets à code source ouvert associés à votre organisation.

Versionnage sémantique : MAJOR ou MINOR

Selon le versionnage sémantique, dans quel cas devez-vous incrémenter le numéro de version MAJOR ?

Récapitulatif de la leçon : publication et versionnage

Utilisez npm publish --dry-run pour prévisualiser la publication et le champ des fichiers pour contrôler ce qui est publié. Versionnage sémantique : MAJOR pour les changements incompatibles, MINOR pour les nouvelles fonctionnalités, PATCH pour les corrections. Les préversions utilisent les balises -alpha/-beta/-rc. Changesets automatise le versionnage et la génération de CHANGELOG pour les bibliothèques développées en équipe. semantic-release automatise le processus à partir des commits conventionnels. Activez --provenance pour renforcer la sécurité de la chaîne logistique logicielle. Dépréciez les versions défectueuses avec npm deprecate.

Gratuit pour commencer

Apprends React avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours
88
Leçons
324

Questions Fréquemment Posées

La leçon « Publier sur npm et gérer le versionnage sémantique » est-elle gratuite ?

Oui — le texte complet de « Publier sur npm et gérer le versionnage sémantique » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Publier sur npm et gérer le versionnage sémantique » ?

Automatisez les versions avec changesets ou semantic-release et publiez des paquets à portée définie dans le registre npm Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Publier sur npm et gérer le versionnage sémantique » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Regrouper avec Rollup et tsup pour les bibliothèques
  2. Sortie de paquet double ESM et CJS
  3. Dépendances homologues et élimination des branches mortes
  4. Publier sur npm et gérer le versionnage sémantique
← Retour à React Academy