Giriş: npm Script’lerinin Gücü ve Önemi

Giriş: npm Script’lerinin Gücü ve Önemi

Modern web geliştirme dünyasında, projelerin karmaşıklığı her geçen gün artmaktadır. Bu karmaşıklıkla başa çıkmak, geliştiricilerin tekrarlayan görevleri otomatikleştirmesini, tutarlılığı sağlamasını ve farklı ortamlar arasında uyumluluğu korumasını gerektirir. İşte tam bu noktada, npm script’leri devreye girer. npm (Node Package Manager), sadece paket yönetimi için değil, aynı zamanda projelerinizdeki çeşitli görevleri tanımlamak ve çalıştırmak için de güçlü bir araçtır.

npm script’leri, temel olarak package.json dosyanızda tanımlanan komut satırı komutlarıdır. Bu komutlar, projenizin geliştirme, test, derleme ve dağıtım gibi yaşam döngüsü boyunca ihtiyaç duyduğu tüm işlemleri kapsayabilir. Bir geliştirme sunucusu başlatmaktan, kodunuzu lint’lemekten, testleri çalıştırmaktan veya üretim için bir proje derlemekten tutun da, özel otomasyon görevlerine kadar her şeyi npm script’leri aracılığıyla yönetebilirsiniz.

Peki, neden doğrudan komut satırından çalıştırmak yerine npm script’leri kullanmalıyız? Birincisi, otomasyon ve verimlilik sağlar. Uzun ve karmaşık komutları tek bir kısa script adıyla çağırabilirsiniz. İkincisi, tutarlılık yaratır. Ekip üyeleri, her zaman aynı komutları kullanarak aynı sonuçları elde eder, bu da “benim makinemde çalışıyor” sorununu azaltır. Üçüncüsü, platformlar arası uyumluluk sunar. Örneğin, Windows’ta farklı çalışan bir komutun, Linux veya macOS’ta da sorunsuz çalışmasını sağlayacak araçlarla entegre edilebilirler. Son olarak, projenizin ihtiyaç duyduğu tüm araçları ve komutları tek bir merkezi yerde, yani package.json dosyasında belgelemiş olursunuz.

npm Script’lerinin Temelleri ve Tanımlanması

npm script’leri, projenizin kalbi olan package.json dosyasının scripts bölümünde tanımlanır. Bu bölüm, key-value çiftlerinden oluşur; key script’in adını, value ise çalıştırılacak komutu temsil eder. İşte basit bir örnek:

{
  "name": "my-awesome-project",
  "version": "1.0.0",
  "description": "A demo project using npm scripts",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Hata yok!\" && exit 0",
    "build": "webpack --config webpack.config.js",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Yukarıdaki örnekte:

• start: Projeyi başlatmak için node index.js komutunu çalıştırır.
• test: Basit bir test mesajı yazdırır. Gerçek bir test komutu genellikle bir test runner (Jest, Mocha vb.) çağırır.
• build: Projeyi derlemek için webpack komutunu kullanır.
• lint: Kod kalitesini kontrol etmek için eslint komutunu çalıştırır.

Bir script’i çalıştırmak için komut satırında npm run yapısını kullanırsınız. Örneğin, npm run build veya npm run lint. Bazı özel script’ler için (start, test, install), run kelimesini atlayabilirsiniz: npm start, npm test, npm install.

H3: Script’lere Bağımsız Değişkenler (Arguments) Geçirme

Bazen script’lerinize ek parametreler geçirmek isteyebilirsiniz. Bunu npm run -- şeklinde yapabilirsiniz. Çift tire (--), npm’e sonraki her şeyin script’in kendi komutuna iletilmesi gerektiğini bildirir.

{
  "scripts": {
    "dev": "webpack-dev-server",
    "dev:port": "webpack-dev-server --port"
  }
}

Şimdi, npm run dev:port -- 8081 komutu, webpack-dev-server --port 8081 komutunu çalıştıracaktır.

H3: Script’leri Zincirleme ve Paralel Çalıştırma

Birden fazla komutu tek bir script içinde çalıştırmak mümkündür:

• Sıralı Çalıştırma (&&): Bir komutun başarıyla tamamlanmasından sonra diğerini çalıştırır. Eğer ilk komut hata verirse, zincir durur.
• Paralel Çalıştırma (&): Tüm komutları aynı anda başlatır.

{
  "scripts": {
    "prebuild": "npm run clean && npm run lint",
    "build": "webpack",
    "dev:all": "npm run watch-css & npm run dev-server"
  }
}

Bu örnekte, prebuild script’i önce clean komutunu, ardından lint komutunu çalıştırır. dev:all ise watch-css ve dev-server komutlarını aynı anda başlatır.

Geliştirme Sürecinde Sık Kullanılan npm Script Senaryoları

npm script’leri, geliştirme iş akışınızın birçok aşamasında size yardımcı olabilir. İşte en yaygın senaryolardan bazıları:

H3: Geliştirme Sunucusu (Development Server) Başlatma

Tekrar tekrar manuel olarak bir geliştirme sunucusu başlatmak yerine, bunu bir script ile otomatikleştirebilirsiniz. Genellikle start veya dev adı verilir.

{
  "scripts": {
    "dev": "vite",
    "start": "react-scripts start",
    "serve": "nodemon server.js"
  }
}

• npm run dev: Vite tabanlı bir projeyi geliştirme modunda başlatır.
• npm start: Create React App projelerinde varsayılan geliştirme sunucusunu başlatır.
• npm run serve: Node.js tabanlı bir backend sunucusunu nodemon ile izleyerek başlatır, dosya değişikliklerinde otomatik yeniden başlatma sağlar.

H3: Kod Kalitesi ve Biçimlendirme (Linting & Formatting)

Kodunuzun belirli standartlara uygun olmasını sağlamak ve tutarlı bir biçimlendirme uygulamak için linting ve formatting araçlarını kullanırsınız. Bu araçları npm script’lerine entegre etmek, ekip genelinde kod kalitesini artırır.

{
  "scripts": {
    "lint": "eslint src//*.js",
    "lint:fix": "eslint src//*.js --fix",
    "format": "prettier --write \"src//*.{js,jsx,ts,tsx,json,css,scss,md}\""
  }
}

• npm run lint: Projenizdeki JavaScript dosyalarını ESLint ile kontrol eder.
• npm run lint:fix: ESLint’in otomatik olarak düzeltebileceği sorunları giderir.
• npm run format: Prettier ile projenizdeki dosyaları belirlenen stil kurallarına göre biçimlendirir.

H3: Testleri Çalıştırma

Yazılım geliştirme sürecinin vazgeçilmez bir parçası olan testleri çalıştırmak için de npm script’lerini kullanabilirsiniz. Bu, birim testleri, entegrasyon testleri veya uçtan uca testler olabilir.

{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watchAll",
    "test:coverage": "jest --coverage"
  }
}

