React Tutorial 2023 12 – package.json Dosyası Neden Var Neler Yapabiliyor?

Merhabalar bir önceki yazımda React proje klasör yapısını ve hangi klasörde neler olduğuna bakmıştık.

Bu yazımda ise özellikle değinmek istediğim bir dosya var, package.json. Aşağıda işaretlediğim dosyaya göz atacağız.

Neden önemli yetenekleri neler?

Siz de dosyayı açıp bir göz atabilirsiniz ilk başta.

package.json dosyası, bir Node.js projesinin konfigürasyonunu ve bağımlılıklarını tanımlayan bir JSON dosyasıdır. React projelerinde de kullanılır ve genellikle projenin kök dizininde bulunur. package.json dosyasının temel öğeleri aşağıdaki gibidir.

name: Projenin adını belirtir. Genellikle küçük harflerle ve boşluk olmadan yazılır.

"name": "my-react-app"

version: Projenin sürüm numarasını belirtir. Genellikle Semver (Semantic Versioning) standartlarına uygun bir formatta yazılır.

"version": "1.0.0"

main: Projenin ana JavaScript dosyasının adını belirtir. Genellikle index.js olarak adlandırılır. Siz bu dosyanın adını değiştirirseniz ya da ana dosyayı farklı bir dosya olarak ayarlasanız burayı da güncellemeyi unutmayınız.

"main": "index.js"

dependencies ve devDependencies: Projenin bağımlılıklarını belirtir. dependencies, projenin çalışması için gerekli olan paketleri içerirken, devDependencies genellikle sadece geliştirme aşamasında kullanılan paketleri içerir. Bağımlılıkların isimleri ve sürüm numaraları burada listelenir.

"dependencies": {
  "react": "^17.0.2",
  "react-dom": "^17.0.2"
},
"devDependencies": {
  "babel-eslint": "^10.1.0",
  "eslint": "^7.32.0"
}

Aklımıza şu soru gelecektir, ben bir paketi yüklerken dev ortamı için mi yoksa prod ortamı için mi olacağını nasıl belirleyeceğim?

Burada bir paket yüklemesi yaparken -D paremetresi kullanarak yüklemek onu sadece Dev ortamında kullanılacak bir paket olarak ayarlar.

npm install -D axios

scripts: Proje için çalıştırılabilir komutları tanımlar. Genellikle geliştirme, yapılandırma ve dağıtım süreçlerini kolaylaştırmak için kullanılır.

Örneğin, npm start komutu projeyi başlatmak için, npm build projeyi derlemek için kullanılır.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

Mesela normalde bir React uygulamasını çalıştırmak için node index.js yazarak her defasında çalıştırmak gerekirdi. Ama biz bu node index.js tanımlamasını start ifadesine bir scrip olarak yazarsak terminalde sadece npm start yazmamız yeterli olacaktır. Bu ilgili key’i scripts içersinde bulur ve komutu yürütür.

repository: Projenin kaynak kodunun depolandığı yerin URL’sini belirtir.

"repository": {
  "type": "git",
  "url": "https://github.com/username/my-react-app.git"
}

Bu öğelerin yanı sıra, projenin kullanılan diğer paketlerini, lisans bilgilerini ve diğer detayları da içerebilir. package.json dosyası, projenin genel yapısını ve bağımlılıklarını tanımlayarak, projeyi paylaşılabilir ve taşınabilir kılar.

browserslist: ayarı, projenin hangi tarayıcı sürümlerini destekleyeceğini belirten bir konfigürasyonu ifade eder. Bu ayarlar genellikle CSS ve JavaScript derlemesi sırasında kullanılır ve projenin tarayıcı uyumluluğunu kontrol etmek amacıyla kullanılır.

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

Yukarıdaki örnekteki ayarlar şu anlamlara gelir:

production: Bu ortamda (örneğin, projeyi yayına hazırlarken), tarayıcıların kullanım istatistiklerine dayanarak belirtilen kriterlere uyan sürümleri destekle. Bu örnekte, kullanım oranı %0.2’den fazla olan, “ölmemiş” (not dead) ve Opera Mini hariç tüm tarayıcıları destekle.
development: Bu ortamda (örneğin, geliştirme sırasında), sadece belirli tarayıcı sürümlerini destekle. Bu örnekte, en son Chrome, Firefox ve Safari sürümlerini destekle.

Bu ayarlar genellikle CSS preprocessor’ları (örneğin, Sass veya Less) ve JavaScript derleyicileri (örneğin, Babel) tarafından kullanılır. Bu araçlar, belirtilen tarayıcı uyumluluk kurallarına göre kodu otomatik olarak dönüştürebilir veya uygun hale getirebilir. Bu, kullanıcıların farklı tarayıcılarda ve sürümlerde web uygulamasının düzgün çalışmasını sağlamak için önemlidir.

Package.json içinde belirtilebilecek çok daha fazla property olabilir. Ancak şimdilik en önemlileri bu kadardı.

Bir sonraki yazımda görüşmek üzere.