PricingLoginStart free
Vue Academy · Les

Publiceren naar npm en semantic versioning

package.json-velden (main, module, exports), changelogs, semantic-release en de npm-publishworkflow.

Les 4 van 413 stappen

Publiceren naar npm en semantic versioning is een gratis Vue Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vue Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vue Academy bevat in totaal 4 lessen.

Voorbereiden op publicatie

Door publicatie kan je bibliotheek via npm install worden geïnstalleerd. Daarvoor moet package.json de entrypoints correct declareren en moet je bepalen welke bestanden worden meegeleverd.

main en module

main verwijst naar de CommonJS-build voor oudere hulpprogramma's; module verwijst naar de ESM-build, zodat moderne bundelaars de versie kiezen waarop tree-shaking kan worden toegepast.

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

De exports-map

Het moderne veld exports definieert voorwaardelijke entrypoints. Dit veld heeft voorrang op main/module en bepaalt welke subpaden toegankelijk zijn.

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

Voorwaardelijke exports

Met de voorwaarden import, require en types kunnen Node en bundelaars respectievelijk het juiste bestand vinden voor ESM, CommonJS en TypeScript.

Gepubliceerde bestanden beheren

Gebruik het veld files om een lijst met toegestane bestanden op te geven, of gebruik een .npmignore als blokk 목록. Door dist mee te leveren en bron- en testbestanden uit te sluiten, blijft het pakket klein.

{
  "files": ["dist"]
}

.npmignore

Als je liever een blokkeerlijst gebruikt, sluit .npmignore bestanden uit, zelfs wanneer er geen veld files is ingesteld. Zonder een van beide publiceert npm bijna alles.

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

Voorbeeld met npm pack

Voer npm pack uit om een tar-archief te maken en precies te bekijken wat er zou worden gepubliceerd. Dit is een belangrijke veiligheidscontrole vóór publicatie.

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

Semantische versies

SemVer gebruikt MAJOR.MINOR.PATCH. Verhoog patch voor achterwaarts compatibele foutoplossingen, minor voor achterwaarts compatibele functies en major voor wijzigingen die bestaande toepassingen breken.

npm version-opdrachten

De opdracht npm version verhoogt de versie in package.json en maakt in één stap een git-tag.

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

Met npm publish upload je het pakket. Pakketten met een openbare scope hebben de eerste keer de vlag --access public nodig.

npm publish --access public

prepublishOnly en dist-tag

Een script voor prepublishOnly zorgt ervoor dat vóór publicatie een verse build wordt uitgevoerd, en met --tag next publiceer je voorversies zonder de tag latest te verplaatsen.

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

Korte controle

Je voegt een nieuwe optionele prop toe zonder bestaand gebruik te breken. Welke versieverhoging kies je?

Beantwoord dit in de interactieve les

Samenvatting

Configureer main, module en een voorwaardelijke exports-map (import/require/types), en bepaal met files of .npmignore welke bestanden worden meegeleverd. Bekijk eerst het resultaat met npm pack, verhoog daarna de versies volgens SemVer met npm version patch/minor/major en publiceer met npm publish (met --access public voor pakketten met een scope).

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen
42
Lessen
156
Gratis beginnen met lerenBekijk de volledige cursus

Veelgestelde vragen

Is de les “Publiceren naar npm en semantic versioning” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “Publiceren naar npm en semantic versioning”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vue Academy bevat in totaal 4 lessen.

Wat leer ik in “Publiceren naar npm en semantic versioning”?

package.json-velden (main, module, exports), changelogs, semantic-release en de npm-publishworkflow. Je oefent met Vue Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Vue Academy te beginnen?

Ervaring vooraf is niet nodig. Vue Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.

Hoe lang duurt de les “Publiceren naar npm en semantic versioning”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Vue Academy?

Ja. Elke les over Vue Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

  1. Vite Library Mode configureren
  2. TypeScript-declaraties voor componentbibliotheken
  3. Tree-shaking en automatische imports
  4. Publiceren naar npm en semantic versioning
← Terug naar Vue Academy