0Pricing
Vue Academy · Lezione

Pubblicazione su npm e versionamento semantico

Campi di package.json (main, module, exports), changelog, semantic-release, flusso di npm publish.

Pubblicazione su npm e versionamento semantico è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Prepararsi alla pubblicazione

La pubblicazione rende la libreria installabile tramite npm install. Prima di procedere, package.json deve dichiarare correttamente i punti di ingresso e Lei deve controllare quali file verranno inclusi nel pacchetto.

main e module

main indica la build CommonJS per gli strumenti meno recenti; module indica la build ESM, così i bundler moderni scelgono la versione compatibile con il tree-shaking.

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

La mappa exports

Il moderno campo exports definisce punti di ingresso condizionali. Ha la precedenza su main/module e controlla l'accesso ai sottopercorsi.

{
  "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"
  }
}

Export condizionali

Le condizioni import, require e types consentono rispettivamente a Node e ai bundler di risolvere il file corretto per ESM, CommonJS e TypeScript.

Controllare i file pubblicati

Utilizzi il campo files per specificare esplicitamente ciò che verrà incluso, oppure un file .npmignore per escludere ciò che non deve essere pubblicato. Includere dist ed escludere codice sorgente e test mantiene ridotte le dimensioni del pacchetto.

{
  "files": ["dist"]
}

.npmignore

Se preferisce specificare ciò che deve essere escluso, .npmignore esclude i file anche quando non è impostato alcun campo files. Senza l'uno né l'altro, npm pubblica quasi tutto.

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

Anteprima con npm pack

Esegua npm pack per creare un tarball e controllare esattamente che cosa verrebbe pubblicato: è una verifica di sicurezza fondamentale prima della messa online.

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

Versionamento semantico

SemVer utilizza MAJOR.MINOR.PATCH. Incrementi patch per correzioni di bug compatibili con le versioni precedenti, minor per funzionalità compatibili con le versioni precedenti e major per modifiche incompatibili.

Comandi npm version

Il comando npm version incrementa la versione in package.json e crea un tag git in un unico passaggio.

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 carica il pacchetto. I pacchetti pubblici con scope richiedono il flag --access public la prima volta.

npm publish --access public

prepublishOnly e dist-tag

Uno script prepublishOnly garantisce l'esecuzione di una build aggiornata prima della pubblicazione, mentre --tag next pubblica le versioni preliminari senza spostare il tag latest.

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

Verifica rapida

Aggiunge una nuova prop opzionale senza interrompere l'utilizzo esistente. Quale incremento di versione deve effettuare?

Riepilogo

Configuri main, module e una mappa exports condizionale (import/require/types), quindi controlli i file pubblicati con files o .npmignore. Esegua un'anteprima con npm pack, poi incrementi le versioni secondo SemVer utilizzando npm version patch/minor/major e pubblichi con npm publish, aggiungendo --access public per i pacchetti con scope.

Domande Frequenti

La lezione «Pubblicazione su npm e versionamento semantico» è gratuita?

Sì — il testo completo di «Pubblicazione su npm e versionamento semantico» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Pubblicazione su npm e versionamento semantico»?

Campi di package.json (main, module, exports), changelog, semantic-release, flusso di npm publish. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Pubblicazione su npm e versionamento semantico»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Configurazione della modalità libreria di Vite
  2. Dichiarazioni TypeScript per librerie di componenti
  3. Tree-shaking e import automatici
  4. Pubblicazione su npm e versionamento semantico
← Torna a Vue Academy