İçeriğe geç

Yarn Kullanımı

NodeJS’in çıkışıyla birlikte bir çok yenilikte ön plana çıktı.

Önceleri, bir projeye başlanırken; projede kullanılacak olan paketleri belirlenir ve bu paketler sırayla indirilip proje dosyasında ilgili yerlere konumlandırılırdı. Ne kadar ilkelce çalışmışız diyesi geliyor insanın!..

Şimdi ise durum önceki zamanlardan oldukça farklı. Yine proje başlangıcında kullanılacak olan paketler belirleniyor ve bu paketler dependency manager’ler aracılığıyla otomatik olarak indiriliyor.

Dependency manager kullanmanın avantajları oldukça fazla. Bunlardan en büyüğü ise; projede kullanılacak olan paketlerin tek tek değil de otomatik olarak hepsinin indirilmesi. Bunun dışında; paket silme ve güncelleme işlemleri de oldukça basit durumda. Ayrıca; kullanılan paketlerin versiyonlarının seçimi de çok basit.

Size çok basit bir örnek vermek istiyorum.

Arkadaşınızın bir web projesi üzerinde çalıştığını varsayalım. Proje dosyasını size yollamak istediğinde; kullandığı tüm paketleri size göndermek zorunda değil. Bunun yerine; projede kullandığı paketlerin bir listesini iletmesi yeterli. Siz de bu paket listesine göre tüm paketleri indirebilirsiniz ve projenin kontrollerini yapabilir ya da arkadaşınızın kaldığı yerden devam edebilirsiniz.

Dependency manager olarak bir çok uygulama mevcut. Bunlardan en çok bilineni ise; Bower. Yaklaşık olarak; 2 yıl Bower kullandım. Logosu bana oldukça sevimli görünüyordu. Açıkçası kullanırken de oldukça mutlu oldum. Fakat Bower’in tasarımında sorunlar vardı. Tasarımındaki sıkıntıları yazmaya kalksak yeni bir yazı olur. Daha sonrasında ise zaten; Bower’in geliştirilmesi durduruldu. Ben de haliyle; çok sevdiğim Bower’i bırakıp YARN’a geçiş yaptım. YARN çok mu iyi? Hayır bence çok iyi durumda değil. Hatta bazı yönlerden Bower bana göre YARN’a göre çok daha iyi durumda.

Bu yazımızın konusu Yarn hakkında. Yarn derken; Hadoop YARN değil. Hadoop YARN bambaşka bir olay ve şuan bizi ilgilendirmiyor.

Yarn nedir?

Yarn nedir sorusunu aslında cevaplandırmaya çalıştık. Fakat yine de bu soruya cevap vermemiz gerekirse; Yarn, bir dependency manager yani bağımlılık yöneticisidir. Diğer bir anlamda da paket yöneticisidir. Yarn kullanarak; paketlerinizi yükleyebilir ve yönetebilirsiniz.

Yarn Kurulumu

Yarn’ı bilgisayarınıza kurmanızın farklı yolları var. İlki buradaki sayfadan sisteminize uygun olan kurulumu indirmek. İkinci yol ise; bilgisayarınızda NPM paket yöneticisini kullanarak Yarn’ın kurulumunu gerçekleştirmek.

NPM ile Yarn’ı kurmak için:

$ npm install -g yarn

// veya

$ npm install yarn -g

yazmanız yeterlidir. Yukarıdaki komut satırından sonra YARN global olarak sisteminize kurulacaktır.

Yarn’ın sisteminize kurulu olup olmadığını aşağıdaki komutlardan herhangi birisi ile kolayaca anlayabilirsiniz.

$ yarn -v

// veya

$ yarn --version

Aşağıdaki ekran benim sistemimde kurulu olan Yarn çıktısı.

C:\Users\Emre Can ÖZTAŞ>yarn -v
1.12.3

C:\Users\Emre Can ÖZTAŞ>yarn --version
1.12.3

Yarn’ın kullanımı çok basit. Herhangi bir dosya oluşturmadan Yarn ile hemen bir paket yükleyebilirsiniz.

Örneğin; jQuery’i yükleyelim.

$ yarn add jquery

Bu işlemden sonra jQuery yüklenecektir.

Burada; paket yüklemek için add komutunu kullandım. YARN’ın komut sistemine detaylı olarak inceleyeceğiz.

Yarn Komutları

Yarn’ı komut ekranında kullanacağız daha doğrusu kullanmak zorundayız. Zira, Yarn herhangi bir arayüze sahip değildir.

