Frontend Academy · Ders

npm ve package.json: bağımlılıklar betikler

npm init ile bir proje başlatın, çalışma zamanı ve geliştirme bağımlılıkları ekleyin, yeniden kullanılabilir npm betikleri yazın ve semver'i öğrenin.

npm ve package.json: bağımlılıklar betikler, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. 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.

npm Nedir?

npm (Node Package Manager), proje bağımlılıklarını ve betiklerini yönetir. Ne yükleneceğini öğrenmek için package.json dosyasını okur ve kesin sürümleri kaydetmek için package-lock.json dosyasını yazar. npm kayıt deposunda iki milyondan fazla paket yayımlanmıştır.

Proje Başlatma

npm init -y, varsayılan değerlerle bir package.json oluşturur. -y seçeneği, soru sormadan tüm varsayılanları kabul eder.

mkdir my-project && cd my-project
npm init -y
# Creates package.json

package.json Dosyası

Önemli alanlar: name, version, description, main (giriş noktası), scripts, dependencies, devDependencies.

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.3.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

Paketleri Yükleme

npm install package, bağımlılıklara ekler. npm install -D package, devDependencies'e ekler (üretimde gerekmez). Bağımsız değişken olmadan kullanılan npm install, package.json içindeki her şeyi yükler.

npm install react react-dom      # production dep
npm install -D vite jest eslint  # dev deps only
npm install                      # install all from package.json

Anlamsal Sürümleme

npm semver kullanır: major.minor.patch. ^ ön eki uyumlu güncellemelere (aynı major sürümüne) izin verir. ~ ön eki yalnızca patch güncellemelerine izin verir. Kesin sürümlerde ön ek bulunmaz.

"react": "^18.3.0"  // 18.3.0 to < 19.0.0 (compatible)
"lodash": "~4.17.21" // 4.17.21 to < 4.18.0 (patch only)
"fixed": "1.2.3"     // exactly 1.2.3

npm Betikleri

Komutları scripts alanında tanımlayın. npm run scriptname ile çalıştırın. Yerleşik betikler (test, start), doğrudan npm test veya npm start ile çalıştırılır.

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
  "test": "jest --coverage",
  "lint": "eslint src",
  "typecheck": "tsc --noEmit"
}

npm run ve npx

npm run, package.json içindeki bir betiği çalıştırır. npx, node_modules içindeki bir paketi çalıştırır veya paketi indirip geçici olarak çalıştırır. npx create-vite@latest gibi tek seferlik komutlar için kullanışlıdır.

package-lock.json

package-lock.json, yüklenen her paketin (ve geçişli bağımlılıklarının) kesin sürümünü kaydeder. Tüm geliştiricilerin ve sürekli tümleştirme ortamlarının aynı sürümleri kullanmasını sağlamak için dosyayı depoya ekleyin. Dosyayı hiçbir zaman elle düzenlemeyin.

node_modules ve .gitignore

node_modules klasörünü hiçbir zaman depoya eklemeyin; boyutu yüzlerce MB olabilir. Her zaman .gitignore dosyasına ekleyin. Herkes bunu npm install ile geri yükleyebilir.

# .gitignore
node_modules/

Paketleri Güncelleme ve Kaldırma

npm update, paketleri semver aralıkları içinde günceller. npm outdated, nelerin güncellenebileceğini gösterir. npm uninstall package, bir paketi kaldırır.

npm outdated                # show outdated packages
npm update react             # update to latest compatible
npm uninstall lodash         # remove package

npm ile yarn ve pnpm karşılaştırması

npm alternatifleri: yarn (daha hızlı, çalışma alanları ve Plug'n'Play), pnpm (disk alanını verimli kullanan sembolik bağlantı deposu, katı bağımlılık kuralları ve monorepo'lar için en yüksek hız). Temel komutlar üçünde de benzerdir.

# pnpm equivalents:
pnpm install
pnpm add react
pnpm add -D vite
pnpm run dev

Kısa Kontrol

npm install -D jest çalıştırılırken -D bayrağı ne yapar?

Özet: npm ve package.json

npm init, package.json dosyasını oluşturur. npm install, bağımlılıkları ekler. Geliştirme bağımlılıkları için -D kullanılır. semver içindeki ^ işareti uyumlu güncellemeleri belirtir. Betikler, npm run ile komutları çalıştırır. package-lock.json, tam sürümleri kaydeder — bu dosyayı depoya kaydediniz. node_modules, .gitignore dosyasına eklenir. npx, tek seferlik paket komutlarını çalıştırır.

Sıkça Sorulan Sorular

“npm ve package.json: bağımlılıklar betikler” dersi ücretsiz mi?

Evet — “npm ve package.json: bağımlılıklar betikler” 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 ve package.json: bağımlılıklar betikler” dersinde ne öğreneceğim?

npm init ile bir proje başlatın, çalışma zamanı ve geliştirme bağımlılıkları ekleyin, yeniden kullanılabilir npm betikleri yazın ve semver'i öğ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 2. dersidir.

“npm ve package.json: bağımlılıklar betikler” 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

ES Modülleri: import export ve dinamik import
npm ve package.json: bağımlılıklar betikler
Vite: geliştirme sunucusu ve derleme
Paketleme Kavramları: ağaç sarsma kod bölme

← Frontend Academy Sayfasına Dön