0Pricing
Frontend Academy · Leçon

Gestion des versions et publication sur npm

Utilisez le versionnage sémantique, automatisez la génération du journal des modifications avec Changesets ou standard-version et publiez la bibliothèque sur npm ou dans un registre privé.

Gestion des versions et publication sur npm est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Pourquoi publier sur npm ?

Si votre système de conception est utilisé par plusieurs applications, publiez-le sous forme de paquet. Les utilisateurs l'installent avec npm/yarn/pnpm, verrouillent les versions et effectuent les mises à jour selon leur propre calendrier.

Gestion sémantique des versions (SemVer)

Les versions suivent le format MAJOR.MINOR.PATCH. MAJOR : changements incompatibles. MINOR : nouvelles fonctionnalités compatibles avec les versions précédentes. PATCH : corrections de bogues uniquement.

Quand incrémenter la version

Vous avez renommé une propriété ? MAJOR. Vous avez ajouté une propriété facultative ? MINOR. Vous avez corrigé un bogue CSS ? PATCH. Les versions antérieures à 1.0 (0.x.y) peuvent introduire des ruptures dans MINOR — mais restez mesuré.

package.json — le manifeste

Configurez l'apparence de votre paquet sur npm.

{
  "name": "@yourorg/design-system",
  "version": "1.4.2",
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": { "import": "./dist/index.esm.js", "require": "./dist/index.cjs.js" },
    "./theme": "./dist/theme.js"
  },
  "files": ["dist", "README.md"],
  "peerDependencies": { "react": "^18.0.0" }
}

Sortie de compilation

Fournissez CommonJS, ESM et les déclarations de types. Des outils comme tsup ou vite build --lib s'en chargent.

// tsup.config.ts
export default {
  entry: ['src/index.ts'],
  format: ['cjs', 'esm'],
  dts: true,
  clean: true,
  external: ['react', 'react-dom']
};

// package.json: "build": "tsup"

peerDependencies

Répertoriez React/Vue/etc. comme peerDependencies afin que les utilisateurs emploient leur propre version. Les déclarer comme dépendances ordinaires les intègre deux fois — crochets défectueux, contexte défectueux.

Compatible avec l'élimination par arbre

Utilisez les exportations ESM et évitez les effets secondaires afin que les outils de regroupement puissent supprimer les composants inutilisés. Indiquez-le dans package.json : "sideEffects": false (ou répertoriez des fichiers spécifiques comme les fichiers CSS).

Publier sur npm

Connectez-vous une fois, puis publiez.

npm login

# Bump version + publish:
npm version patch   # 1.4.2 -> 1.4.3
npm publish

# Or scoped public package:
npm publish --access public

Automatiser les publications avec Changesets

Changesets est l'outil moderne pour publier des monorepos et des bibliothèques. Les demandes de fusion incluent un fichier de modifications décrivant le changement ; l'intégration continue de publication incrémente les versions et publie les paquets.

npm install -D @changesets/cli
npx changeset init

# In each PR:
npx changeset
# pick package, type (major/minor/patch), describe change
# commits .changeset/<random>.md

# CI on main:
npx changeset version  # bumps versions in package.json + generates changelog
npx changeset publish  # publishes to npm

Journal des modifications automatisé

Changesets génère automatiquement un CHANGELOG.md pour chaque paquet à partir des descriptions des modifications — les utilisateurs peuvent lire ce qui a changé dans chaque version.

Étiquettes de distribution npm

Utilisez les étiquettes de distribution pour les versions préliminaires : npm publish --tag beta publie la version sans remplacer la version latest. Les utilisateurs s'inscrivent avec npm install @yourorg/design-system@beta.

Registres privés

Les paquets internes peuvent utiliser GitHub Packages, GitLab Package Registry ou Verdaccio hébergé en interne. Configurez le tout avec .npmrc : @yourorg:registry=https://npm.pkg.github.com.

Déprécier les anciennes versions

Marquez une version comme obsolète pour avertir les installateurs.

npm deprecate @yourorg/design-system@1.0.0 'Use 2.x for React 18 support'

Vérification rapide

Si vous renommez une propriété d'un composant exporté, quel type d'incrément de version SemVer est requis ?

Récapitulatif : gestion des versions et publication

SemVer : MAJOR.MINOR.PATCH — rupture, fonctionnalité, correction. Compilez CJS + ESM + types (tsup, vite --lib). React/Vue comme peerDependencies. sideEffects:false pour l'élimination par arbre. Publiez avec npm ou automatisez avec Changesets. Le CHANGELOG est généré automatiquement. Utilisez les étiquettes de distribution pour les versions bêta. Les registres privés conviennent aux paquets internes.

Questions Fréquemment Posées

La leçon « Gestion des versions et publication sur npm » est-elle gratuite ?

Oui — le texte complet de « Gestion des versions et publication sur npm » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Gestion des versions et publication sur npm » ?

Utilisez le versionnage sémantique, automatisez la génération du journal des modifications avec Changesets ou standard-version et publiez la bibliothèque sur npm ou dans un registre privé. Tu pratiques Frontend 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 Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend 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 3 sur 4.

Combien de temps prend la leçon « Gestion des versions et publication sur npm » ?

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 Frontend Academy ?

Oui. Chaque leçon Frontend 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. Storybook : stories, contrôles et documentation
  2. Jetons de conception avec Style Dictionary
  3. Gestion des versions et publication sur npm
  4. Utiliser un système de conception
← Retour à Frontend Academy