Vue Academy · Leçon

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

Champs de package.json (main, module, exports), journaux des modifications, semantic-release et processus npm publish

Leçon 4 sur 413 étapes

Publier sur npm et gérer le versionnage sémantique est une leçon Vue 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 Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Préparer la publication

La publication rend votre bibliothèque installable via npm install. Auparavant, package.json doit déclarer correctement les points d’entrée et vous devez contrôler les fichiers publiés.

main et module

main pointe vers la compilation CommonJS destinée aux anciens outils ; module pointe vers la compilation ESM afin que les outils de regroupement modernes choisissent la version permettant l’élimination des branches inutilisées.

{
  "main": "./dist/my-ui-lib.cjs.js",
  "module": "./dist/my-ui-lib.es.js"
}

La carte exports

Le champ moderne exports définit des points d’entrée conditionnels. Il est prioritaire sur main/module et contrôle l’accès aux sous-chemins.

{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/my-ui-lib.es.js",
      "require": "./dist/my-ui-lib.cjs.js"
    },
    "./style.css": "./dist/style.css"
  }
}

Exportations conditionnelles

Les conditions import, require et types permettent respectivement à Node et aux outils de regroupement de résoudre le fichier approprié pour ESM, CommonJS et TypeScript.

Contrôler les fichiers publiés

Utilisez le champ files pour définir une liste blanche des éléments publiés, ou un fichier .npmignore pour définir une liste noire. Publier dist tout en excluant le code source et les tests permet de conserver un paquet de petite taille.

{
  "files": ["dist"]
}

.npmignore

Si vous préférez une liste noire, .npmignore exclut des fichiers même lorsqu’aucun champ files n’est défini. Sans l’un ni l’autre, npm publie presque tout.

# .npmignore
src
tests
vite.config.ts
*.log

Aperçu avec npm pack

Exécutez npm pack pour créer une archive tar et inspecter exactement ce qui serait publié : il s’agit d’une vérification de sécurité essentielle avant la mise en ligne.

npm pack
# inspect the listed files; nothing secret should appear

Versionnement sémantique

SemVer utilise MAJOR.MINOR.PATCH. Incrémentez correctif pour les corrections rétrocompatibles, mineure pour les fonctionnalités rétrocompatibles et majeure pour les modifications incompatibles.

Commandes npm version

La commande npm version incrémente la version dans package.json et crée une balise Git en une seule étape.

npm version patch   # 1.0.0 -> 1.0.1
npm version minor   # 1.0.1 -> 1.1.0
npm version major   # 1.1.0 -> 2.0.0

npm publish

npm publish téléverse le paquet. Les paquets publics à portée nécessitent l’option --access public lors de la première publication.

npm publish --access public

prepublishOnly et étiquette de distribution

Un script prepublishOnly garantit qu’une compilation à jour est exécutée avant la publication, et --tag next publie des préversions sans déplacer l’étiquette latest.

{
  "scripts": {
    "prepublishOnly": "npm run build"
  }
}
// npm publish --tag next

Vérification rapide

Vous ajoutez une propriété facultative sans modifier l’utilisation existante. Quelle incrémentation de version faut-il choisir ?

Récapitulatif

Configurez main, module et une carte exports conditionnelle (import/require/types), puis contrôlez les fichiers publiés avec files ou .npmignore. Prévisualisez le paquet avec npm pack, puis incrémentez les versions conformément à SemVer avec npm version patch/minor/major et publiez avec npm publish (en ajoutant --access public pour les paquets à portée).

Gratuit pour commencer

Apprends HTML 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
42
Leçons
156

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 Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

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

Champs de package.json (main, module, exports), journaux des modifications, semantic-release et processus npm publish Tu pratiques Vue 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 Vue Academy ?

Aucune expérience préalable n'est requise. Vue 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 Vue Academy ?

Oui. Chaque leçon Vue 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. Configurer le mode bibliothèque de Vite
  2. Déclarations TypeScript pour les bibliothèques de composants
  3. Élagage de l’arbre et import automatique
  4. Publier sur npm et gérer le versionnage sémantique
← Retour à Vue Academy