# npm ve modern JavaScript paket ekosistemi

> npm ile JavaScript bağımlılıklarını yönetmek, package.json dosyasını doğru yapılandırmak ve paket ekosisteminde karşılaşılan pratik sorunları anlatıyorum.

- Yayın: 2018-08-05
- Kategori: Araçlar & Teknolojiler
- Etiketler: JavaScript, npm
- Okuma süresi: 3 dk okuma
- Kaynak: https://www.muhammetsafak.com.tr/blog/npm-ve-modern-javascript-paket-ekosistemi/
- Dil: tr-TR
- Yazar: Muhammet Şafak

---
PHP dünyasında Composer'ı benimsedikten sonra "her dilin buna benzer bir bağımlılık yöneticisi olmalı" diye düşünmüştüm. JavaScript tarafında npm (Node Package Manager) yıllardır bu rolü üstleniyor. Bir süredir Vue ve frontend projeleri üzerinde çalışırken npm ile ilişkim de derinleşti. Bu yazıda günlük pratikte öğrendiklerimi derliyorum.

## npm nedir?

**npm**, JavaScript paketlerini kurmayı, paylaşmayı ve yönetmeyi sağlayan bir package manager'dır. Node.js ile birlikte gelir; aynı zamanda dünyanın en büyük yazılım paket deposuna (registry) erişim noktasıdır.

`package.json` dosyası, bir projenin kimliğini ve bağımlılıklarını tanımlar. Composer'daki `composer.json` dosyasına karşılık geldiğini düşünebilirsiniz:

```json
{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "vue": "^2.5.0"
  },
  "devDependencies": {
    "webpack": "^4.0.0",
    "vue-loader": "^15.0.0"
  }
}
```

## dependencies ve devDependencies ayrımı

Bu iki bölümü birbirine karıştırmak kolay. Kural basit: production ortamında çalışması gereken paketler `dependencies`'e, yalnızca geliştirme sırasında kullanılan paketler `devDependencies`'e gidiyor.

- `vue`, `axios` → `dependencies` (çalışma zamanında gerekli)
- [`webpack`](/blog/webpack-e-gecis-gulp-tan-modul-paketlemeye), `babel`, `eslint` → `devDependencies` (derleme/geliştirme aracı)

```bash
# Üretim bağımlılığı olarak ekle
npm install axios

# Geliştirme bağımlılığı olarak ekle
npm install --save-dev webpack
```

Neden önemli? Sunucuda `npm install --production` çalıştırdığınızda yalnızca `dependencies` kurulur; `devDependencies` atlanır. Bu, üretim ortamının gereksiz paketlerle şişirilmemesini sağlar.

## package-lock.json dosyası

npm, paket kurulumundan sonra `package-lock.json` adlı bir dosya oluşturuyor. Bu dosya, kurulan paketlerin ve alt bağımlılıklarının tam sürümlerini kilitleyor. Composer'daki `composer.lock` ile aynı amaca hizmet ediyor.

Bu dosyayı Git'e dahil etmek önemli. "Bende çalışıyordu" sorununu önlemek için ekipteki herkesin ya da sunucunun aynı sürümleri kurması gerekiyor. `package-lock.json` bu güvenceyi sağlıyor.

Kilitlenen sürümlerle kurmak için:

```bash
npm ci
```

`npm install` yerine `npm ci` kullanmak, `package-lock.json` dosyasına tam uyumu zorunlu kılıyor ve `node_modules` klasörünü temizden inşa ediyor. CI ortamları için ideal.

## Sürüm aralıkları

`package.json` içindeki sürüm belirteçleri bazen kafa karıştırıcı olabiliyor:

- `"axios": "0.18.0"` — tam bu sürümü kur
- `"axios": "^0.18.0"` — 0.18.0 ve üstü, ama 1.0.0 altı (küçük/yama güncellemelerine izin ver)
- `"axios": "~0.18.0"` — 0.18.0 ve üstü, ama 0.19.0 altı (yalnızca yama güncellemeleri)

Çoğu projede `^` kullanılıyor; bu "uyumlu güncellemelere aç" anlamına geliyor. `package-lock.json` kurulu tam sürümü sakladığından, `npm ci` ile bu esneklik kontrol altında tutuluyor.

## npm scripts

`package.json` içindeki `scripts` bölümü çok kullanılan bir özellik. Derleme komutlarını, test çalıştırıcıları gibi komutları kısaltılmış adlarla tanımlayabilirsiniz:

```json
{
  "scripts": {
    "dev": "webpack --watch --mode development",
    "build": "webpack --mode production",
    "lint": "eslint src/"
  }
}
```

Tanımladıktan sonra:

```bash
npm run dev
npm run build
npm run lint
```

Bu sayede projeye yeni katılan biri hangi aracı nasıl çalıştıracağını öğrenmek zorunda kalmıyor; `package.json` bir tür proje rehberi işlevi görüyor.

## node_modules ve .gitignore

`node_modules` klasörü büyük olabilir, bazen yüzlerce megabayt. Kesinlikle Git'e dahil edilmemeli. `.gitignore` dosyasına:

```
node_modules/
```

Bu satırı eklemek yeterli. Paketleri yeniden kurmak için `npm install` komutu `package.json` ve `package-lock.json` dosyalarına bakarak gereken her şeyi indiriyor.

## Yarn alternatifi

2018 itibarıyla Yarn, npm'e ciddi bir alternatif hâline gelmiş durumda. Facebook tarafından geliştirilen Yarn, özellikle performans ve güvenilirlik açısından npm'e göre bazı avantajlar sunuyor. `package.json` formatıyla tam uyumlu olduğundan iki araç aynı proje üzerinde sorunsuz kullanılabiliyor. Hangi aracı seçeceğiniz çoğunlukla ekip tercihine ya da alışkanlığa bağlı.

## Sonuç

npm'i düzgün kullanmak, JavaScript projelerinde bağımlılık kaosunu önlemenin temel adımı. `dependencies`/`devDependencies` ayrımına uymak, `package-lock.json` dosyasını repoya dahil etmek ve `npm scripts` ile çalışma komutlarını standartlaştırmak — bunlar küçük ama düzenli bir proje yapısı için kritik alışkanlıklar.