JAVASCRIPT’IN TARIHÇESI

Modules-2 (npm Nedir?)

NPM Nedir? NPM Nasıl Çalışır ? Bower, Npm ve Yarn Arasındaki Farklar Nelerdir?

Onur Dayıbaşı

Published in

Frontend Development With JS

5 min readJun 6, 2019

Bu yazıyı daha önceden yazmış olduğum Javascript’in Tarihçesi yazısının bir devamı olarak yazıyorum. Bir çok kavramı tek bir yazıda ele almanın yaratacağı karmaşıklıktan kaçmak için bu yönteme başvurdum. Bu yazılardaki amacım önceden Javascript’in varolan hangi özelliklerinin yetmediğini ve bu geliştirmeyle neyi hedeflediklerini anlatacağım.

Bu yazı aslında Modules yazısının 2ncisi ve bu yazıyı daha önceden yazdığım için biraz daha üzerinde çalışarak düzenlemek istedim. NPM yapı taşları aslında modüllerin belli bir amaç doğrultusunda gruplanarak paketlenmesi ile oluşturulur. NPM yapıtaşları JS kütüphaneleri diyebiliriz bunlara. JS ekosisteminin bu kadar büyük olmasındaki neden de NPM gücünden Açık Kaynak (OpenSource) birlikte kod geliştirme kültüründen kaynaklanmaktadır.

Bu yazıda özetle aşağıdaki konuları anlatacağım.

NPM Nedir?
NPM Nasıl Çalışır?
NPM Nasıl Kullanılır?
Bower, NPM, Yarn Arasında Ne Gibi Farklar Bulunur?

1. NPM Nedir?

NPM(Node Package Manager) isminden de anlaşıldığı üzere node modülleri ortak bir yerde kaydedilmesi ve kullanılması için oluşturulmuş node modül yöneticisidir. Zamanla node modüllerinin webpack ve babel gibi araçlar sayesinde frontend kütüphaneleri içinde kullanılabilir hale gelmiştir. Javascript hem browser, hem sunucu, hem geliştirici hemde desktop uygulamalarında kullanılabilir hale gelmiştir.

Önceden Javascript sadece browser üzerinde web sayfaları çalıştırılırken tek bir kütüphane ile (YUI, Mootools, ExtJS, JQuery) ve bunların pluginleri yeterken. İlerleyen gelişmeler ile birlikte daha büyük projeler için bu yetersiz hale gelmiş artık irili ufaklı bir çok modülün birbirini kullandığı yapılara ihtiyaç vardır. Bunun için bu modüllerin ortak bir yerde bulunması ve buradan kullanılması ihtiyacı doğmuştur. Bu ihtiyacı npm sağlamıştır.

Aslında bu tip modül paylaşım ihtiyaçları diğer diller içinde vardı ve çok daha öncesinden beri kullanılmaktadır. Örneğin Maven, Gopm, Rubygems.org vb paket yönetim araçları http://www.modulecounts.com/ adresinden gelişimini görebilirsiniz. Tabiki bu modül sayıları ve artışı bu paketlerin kalitesini göstermesede dillere olan ilgiyi göstermesi açısından önemli bir kaynaktır.

2. NPM Nasıl Çalışır?

1 milyon üzerinde JS paketini barındıran npm yeni nesil projeler geliştirirken yüzlerce, binlerce modüle bağımlılık duyar bu bağımlılığı ve bunların güncellemelerini nasıl yönetebiliriz. Burada da devreye SemVer(Semantic Versioning) devreye girer.

Semantic versiyonlama sayesinde bu kadar çok kütüphanenin birbirlerine olan bağımlılıklarını yönetmek mümkün hale gelir. Örneğin 1.5.4 versiyonundaki 3 rakam şunu ifada eder. Bir kütüphaneyi kullanırken o kütüphanedeki değişimler sizin bileşeninizi nasıl etkiliyor.

major (breaking): Modül arayüzünde olan bir değişiklik yüzünden siz bir güncelleme yaptığınızda kodunuzda bir takım güncellemeler yapmanız gerekecektir.
minor (feature): Modül arayüzünde bir değişiklik olmadan yeni bir özellik eklenmesi durumunu ifada eder.
and patch versions (fix):Modül arayüzünde bir değişiklik olmadan sadece bir hatayı çözdüğünüzde bu rakamı ilerletiriz.

Aşağıdaki örnekte New Product, Patch release, Minor Release ve Major Release nasıl arttırıldığını görebilirsiniz.

3. NPM Nasıl Kullanılır ?

pm sayfasına kullanıcı hesabı oluşturup bunu onayladıktan sonra console/terminal üzerinden

npm login
Username: <your username>
Password: <your password>

npm authantication işlemini gerçekleştirdikten sonra npm sistemine hangi kullanıcı için login olduğunuza aşağıdaki komutla kontrol edebilirsiniz.

npm whoami

Bundan sonra yapmanız gereken basit bir modül yazmanız. Bunun için npm aşağıdaki örneği oldukça basit