Yarn kullanımı ve komutları oldukça basit. Bir kaç dakika içerisinde projenizi oluşturabilirsiniz.

En sık kullanılan daha doğrusu bir yazılımcının hemen ihtiyaç duyacağı komutlar üzerinde duracağız.

O halde Yarn komutlarına detaylı olarak bir bakalım.

– init

Yarn ile bir proje oluşturabilirsiniz. Yani; projelerinizi Yarn ile yönetebilirsiniz. Bunun için ilk olarak projeye başlarken, proje dizininde aşağıdaki komutu vermelisiniz.

$ yarn init

Biz de örnek bir proje oluşturalım ve adına web-project diyelim. Yarn ile projemizi oluşturalım.

C:\xampp\htdocs>mkdir web-project

C:\xampp\htdocs>cd web-project

C:\xampp\htdocs\web-project>yarn init
yarn init v1.12.3
question name (web-project): web-project
question version (1.0.0):
question description: This is first yarn project
question entry point (index.js):
question repository url: https://emrecanoztas.com
question author: Emre Can ÖZTAŞ <oztasemrecan@gmail.com>
question license (MIT): MIT
question private:
success Saved package.json
Done in 59.38s.

init komutundan sonra; yukarıdaki ekranda da görüldüğü gibi çeşitli sorular soracaktır. Bu sorulara vereceğiniz cevaplar ile package.json dosyasını oluşturacaktır. Eğer bu sorularda bilmediğiniz ya da yazmak istemediğiniz alanlar olursa boş bırakıp enter tuşuna basmanız kâfidir.

Oluşturulmuş olan package.json dosyası aşağıdaki gibidir.

{
  "name": "web-project",
  "version": "1.0.0",
  "description": "This is first yarn project",
  "main": "index.js",
  "repository": "https://emrecanoztas.com",
  "author": "Emre Can ÖZTAŞ <oztasemrecan@gmail.com>",
  "license": "MIT"
}

Artık projemizi; Yarn ile kontrol edebiliriz. Burada; package.json dosyasının oluşturulmasının nedeni; projenin ana iskeletini oluşturmak ve projede kullanılan paketlerin listesini burada tutmak.

– add

add komutunu daha önce kullanmıştık. Bu başlık altında detaylı olarak açıklayalım.

add komutu ile projenize; yeni paketleri yükleyebilirsiniz.

add komutunun kullanımı aşağıdaki gibidir.

$ yarn add [package-name]

Örneğin; Vue.js paketini projemize dahil edelim. Bunun için aşağıdaki satırı yazmamız yeterlidir.

$ yarn add vue

Yukarıdaki komuttan sonra; Vue.js projemize dahil olacaktır.

C:\xampp\htdocs\web-project>yarn add vue
yarn add v1.12.3
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vue@2.5.21
info All dependencies
└─ vue@2.5.21
Done in 3.69s.

Projemize dönüp baktığımızda;

node_modules adında bir dosya açıldığını ve vue’nin de bu dosya içerisinde konumlandığını görebilirsiniz. Bunun nedeniyse; Yarn yüklediği tüm paketleri node_modules isimli dizinde saklamasıdır.

node_modules dosyasının ismini sistemsel olarak değiştiremezsiniz. Örneğin; Bower ile çalışırken, bower.json dosyasında paketlerin hangi dizine konumlandırılacağına ve dizin ismine karar verebilirsiniz fakat Yarn’da böyle bir şey söz konusu değildir. node_modules ismini manuel olarak değiştirmeniz durumunda; tekrar add komutu ile bir paket yüklemeye çalışırsanız, paketler node_modules adında bir dizin açılıp tekrar en baştan node_modules dizinine yüklenirler.

node_modules dizini dışında bir de yarn.lock adlı dosya oluşturulmuştur. Bu dosyanın amacıysa; indirilen paketlerin tam adresleri, nereden indirildikleri ve checksum bilgisinin saklanmasıdır. Bu dosya üzerinde herhangi bir değişiklik yapmamaya özen göstermelisiniz.

Herhangi bir paketi ismiyle yükleyebileceğiniz gibi; bu paketin değişik versiyonlarını da yükleyebilirsiniz.

Bir paketin önceki versiyonların birisini yüklemek için paket isminden sonra bu versiyon numarası @ komutu ile belirtilir. Tıpkı aşağıda olduğu gibi.

$ yarn add [package-name]@[version]

