Frontend Academy · Ders

npm'ye Sürümleme ve Yayınlama

npm'ye Sürümleme ve Yayınlama, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Neden npm'ye Yayın Yapılır

Tasarım sisteminiz birden fazla uygulama tarafından kullanılıyorsa onu paket olarak yayınlayın. Kullananlar npm/yarn/pnpm ile kurar, sürümlere sabitler ve güncellemeyi kendi takvimlerine göre yapar.

Anlamsal Sürümleme (SemVer)

Sürümler MAJOR.MINOR.PATCH biçimini izler. MAJOR: geriye dönük uyumsuz değişiklikler. MINOR: geriye dönük uyumlu yeni özellikler. PATCH: yalnızca hata düzeltmeleri.

Sürüm Ne Zaman Artırılır

Bir özelliği yeniden mi adlandırdınız? MAJOR. Yeni, isteğe bağlı bir özellik mi eklediniz? MINOR. Bir CSS hatasını mı düzelttiniz? PATCH. 1.0 öncesi sürümler (0.x.y) MINOR sürümünde uyumsuz değişiklikler içerebilir — ancak ölçülü olun.

package.json — Bildirim Dosyası

Paketinizin npm'de nasıl görüneceğini yapılandırın.

{
  "name": "@yourorg/design-system",
  "version": "1.4.2",
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": { "import": "./dist/index.esm.js", "require": "./dist/index.cjs.js" },
    "./theme": "./dist/theme.js"
  },
  "files": ["dist", "README.md"],
  "peerDependencies": { "react": "^18.0.0" }
}

Derleme Çıktısı

CommonJS, ESM ve tür bildirimlerini sunun. tsup veya vite build --lib gibi araçlar bunu halleder.

// tsup.config.ts
export default {
  entry: ['src/index.ts'],
  format: ['cjs', 'esm'],
  dts: true,
  clean: true,
  external: ['react', 'react-dom']
};

// package.json: "build": "tsup"

peerDependencies

React/Vue vb. araçları peerDependencies olarak listeleyin; böylece kullananlar kendi sürümlerini kullanır. Bunları normal bağımlılık olarak işaretlemek, paketin iki kez eklenmesine ve kancaların ve bağlamın bozulmasına neden olur.

Ağaçtan Ayıklamaya Uygun

Kullanılmayan bileşenlerin paketleyiciler tarafından çıkarılabilmesi için ESM dışa aktarımlarını kullanın ve yan etkilerden kaçının. Bunu package.json içinde belirtin: "sideEffects": false (veya CSS gibi belirli dosyaları listeleyin).

npm'ye Yayınlama

Bir kez oturum açın, ardından yayınlayın.

npm login

# Bump version + publish:
npm version patch   # 1.4.2 -> 1.4.3
npm publish

# Or scoped public package:
npm publish --access public

Changesets ile Sürümleri Otomatikleştirme

Changesets, monorepo ve kütüphane yayınlama için modern bir araç setidir. Çekme istekleri, değişikliği açıklayan bir 'changeset' dosyası içerir; sürüm CI'si sürümleri artırıp yayınlar.

npm install -D @changesets/cli
npx changeset init

# In each PR:
npx changeset
# pick package, type (major/minor/patch), describe change
# commits .changeset/<random>.md

# CI on main:
npx changeset version  # bumps versions in package.json + generates changelog
npx changeset publish  # publishes to npm

Otomatik Değişiklik Günlüğü

Changesets, her paket için bir CHANGELOG.md dosyasını changeset açıklamalarından otomatik olarak oluşturur — kullananlar her sürümde nelerin değiştiğini okuyabilir.

npm Dağıtım Etiketleri

Ön sürümler için dağıtım etiketlerini kullanın: npm publish --tag beta, latest sürümünün üzerine yazmadan yayın yapar. Kullanmak isteyenler npm install @yourorg/design-system@beta ile katılır.

Özel Kayıt Depoları

Dahili paketler GitHub Packages, GitLab Package Registry veya kendi sunucunuzda barındırılan Verdaccio'yu kullanabilir. .npmrc ile yapılandırın: @yourorg:registry=https://npm.pkg.github.com.

Eski Sürümleri Kullanımdan Kaldırma

Yükleyenleri uyarmak için bir sürümü kullanımdan kaldırılmış olarak işaretleyin.

npm deprecate @yourorg/design-system@1.0.0 'Use 2.x for React 18 support'

Hızlı Kontrol

Dışa aktarılan bir bileşenin özelliğini yeniden adlandırırsanız hangi tür SemVer sürüm artışı gerekir?

Özet: Sürümleme ve Yayınlama

SemVer: MAJOR.MINOR.PATCH — uyumsuz değişiklik, özellik, düzeltme. CJS + ESM + türleri derleyin (tsup, vite --lib). React/Vue'yu peerDependencies olarak belirtin. Ağaçtan ayıklama için sideEffects:false kullanın. npm publish ile yayınlayın veya Changesets ile otomatikleştirin. CHANGELOG otomatik oluşturulur. Betalar için dağıtım etiketleri kullanın. Dahili paketler için özel kayıt depolarından yararlanın.

Sıkça Sorulan Sorular

“npm'ye Sürümleme ve Yayınlama” dersi ücretsiz mi?

Evet — “npm'ye Sürümleme ve Yayınlama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“npm'ye Sürümleme ve Yayınlama” dersinde ne öğreneceğim?

Anlamsal sürümlemeyi kullanmayı, Changesets veya standard-version ile değişiklik günlüğü oluşturmayı otomatikleştirmeyi ve kitaplığı npm'ye ya da özel bir kayıt deposuna yayınlamayı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“npm'ye Sürümleme ve Yayınlama” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Storybook: Hikâyeler, Denetimler ve Belgeler
Style Dictionary ile Tasarım Belirteçleri
npm'ye Sürümleme ve Yayınlama
Tasarım Sistemini Kullanma

← Frontend Academy Sayfasına Dön