Console log yazdıran basit bir arayüzü olan modül geliştiriyor. Tek fonksiyonu printMsg() . hep sabit bir mesaj basıyor. Öncelikle npm init ve npm install colors — save yapınca içerisinde aşağıdaki dosyalar ve modüller oluşur.

package.json: Paketin ismi , versiyonu , bağımlılıkları vb temel bilgileri içerir.
package-lock.json: Bu paketin bağımlı olduğu diğer modüllerin versiyonlarını ve integrity bilgileri tutar.
node-modules: İndirilen modüller bu paket altına indirilir.

A. Adım (Modülde yanlış gerçekleştirimi) 1.0.0 olarak publish etme

Burada mesajı kırmızı renkli ekrana basan bir fonksiyon yazmaya çalışıyoruz ama read yazdığımız için bu fonksiyon işlemini tam olarak gerçekleştiremiyor.

const color=require(“colors”);exports.printMsg=function(){
 console.log(“this message from npm-first-lib”, “read”);
}

terminale aşağıdaki kod ile modülün ilk versiyonunu yayınlıyoruz.

npm publish

Daha sonrasında başka bir projeden bu modülü npm install npm-first-lib indirip kullandığımızda kodun sadece ekrana mesaj yazdığını görürüz.

B. Adım (Modülde yanlış düzeltimi) 1.0.1 olarak patch etme

Kodu düzeltip ekrana basılan mesajın kırmızı renkler ile basılmasını sağlıyoruz.

var color=require(“colors”);exports.printMsg=function(){
 console.log(“this message from npm-first-lib”.red);
}

Kodu düzelttikten sonra aşağıdaki komutları çalıştırdığımızda patch numarasının 1 arttığını görebilirsiniz. Buradaki önemli konu patch sadece bug fix ettiği ve kullanılan arayüzü hiç değiştirmediğinin bilinmesi.

npm version patch
npm publish

C. Adım (Modülde yeni yetenek ekleme) 1.1.0 new feature

Aynı işlemi yapan bir arayüze sahip ama color dışarıdan verdiğimizde istediğimiz renkle konsole print işlemini gerçekleştirebildiğimiz yeni bir yetenek ekledik.

var color=require(“colors”);exports.printMsg=function(printColor){
 if(!printColor) printColor=”red”;
 console.log(“this message from npm-first-lib”[printColor]);
}

Bu durumda minor bir değişiklik yapmış oluruz. 2nci rakamı ilerletip modülü tekrar yayınlıyoruz.

npm version minor
npm publish

D. Adım (Modül arayüzünü değiştirme) 2.0.0 new breaking

Fonksiyonumuz sadece color değişken olarak değilde msg bir değişken olarak almasını istiyoruz. Bu durumda bu modülü kullanan uygulamalar güncelleme aldığında yazılımları çalışmayacaktır.

var color=require(“colors”);exports.printMsg=function(msg, printColor){
 if(!printColor) printColor=”red”;
 console.log(msg[printColor]);
}

Bundan dolayı npm install 1.1.x veya 1.x gibi versiyonlar ile güncellemelerinizin bir üst seviyeye geçmeden kullanabilirsiniz. Eğer kullandığınız modüllerde aşağıdaki gibi major güncellemeler var ise uygulamanızı bileşenin yeni arayüzüne göre değiştirmeniz gerekir.

npm version major
npm publish

4. Bower, Npm, Yarn Arasında Ne Gibi Farklar Bulunur?

Peki React ile birlikte Yarn veya daha önceden kullandığımız Bower nedir ? Bunlarda JS paket yöneticisi fakat dönemleri ve yapılma amaçları farklı.

Örneğin Bower Frontend JQuery, Masory vb diğer frontend kütüphanelerini index.html üzerine el ile kendinizin download edip bir paket altına koyup index.html içerisinden kendimiz link veriyorduk. Npm Bower sisteme yükledikten sonra el ile bu paketleri download etmek yerine bower kullanıp bunların bower.json üzerinden bower_components altında yüklenmesi sağlanır.

Sonrasında ise aşağıdaki şekilde ilgili link verilebilir. veya Grunt, RequireJS ile ilgili kütüphaneler sisteme yüklenebilir.

<script src="bower_components/jquery/dist/jquery.min.js"></script>

Npm ve Yarn modern frontend kullanılabilir olmasından sonra yönelim bowerdan bu 2 paket yöneticisinde yönelmiştir. npm 2011 çıkışlı , Yarn ise Facebook tarafından npm bir takım problemleri gidermek için geliştirdikleri npm üzerinde çalışan bir araç.

Hız
Güvenlik
Offline

Yarn hız ve güvenlik olayları yanında yarn.lock dosyası ile proje bağımlılıklarını daha iyi bir şekilde yönetecek şekilde geliştirilmiş ve bundan dolayı bir çok yerde tercih edilmiştir. NPM versiyon 5 sonra Yarn benzer özelliklerini yapısına dahil ettiği ve bağımlılık problemini benzer şekilde package-lock.json . içerisinde çözmüştür.

Bundan dolayı halen npm ve yarn en çok tercih edilen paket yöneticileridir.

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.