Öncelikli olarak; paketler için Yarn sayfasından arama yapabilirsiniz. Bu aynı zamanda, aradığınız paketin Yarn üzerinde olup olmadığını kontrol etmenin en iyi yoludur. Vue.js için konuşursak; buradaki arama / sonuç sayfasına bakalım.

Bu sayfanın sağ tarafında, Versions başlığı altında Vue.js için yüklenebilecek tüm versiyonlar listelenmektedir. Dilerseniz; bu listeden herhangi bir versiyonu yükleyebilirsiniz.

Örneğin; Vue.js 2.0.0 paketini yükleyelim.

$ yarn add vue@2.0.0

Yukarıdaki komuttan sonra Vue.js – 2.0.0 projemize dahil olacaktır.

Aynı anda birden fazla faketi de yükleyebilirsiniz. Bunun için paket isimleri arasında bir boşluk bırakmanız yeterlidir.

$ yarn add [package-name-1] [package-name-2] [package-name-3] ...

Projemize; Bootstrap ve jQuery’i de dahil edelim.

$ yarn add bootstrap jquery

Dilerseniz burada yine istediğiniz paketin versiyonunu @ ile belirtebilirsiniz.

Şimdi tekrar package.json dosyamıza bakalım.

{
  "name": "web-project",
  "version": "1.0.0",
  "description": "This is first yarn project",
  "main": "index.js",
  "repository": "https://emrecanoztas.com",
  "author": "Emre Can ÖZTAŞ <oztasemrecan@gmail.com>",
  "license": "MIT",
  "dependencies": {
    "bootstrap": "^4.2.1",
    "juery": "^1.0.0",
    "vue": "2.0.0"
  }
}

Ekran alıntısında da görüldüğü üzere; yüklediğimiz tüm paketler, dependencies object’i altında listelenmiş durumda. Artık bu dosya elinizde olduğu sürece; bir projede kullanılan paketleri otomatik olarak yükleyebilirsiniz. Bu işlemi de install başlığı altında incelemeye çalışacağız.

dependencies olarak belirtilen alanda belirtilen paketlerin hepsi projede kullanılan asıl öğelerdir. Peki bu ne demek? Yarn ile paket yüklerken, yüklenen paketleri farklı başlıklar altında konumlandırabilir ve yüklenen paketlerin amaçlarının neler olduğunu kısaca belirtebilirsiniz.

dependencies dışında; devDependencies, peerDependencies, optionalDependencies ve bundledDependencies vardır.

devDependencies, projenizde kullanılan development seçenekleri burada belirtilir. Örneğin; gulp, babel veya diğer herhangi bir araç kullanıyorsanız bu başlık altında belirtebilirsiniz. Bu başlık altında belirtilen araçlar, projede kullanılan asıl öğeler değillerdir.

peerDependencies, projenizi paket olarak yayınlamak istediğinizde ortaya çıkacak olan bağımlılıklar belirtilir.

optionalDependencies, adından da anlaşılacağı üzere; optinal yani isteğe bağlı olan paketlerin listesidir. Yükleme sırasında oluşabilecek herhangi bir aksilik durumunda Yarn bu aksilikleri dikkate almayacaktır.

bundledDependencies, projenizi paketleme sırasında projede kullanılacak olan paketlerin de proje paketiniz içerisinde yer alması gerektiğini belirttiğiniz başlıktır.

add komutundan sonra paket ismi yazarak yaptığımız işlem de herhangi bir sonek gerekmez. Fakat; devDependencies için –dev, peerDependencies için –peer, optionalDependencies için –optional ve bundledDependencies için –bundle soneklerini kullanmanız gerekiyor.

Örneğin; projemizde gulp’ın kullanıldığını varsayalım ve Gulp’ı devDependencies’e eklemek için –dev sonekini kullanalım.

$ yarn add gulp --dev

Yukarıdaki komuttan sonra Gulp yüklenecek ve package.json dosyasına eklenecektir.

{
  "name": "web-project",
  "version": "1.0.0",
  "description": "This is first yarn project",
  "main": "index.js",
  "repository": "https://emrecanoztas.com",
  "author": "Emre Can ÖZTAŞ <oztasemrecan@gmail.com>",
  "license": "MIT",
  "dependencies": {
    "bootstrap": "^4.2.1",
    "jquery": "^3.3.1",
    "vue": "2.0.0"
  },
  "devDependencies": {
    "gulp": "^4.0.0"
  }
}

