Vue Academy · Lektion

Publicera till npm och använd Semantic Versioning

package.json-fält (main, module, exports), ändringsloggar, semantic-release och publiceringsflödet med npm.

Lektion 4 av 413 steg

Publicera till npm och använd Semantic Versioning är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.

Förbereda publicering

Publicering gör biblioteket installerbart via npm install. Innan dess måste package.json deklarera entrypunkterna korrekt, och ni måste styra vilka filer som levereras.

main och module

main pekar på CommonJS-bygget för äldre verktyg, medan module pekar på ESM-bygget så att moderna bundlare väljer versionen som stöder tree-shaking.

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

exports-kartan

Det moderna fältet exports definierar villkorade entrypunkter. Det har företräde framför main/module och styr åtkomsten till delvägar.

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

Villkorade exporter

Villkoren import, require och types låter Node och bundlare hitta rätt fil för ESM, CommonJS respektive TypeScript.

Styra publicerade filer

Använd fältet files för att uttryckligen ange vad som ska levereras, eller .npmignore för att blockera filer. Om ni levererar dist men utesluter källkod och tester hålls paketet litet.

{
  "files": ["dist"]
}

.npmignore

Om ni föredrar en blocklista kan .npmignore utesluta filer även när inget files-fält har angetts. Utan något av dessa publicerar npm nästan allt.

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

Förhandsgranska med npm pack

Kör npm pack för att skapa ett tar-arkiv och granska exakt vad som skulle publiceras – en viktig säkerhetskontroll innan paketet släpps.

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

Semantisk versionshantering

SemVer använder MAJOR.MINOR.PATCH. Höj patch för bakåtkompatibla felrättningar, minor för bakåtkompatibla funktioner och major för ändringar som bryter kompatibiliteten.

Kommandona npm version

Kommandot npm version höjer versionen i package.json och skapar en git-tagg i ett enda steg.

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 laddar upp paketet. Publika paket med scope behöver flaggan --access public första gången.

npm publish --access public

prepublishOnly och dist-tag

Ett prepublishOnly-skript säkerställer att ett färskt bygge körs före publiceringen, och --tag next publicerar förhandsversioner utan att flytta taggen latest.

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

Snabb kontroll

Ni lägger till en ny valfri prop utan att bryta befintlig användning. Vilken versionshöjning ska ni göra?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Konfigurera main, module och en villkorad exports-karta med import, require och types, och styr vilka filer som levereras med files eller .npmignore. Förhandsgranska med npm pack, höj sedan versionen enligt SemVer med npm version patch/minor/major och publicera med npm publish. Lägg till --access public för paket med scope.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 42
Lektioner: 156

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Publicera till npm och använd Semantic Versioning” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Publicera till npm och använd Semantic Versioning”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Publicera till npm och använd Semantic Versioning”?

package.json-fält (main, module, exports), ändringsloggar, semantic-release och publiceringsflödet med npm. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vue Academy?

Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Publicera till npm och använd Semantic Versioning”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vue Academy-lektionen?

Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Konfigurera Vite i library mode
TypeScript-deklarationer för komponentbibliotek
Tree-shaking och automatisk import
Publicera till npm och använd Semantic Versioning

← Tillbaka till Vue Academy