VueJS package.json Başlangıç Klavuzu

Merhaba bu yazımızda VueJS içerisindeki package.json dosyasını inceleyeceğiz. Bu bir Configuration(Yapılandırma) dosyasıdır.

Vue 2 package.json dosyamızda neler var bir göz atalım. İlk oluşturduğumuz projeyi hatırlıyorsunuz değil mi?! Eğer VueJS ile programlamaya başla makalemizi okumadıysanız yazıyı okumanızı tavsiye ederim.

Oluşturduğunuz projenin ana dizininde package.json dosyası bulunmakta bu dosyayı açalım.

Gördüğünüz gibi bir json formatında bir kaç anahtar görmektesiniz.

“name” : Bu alanda projenizin adı bulunmaktadır. Buradaki değeri değiştirirseniz proje ismini değiştirmiş olursunuz. Yani örneklemek gerekirse public altında bulunan index.html içinde head tagi title da belirtmiş olduğunuz isimi alacaktır.

“version” : Burada projenizin versiyonlamasını yapabilirsiniz. İleri seviye versiyonlarınızıda buradan ayarlayabilirsiniz. Bu konuya ileri seviye package.json konumda değineceğim.

“script” : Debug yapacağınız kodları görmektesiniz. Anahtarlara bakacak olursak serve, build ve lint görmektesiniz.

“serve” : projenizi debug edip local de canlı yayına alır. örn: npm run serve

“build” : projenizi debug yapıp projenin publish yani yayımlama dosyasını verir. Bu dosyayı ana dizinde dist klasörü oluşturarak altına atar. örn: npm run build

“lint” : projenizi debug edip sadece syntax(kelime kuralları) inceler ve hata bulursa bunu size iletir. Örn: npm run lint

Bu anahtarların değerleri birbirine aynı benzerlik gösteriyor. Hepside vue-cli-service servisi içerisindeki komutları çalıştırıyor.

“dependencies” : Burada projenizin dış bağımlılıklarını tanımladığınız yerdir. Dışarıdan bir paket yüklediğinizde paket buraya versiyonu ile birlikte otomatik tanımlanır. babel, webpack vs araçlara ileri seviye VueJs yazılarımda değineceğim.

“devDependencies” : Burada projenizin ana bağımlılıklarını taşıyor. Yani projenizin bu paketlere debug süresince mutlak ihtiyacı vardır.

“esLintConfig” : lint den de anlaşılacağı üzere bu bir syntax ve diğer hataları araştıran bir anahtardır. VueJS varsayılan olarak esline kullanır. Örnek vermek gerekirse warning görmek istemezseniz buradan kapatabilirsiniz. İleri seviye package.json incelemesinde bu konuya daha detaylı değineceğim.

“root” : Proje içerisindeki lintleme sadece bu proje için yapılır. Burada true olarak tanımlanması lintlemenın sadece bu proje içerisinde gerçekleştirileceği anlamına gelir.

“env” : Burası ortam değişkenlerinin tanımlandığı yer. esLint içerisinde yaklaşık 28 adet ortam değişkeni vardır. Bu değişkenlerden bazıları node, query, mongo, shelljs vs.

“extents” : adından da anlaşılacağı üzere plugin, gereklilikler gibi config ayarlarınızın yapıldığı yerdir. Yani siz bir config dosyasından referans almak isterseniz buraya tanımlama yapmalısınız. Bu konuya ileri seviye package.json konumda değineceğim.

“parserOptions” : esLint’e kullanabilmek için gerekli olan bir çeviricidir. Bulunan Syntax hatalarının nasıl giderileceği ile alakalı bize bilgi sunar.

“rules” : esline için sizin belirleyeceğiniz kuralları içerir. Bu konuya ileri seviye package.json konumuzda değineceğiz.

“browserList” : Burada ise uygulamanın hangi browserlar da hangi versiyonlar da çalışması gerektiği bilgisini vereceğimiz bir alan bulunmakta. Buradaki varsayılan tanımlamada, IE8 ve daha düşük sürümler hariç tüm tarayıcıların son 2 ana sürümü en az %1 kullanımda (caniuse.com) desteklemek istediğiniz anlamına gelir.

İşte Configuration dosyamız da bu yapılar ve işlevleri bulunmaktadır. Bu yazımızda package.json yapılandırma dosyamıza açıklık getirmiş bulunmaktayız.

Yazımı okuduğunuz için teşekkür ederim.

Bu bana gurur verir.

Mert Demiral.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Back To Top