Eğer herhangi bir paket yayınlama ihtiyacı hissetmeyecekseniz; dependencies ve devDependencies kavramlarını bilmeniz sizin yeterli olacaktır.

– list

add komutu ile paketlerimizi projemize ekledik. list komut ise projede yüklü olan paketlerin listesini verir.

list komutunun kullanımı aşağıdaki gibidir.

$ yarn list

list komutu ile projenizde tüm paketleri ve bu paketlerin versiyonlarını görebilirsiniz. list komutu için kısaca; package.json dosyasındaki paketlerin komut ekranında listelenmesi diyebiliriz.

– remove

remove komutu ile herhangi bir paketi silebilirsiniz. Kullanımı aşağıdaki gibidir.

$ yarn remove [package-name]

Birden fazla paketi de silebilirsiniz. Sileceğiniz paket isimlerinin arasına boşluk bırakmanız yeterlidir.

$ yarn remove [package-name-1] [package-name-2] [package-name-3] ...

Örneğin; Gulp ve jQuery paketlerini silelim.

$ yarn remove gulp jquery

– upgrade

upgrade komutu ile projenizdeki paketleri güncelleyebilirsiniz.

upgrade komutunun kullanımı aşağıdaki gibidir.

$ yarn upgrade

Tüm paketler yerine belli bir paketi upgrade etmek isteyebilirsiniz. Bunun için de aşağıdaki gibi paketi belirtmeniz gerekir.

$ yarn upgrade [package-name]

Birden fazla paketi de upgrade edebilirsiniz. Bunun için paketler arasına bir boşluk bırakarak yazmanız gerekmektedir.

$ yarn upgrade [package-name-1] [package-name-2] [package-name-3] ...

– install

Bana göre en önemli kısıma geldik. install komutu, package.json dosyasındaki bağımlılıkları yükler.

Yazımızın başında da belirttiğim gibi; package.json dosyası elinizde olduğu sürece; projede kullanılan paketleri otomatik olarak indirebilirsiniz.

install komutunun kullanımı aşağıdaki gibidir.

$ yarn install

Şimdi elimizde hali hazırda bulunan package.json dosyasını alalım ve yeni bir dizine koyalım. Örneğin; ben yarn-test adında bir dizine konumlandırdım. Bu dizin içerisinde install komutunu verelim.

C:\xampp\htdocs\yarn-test>yarn install
yarn install v1.12.3
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > bootstrap@4.2.1" has unmet peer dependency "jquery@1.9.1 - 3".
warning " > bootstrap@4.2.1" has unmet peer dependency "popper.js@^1.14.6".
[4/4] Building fresh packages...

success Saved lockfile.

Yarn, package dosyasında bulunan paketleri indirecektir.

Yukarıdaki çıktı hata vermesinin nedeni; Bootstrap için jQuery’nin gerekli olmasından dolayıdır. Hatırlarsanız; jQuery’i silmiştik.

Daha önce de dediğim gibi; bir projede kullanılan paketlere ihtiyacınız yok. Bu projeyi anlamak için projede kullanılan package.json dosyasının olması yeterlidir.

– pack

pack komutu, package.json dosyasını gzip’e göre sıkıştırır. Tam da bizim istediğimiz şey!

Sıkıştırılan dosya uzantısı .tgz olmaktadır. İsmi de proje dosyanızın adıdır.

pack komutunun kullanımı aşağıdaki gibidir.

$ yarn pack

Proje dosyanızın adını yazmak istemezseniz veya değiştirmek isterseniz; bunu belirtebilirsiniz.

$ yarn pack --filename

Performans

Yarn oldukça performanslı çalışır. Bunun nedeni ise; eşzamanlı çalışmasıdır. Yani aynı anda birden fazla paketi indirebilir. NPM’deki gibi sıralı bir şekilde indirme işlemini gerçekleştirmez.

Yarn’ın bir diğer avantajlı olduğu nokta ise; indirilen dosyaların bir yedeğini de lokalde tutmasıdır. Yani siz projenize eklediğiniz bir paketi silseniz bile Yarn bunun yedeğini almıştır. Dolayısıyla yeni bir yükleme işlemine geçmeden önce ilk bakacağı şey lokalde bu paketin bir kopyasının olup olmadığıdır.

Saygı ve muhabbetle!..

Bu içeriği paylaşmak ister misiniz?

İlk Yorumu Siz Yapın

Bir cevap yazın

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

Buradaki içeriklerin tümü kamu malıdır. Kullanılması ve paylaşılması özgürdür.