• npm test: Jest ile tüm testleri çalıştırır.
• npm run test:watch: Jest’i izleme modunda başlatır, dosya değişikliklerinde ilgili testleri otomatik olarak yeniden çalıştırır.
• npm run test:coverage: Jest ile test kapsamı raporu oluşturur.

H3: Üretim İçin Derleme (Building for Production)

Projenizi dağıtıma hazır hale getirmek için genellikle bir derleme (build) adımı gereklidir. Bu adım, kodu sıkıştırma, optimizasyon yapma ve dağıtılabilir dosyaları oluşturma gibi işlemleri içerir.

{
  "scripts": {
    "build": "webpack --mode production",
    "build:clean": "rm -rf dist && npm run build",
    "predeploy": "npm run build"
  }
}

• npm run build: Webpack ile projenizi üretim modu için derler.
• npm run build:clean: Önce önceki dist klasörünü siler, sonra derleme işlemini başlatır. (Windows için del /S /Q dist veya rimraf dist kullanılabilir.)
• predeploy: Bu, npm’in özel bir hook’udur. npm run deploy komutundan önce otomatik olarak çalışır. Burada, dağıtımdan önce derleme işlemini tetikleyebilirsiniz.

npm Script’lerini Daha Verimli Kullanma İpuçları ve İleri Seviye Teknikler

npm script’leri sadece basit komutları çalıştırmaktan ibaret değildir. Daha karmaşık senaryoları yönetmek ve geliştirme sürecinizi daha da optimize etmek için bazı ileri seviye teknikler ve ipuçları bulunmaktadır.

H3: Ortam Değişkenleri (Environment Variables) Kullanımı

Script’lerinizde farklı ortamlar için (geliştirme, test, üretim) farklı yapılandırmalar kullanmanız gerekebilir. Ortam değişkenleri, bu tür senaryolarda esneklik sağlar. Ancak, Windows ve Unix tabanlı sistemlerde ortam değişkeni tanımlama sözdizimi farklılık gösterir. Bu sorunu çözmek için cross-env gibi bir paket kullanabilirsiniz.

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack serve",
    "prod": "cross-env NODE_ENV=production webpack --mode production"
  },
  "devDependencies": {
    "cross-env": "^7.0.3"
  }
}

Burada cross-env, NODE_ENV ortam değişkenini tüm platformlarda tutarlı bir şekilde ayarlar.

H3: Paralel Script Çalıştırma için npm-run-all veya concurrently

Yukarıda bahsettiğimiz & operatörü, basit paralel çalıştırmalar için yeterli olabilir, ancak daha karmaşık senaryolarda (örneğin, birden fazla script’i paralel çalıştırıp hepsinin tamamlanmasını beklemek veya log çıktılarını daha iyi yönetmek) npm-run-all veya concurrently gibi paketler daha kullanışlıdır.

{
  "scripts": {
    "watch-css": "sass --watch src/styles:dist/css",
    "watch-js": "webpack --watch",
    "dev-server": "nodemon server.js",
    "dev": "concurrently \"npm run watch-css\" \"npm run watch-js\" \"npm run dev-server\""
  },
  "devDependencies": {
    "concurrently": "^8.2.2"
  }
}

