0Pricing
Vue Academy · Lekcja

Publikowanie w npm i wersjonowanie semantyczne

Pola package.json (main, module, exports), changelogi, semantic-release oraz proces npm publish.

Publikowanie w npm i wersjonowanie semantyczne to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Przygotowanie do publikacji

Publikowanie sprawia, że bibliotekę można instalować za pomocą npm install. Wcześniej plik package.json musi poprawnie deklarować punkty wejścia, a zawartość publikowanych plików musi być kontrolowana.

main i module

main wskazuje kompilację CommonJS dla starszych narzędzi, a module wskazuje kompilację ESM, aby nowoczesne bundlery wybrały wersję obsługującą tree-shaking.

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

Mapa exports

Nowoczesne pole exports definiuje warunkowe punkty wejścia. Ma pierwszeństwo przed main/module i kontroluje dostęp do podścieżek.

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

Eksporty warunkowe

Warunki import, require i types pozwalają Node oraz bundlerom rozwiązywać odpowiednio właściwe pliki dla ESM, CommonJS i TypeScript.

Kontrolowanie publikowanych plików

Należy użyć pola files, aby określić listę dozwolonych plików, lub pliku .npmignore, aby określić listę wykluczeń. Publikowanie dist i wykluczenie źródeł oraz testów pozwala zachować niewielki rozmiar pakietu.

{
  "files": ["dist"]
}

.npmignore

Jeśli preferowana jest lista wykluczeń, plik .npmignore wyklucza pliki nawet wtedy, gdy nie ustawiono pola files. Bez żadnego z tych mechanizmów npm publikuje prawie wszystko.

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

Podgląd npm pack

Należy uruchomić npm pack, aby utworzyć archiwum tar i dokładnie sprawdzić, co zostanie opublikowane — to kluczowa kontrola bezpieczeństwa przed publikacją.

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

Wersjonowanie semantyczne

SemVer wykorzystuje format MAJOR.MINOR.PATCH. Wersję patch należy zwiększać przy poprawkach zgodnych wstecz, minor przy funkcjach zgodnych wstecz, a major przy zmianach powodujących niezgodność.

Polecenia npm version

Polecenie npm version zwiększa wersję w pliku package.json i jednocześnie tworzy tag git.

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 przesyła pakiet. Publiczne pakiety zakresowe przy pierwszej publikacji wymagają flagi --access public.

npm publish --access public

prepublishOnly i dist-tag

Skrypt prepublishOnly zapewnia uruchomienie świeżej kompilacji przed publikacją, a --tag next publikuje wersje przedpremierowe bez przesuwania tagu latest.

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

Szybkie sprawdzenie

Dodano nowy opcjonalny prop bez naruszania istniejącego użycia. Które zwiększenie wersji należy zastosować?

Podsumowanie

Należy skonfigurować main, module oraz warunkową mapę exports (import/require/types), a także kontrolować publikowane pliki za pomocą files lub .npmignore. Zawartość należy sprawdzić poleceniem npm pack, następnie zwiększyć wersję zgodnie z SemVer za pomocą npm version patch/minor/major i opublikować pakiet poleceniem npm publish (dodając --access public dla pakietów zakresowych).

Często zadawane pytania

Czy lekcja „Publikowanie w npm i wersjonowanie semantyczne” jest bezpłatna?

Tak — pełny tekst „Publikowanie w npm i wersjonowanie semantyczne” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Publikowanie w npm i wersjonowanie semantyczne”?

Pola package.json (main, module, exports), changelogi, semantic-release oraz proces npm publish. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Publikowanie w npm i wersjonowanie semantyczne”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Konfiguracja trybu biblioteki Vite
  2. Deklaracje TypeScript dla bibliotek komponentów
  3. Tree-shaking i automatyczny import
  4. Publikowanie w npm i wersjonowanie semantyczne
← Powrót do Vue Academy