𝗪𝗵𝗮𝘁 𝗛𝗮𝗽𝗽𝗲𝗻𝘀 𝗪𝗵𝗲𝗻 𝗬𝗼𝘂 𝗥𝘂𝗻 𝗡𝗽𝗺 𝗖𝗼𝗺𝗺𝗮𝗻𝗱𝘀? -> 𝗡𝗽𝗺 𝗞𝗼𝗺𝘂𝘁𝗹𝗮𝗿ı𝗻ı 𝗖𝗵𝗮𝗹ı𝘀𝘁ı𝗿𝗱ı𝗴ı𝗻ı𝘇𝗱𝗮 𝗡𝗲 𝗢𝗹𝘂𝗿?
Bir npm komutuna Enter'a basar ve beklersiniz. Aniden projeniz çalışmaya başlar. Sanki bir sihirmiş gibi hissettirir.
Bu bir sihir değil. Bu; bir dizi ağ isteği, kod ayrıştırma ve dosya optimizasyonudur.
Komutları körü körüne çalıştırmayı bırakın. Bu 6 temel komutun arkasındaki motoru anlayın.
npm install Bu komut package.json dosyanızı okur. Bağımlılıklarınızı bulmak için bir bulut kayıt defteriyle (cloud registry) iletişime geçer. • Paketleri node_modules klasörüne indirir. • Versiyon çakışmalarını çözer. • Tam versiyonları kaydetmek için bir package-lock.json dosyası oluşturur.
npm run format:check Bu bir doğrulama adımıdır. Dosyalarınızı taramak için Prettier gibi araçlar kullanır. • Kodunuzun sanal bir düzenini oluşturur. • Kodunuzu stil kurallarınızla karşılaştırır. • Dosyalarınızı değiştirmeden hataları işaretler.
npm run format Bu komut, kontrol sırasında bulunan sorunları düzeltir. • Projenizde Prettier'ı çalıştırır. • Dosyalarınızı stil kurallarınıza uyacak şekilde yeniden yazar. • Boşlukları ve biçimlendirmeyi otomatik olarak düzenler.
npm run lint Bunu kodunuz için bir yazım denetleyicisi gibi düşünün. ESLint şu tür hataları tarar: • Sözdizimi (syntax) hataları. • Kullanılmayan değişkenler. • Eksik içe aktarmalar (imports). • Hatalı React Hook kullanımı.
npm run build Bu komut uygulamanızı gerçek dünya için hazırlar. Bir dist klasörü oluşturur. • Kullanılmayan kodları kaldırmak için tree shaking işlemi yapar. • Boşlukları temizleyerek ve değişken isimlerini kısaltarak kodu küçültür (minify). • JavaScript, CSS ve varlıkları (assets) optimize edilmiş dosyalarda paketler (bundle). • Bu dosyalar bir sunucuya dağıtıma (deployment) hazırdır.
npm run dev Üzerinde çalışabilmeniz için yerel bir sunucu başlatır. • Dosyaları yalnızca tarayıcınız talep ettiğinde derlemek için Native ES Modules kullanır. • Sayfayı yenilemeden sitenizi anında güncellemek için Hot Module Replacement (HMR) kullanır.
npm run preview Bu son kontrolünüzdür. Kaynak kodunuzu görmezden gelir ve yalnızca dist klasörüne bakar. • Uygulamanızın gerçek bir sunucuda nasıl davranacağını simüle eder. • Canlı ortama (production) dağıtım yapmadan önce hataları yakalamanıza yardımcı olur.
Terminal bir kara kutu değildir. Bu araçları anlamak, bir şeyler bozulduğunda daha hızlı hata ayıklamanıza (debug) yardımcı olur.
Nasıl çalıştığını öğrendikten sonra kod yazma şeklinizi değiştiren komut hangisi oldu? Aşağıda bizimle paylaşın.