concurrently paketi, birden fazla script’i paralel olarak çalıştırır ve her birinin çıktısını ayrı ayrı etiketleyerek okunabilirliği artırır.

H3: Pre/Post Hook Script’leri

npm, belirli script’lerden önce veya sonra otomatik olarak çalıştırılacak özel hook script’leri tanımlamanıza olanak tanır. Bir script’in adı ise, pre ve post script’leri sırasıyla o script’ten önce ve sonra çalışır.

{
  "scripts": {
    "clean": "rimraf dist",
    "prebuild": "npm run clean && echo \"Derleme öncesi temizlik yapılıyor...\"",
    "build": "webpack --mode production",
    "postbuild": "echo \"Derleme tamamlandı!\""
  }
}

npm run build komutunu çalıştırdığınızda, önce prebuild, ardından build ve son olarak postbuild script’leri otomatik olarak çalışacaktır.

H3: Özel Komutlar ve Kısaltmalar Oluşturma

Uzun veya sık kullanılan komutlar için kendi kısaltmalarınızı oluşturabilirsiniz. Bu, yazım hatalarını azaltır ve geliştirme hızınızı artırır.

{
  "scripts": {
    "deploy:prod": "aws s3 sync build/ s3://my-production-bucket --delete",
    "deploy:staging": "aws s3 sync build/ s3://my-staging-bucket --delete",
    "deploy": "npm run deploy:prod"
  }
}

Burada npm run deploy komutu, doğrudan npm run deploy:prod komutunu çağırarak production ortamına dağıtım yapar. Bu, varsayılan bir dağıtım mekanizması sağlamanın pratik bir yoludur.

Sonuç ve Sıkça Sorulan Sorular (SSS)

npm script’leri, modern JavaScript projelerinin vazgeçilmez bir parçasıdır. Tekrarlayan görevleri otomatikleştirmek, ekip üyeleri arasında tutarlılığı sağlamak, karmaşık komutları basitleştirmek ve platformlar arası uyumluluğu artırmak gibi birçok avantaj sunarlar. Projenizin büyüklüğü ne olursa olsun, npm script’lerini etkili bir şekilde kullanmak, geliştirme sürecinizi önemli ölçüde hızlandıracak ve daha keyifli hale getirecektir. Bu rehberde ele alınan temel ve ileri seviye teknikleri uygulayarak, projenizin yaşam döngüsünü daha verimli bir şekilde yönetebilirsiniz.

H3: Sıkça Sorulan Sorular (SSS)

npm run ve npx arasındaki fark nedir?

npm run, package.json dosyanızın scripts bölümünde tanımlanan komutları çalıştırır. npx ise, bir paketi yerel olarak kurmadan çalıştırmanıza olanak tanır. Genellikle tek seferlik komutlar veya global olarak kurmak istemediğiniz CLI araçları için kullanılır (örneğin, npx create-react-app my-app).

Neden doğrudan komutları çalıştırmak yerine npm script kullanmalıyım?

npm script’ler, komutları otomatikleştirmeyi, standartlaştırmayı ve belgelemeyi sağlar. Ekip içinde tutarlılık yaratır, uzun ve karmaşık komutları kısaltır ve farklı işletim sistemlerinde uyumluluk sorunlarını azaltır. Ayrıca, projenin bağımlılıkları tarafından sağlanan yürütülebilir dosyaları otomatik olarak PATH’e ekler, bu da ./node_modules/.bin/webpack gibi uzun yolları yazmaktan kurtarır.

Çok fazla script tanımlamak package.json dosyasını karmaşıklaştırır mı?

Belli bir noktadan sonra package.json dosyasının scripts bölümü uzayabilir. Ancak, iyi adlandırma kuralları ve mantıksal gruplamalar (örneğin, test:unit, test:e2e) kullanarak bu karmaşıklığı yönetebilirsiniz. Ayrıca, daha karmaşık otomasyonlar için Gulp veya Grunt gibi task runner’lar yerine npm script’leri tercih etmek genellikle daha basit ve bakımı daha kolay bir yaklaşımdır, zira ek bir bağımlılık ve öğrenme eğrisi getirmez.

npm script’leri Windows ve Linux’ta farklı çalışır mı?

Evet, bazı komutlar ve sözdizimleri (özellikle ortam değişkeni tanımlamaları veya dosya sistemi komutları gibi) farklılık gösterebilir. Bu tür platformlar arası uyumluluk sorunlarını çözmek için cross-env (ortam değişkenleri için) veya rimraf (rm -rf yerine) gibi yardımcı paketler kullanmak iyi bir pratiktir.

Script’lerimde birden fazla komutu nasıl çalıştırırım?

Sıralı çalıştırma için && operatörünü (bir önceki komut başarılı olursa sonraki çalışır) ve paralel çalıştırma için & operatörünü kullanabilirsiniz. Daha gelişmiş paralel çalıştırma senaryoları için concurrently veya npm-run-all gibi paketler önerilir, çünkü bunlar çıktıyı daha iyi yönetir ve ek özellikler sunar.