GitHub ve NPM için paket oluşturmak — Türkçe Kaynak
Paket oldu bütün hayallerim.
Günlük projelerimizde sürekli paketlerle uğraşmaktayız. Ancak paketlerin nasıl oluşturulduğu ve kullanımları hakkında ne kadar bilgi sahibiyiz ? Bu makalede paketlerin günlük hayatta kullanımlarını en ince ayrıntısına kadar inceleyeceğiz.
Paketleme dediğimizde Node Js’e değinmemek olmaz. Tabi Node Js’in tamamını şu an anlatırsam başlıkla alakasız olur ama genel kültür olması açısından şuraya ufacık bir paragraf bırakmakta fayda var. Javascript ilk çıktığında Front-end tarafında sayfalara dinamizm katması nedeniyle çıktığını hepiniz biliyorsunuzdur. Yani siz bir Javascirpt kodlarınızı yazıyordunuz, web sayfaları da bu kodu yorumluyor ve DOM ile iletişime geçiyordu. 2008’e kadar bu şekilde giden sistem her zaman fazlasını isteyen insanoğlu sayesinde Google tarafından C++ ile yazılmış Javascript V8 motorunu geliştirdi. Mantık yine aynıydı ancak hızı çok farklıydı. Kodlar o kadar hızlı bir şekilde makine koduna çevrilerek Javascript’i çalışır hale getiriyordu ki Ryan Dahl adındaki vatandaşın kafasında bir ampül çıkarttı. “Abi bu motor Chrome’un içinde var ama neden biz bunu browserlardan ayrı bir yerde kullanmıyoruz? Olan var olmayan var” dedi. 2009 yılında bu V8 motorunu kullanarak Javascript’de tarayıcıdan bağımsız server-side çalışabilen Node JS ortamını yarattı.
Node js asenkron ve Event-driven (olay odaklı) olarak çalışan bir sistemdir. Örneğin, Node Js bir sunucunuz olduğunda, ona herhangi bir request (istek) gönderdiğinizde bu requestin response’unu ( cevap ) dönene kadar diğer requestleri engellemez. Bunun bize sağladığı en büyük avantaj; bir kullanıcının yaptığı isteğe cevap dönene kadar diğer kullanıcıların isteklerini bekletmemesidir. Event-driven dememizin sebebi; Node Js ile oluşturduğunuz sunucunuz eğer herhangi bir request gelmezse sürekli kendini hazırda bekletir. Request geldiğinde event tetiklenir ve response dönmek için gerekli olan işlemlere başlatır.
Önemli Not : Anlatmaya başlamadan belirtmekte fayda var. Aşağıda Node Js yükleme işlemleri, çalışma mantığı, terminal kullanımı, peket indirmek, global ve local paket..vb farklılıklarından bahsettim. Eğer bunların hepsini biliyorsanız “Paketlemeye başlayalım” başlığından itibaren okumanızı öneririm.
Kurulum işlemleri
“Nodejs.org” adresine girdiğinizde sizi bu şekilde bir sayfa karşılayacak. Ben Windows işletim sistemi kullandığım için Linux yada MacOs kurulum işlemleri konusunda bir araştırma yapmadım. İnternetten işletim sisteminize göre arama yaparsanız bulacağınıza inanıyorum. 😊
Bu makaleyi oluştururken Node JS bende 10.16.3 sürümü görünüyor. Ancak makaleyi sonradan okuyacaklar bu sürümü yükselmiş olarak görebilirler. Sağda bulunan “12.11.10 Current” butonu halen geliştirme aşamasında olduğu için solda bulunan “10.16.3 LTS” “Recommended for most users (en çok kullanıcıların önerdiği) butonuna basarak “.exe“ dosyasını bilgisayarınıza indirebilirsiniz. Burada dikkat edersiniz “LTS” şeklinde bir kısaltma yazmakta. LTS’nin açılımı; Long Term Support (Uzun Süreli Destek) demektir. Yani bir sıkıntı çıktığında destek verilecek sürüm demek oluyor. Yükleme işlemine başladığınızda çıkan tüm ekranlara “next (ileri) ” butonuna basarak yükleme işlemini tamamlayabilirsiniz. Çok detaya girmek istemiyorum ancak sadece şunu açıklamak istiyorum.
Yükleme işlemi sırasında karşınıza bu şekilde bir ekran çıkacak. Burada bulunan seçenekleri bilgisayarınıza kuracağınız için neyi neden yaptığınızı anlamanızı istiyorum.
Node.js runtime
Javascript kodlarımızı console’dan çalıştırabilmenizi sağlıyor.
Npm package manager
Paket yükleme ve oluşturma işlemlerinizi yönetmenizi sağlıyor.
Online documation shortcuts
Kullanacağınız dokümanların kısa yollarını kullanabilmeniz için.
Add to Path
Node ve Npm’i IDE’lerinizin terminallerinden veya komut istemi(CMD) kısımından da çalıştırabilmenizi sağlıyor.
Kurulum işleminin doğru bir şekilde gerçekleştiğine emin olmak için komut istemini açın, “node -v” ve “npm -v” yazın. Bu kodlar size Node Js’in ve Npm Package Manager’ın versiyonlarını gösterecektir.
Eğer bu şekilde bir versiyon numaraları çıkıyorsa işlem tamamlanmış demektir. Dediğim gibi bu makaleyi sonradan okuduğunuzda bu versiyon numaraları muhtemelen daha yüksek göreceksiniz. Bu bir sorun değil, sonuçta Node Js sürekli güncelleniyor.
Terminal kullanımı
Yazacağınız kodları Visual Studio Code’un terminali, Windows’un komut istemi veya Powershell gibi programlar yardımıyla da yazabilirsiniz. Ben Visual Studio Code’un terminalini kullanıyorum. Node’u test etmek için öncelikle masaüstüne bir klasör oluşturun ve Vs Code ile açın. Ben “test-paket” dedim ama siz istediğiniz ismi verebilirsiniz. Ardından kısayol ile klavyeden CTRL + “ tuşlarına basarak terminali programın altında ortaya çıkartabilirsiniz. Test edebilmek için bir Javascript dosyası oluşturun ardından içine console.log(‘…’) yazın. Terminalden “node index.js” dediğinizde eğer console.log yazınız çıkıyorsa, her şey düzgün çalışıyor demektir.
Farkettiyseniz normalde biz bu kodu görebilmek için tarayıcımızdan açmamız gerekiyordu. Ancak Node Js’i bilgisayarımıza indirdiğimiz için tarayıcıya ihtiyaç duymadan index.js’yi çalıştırabiliyoruz. Bu mantıkta Node Js ile bir sunucu yazabilirsiniz. Konumuz paketleme olduğu için daha derine girmeden ben konumuz paketlere dönüyorum.
“node index” yazsanız da bu kod çalışacaktır.
Node Package Manager
Bir uygulama geliştireceğinizde hali hazırda bulunan paketler ile kendi fonksiyonlarınızı yazmadan, kısacası dünyayı tekrardan keşfetmeyerek hızlıca projenizi oluşturabilirsiniz. Ya da şirketinizde ekipçe bir proje üzerinde geliştirme yapıyorsunuz. Diyelim ki bu ekip 3 kişilik ve bu 3 kişinin proje içerisinde farklı iş bölümü bulunuyor. Bu her bölüm kendi uğraştığı iş üzerinde çalışıp bunları paket haline çevirirse günü sonunda paketlerden oluşan bir proje ortaya çıkartmış olursunuz. Sonrasında başka bir projede çalışırken benzer bir iş yapacağınızda bu paketler sayesinde projelerinizde hızlı bir şekilde ilerleme kaydedebilirsiniz.
Bir paket başka paketlerden oluşabilir. Bu nedenle siz bir paket indirdiğinizde aslında birden fazla paket de indirmiş olabilirsiniz.
Kafanız karıştı biliyorum örnekler üzerinden daha detaylı anlatacağım. Bu paketleri nereden indiriyoruz? Tabi ki npmjs.com (Node Package Manager Js) sitesinden. Node Js’i bilgisayarınıza kurduğunuz zaman npm’i kullanarak kendi terminalimizden npmjs.com’daki herhangi bir paketi direkt projemize dahil ederek paketi kullanmaya başlıyorsunuz. Bu sitedeki paketlerin çoğu aslında open source (açık kaynak). Yani sizin haricinizde başka geliştiricilerin de paketinizi kullanmasına izin vermiş oluyorsunuz. Ancak siz paketlerinizi sadece belirli kişilerin görmesini istiyorsanız, “Npm Enterprise” ile ücretli olarak giriş yapmanız gerekiyor.
Normal üyelik işlemleri üzerinden devam edecek olursak, karşınıza üye olduktan sonra aşağıdaki gibi bir ekran çıkacaktır.
Arama alanında indireceğiniz paketleri bulabilirsiniz. Bu paket işlemlerinin nasıl yaygın olduğunu yandaki rakamlara bakarak da anlayabilirsiniz. Dikkat ederseniz sadece geçen ay 54 milyar paket indirilmiş. Örneğin, buradan bir paket aratalım ve inceleyelim. Ben rasgele “react-datepicker” adında bir paket arattım ve karşıma çıkan listede en popüler olanını buldum.
Genelde paketin kullanımını “Documentation” , “Installation” veya “Usage” başlıkları altında bulabilirisiniz. Yalnız bir paket indirirken dikkat etmeniz gereken durumlar var. Aynı web sitelerinde olduğu gibi burada da iyi ve kötü ayrımı bulunmaktadır. Her indirdiğiniz paket sizin isteklerinizi karşılayamayabilir. Bu nedenle indireceğiniz paketlerin Github üzerinden “Contributors” ve NpmJs üzerinden “Weekly download” alanlarına bakmanızda fayda var. Bu iki alanda rakamlar ne kadar yüksekse o kadar güvenilir diye düşünebilirsiniz. Örneğin, bu paketi insanlar 396 bin kere indirmişler.
Ayrıca Github üzerinden 239 kişi bu pakete destek vermiş ve kullanıcılar tarafından 4 bin kişi bu pakete yıldız vermiş. Ben React bir proje yapıyor olsam ve “date-picker” a ihtiyacım olsa muhtemelen bu paketi kullanırdım. Örneğin, siz bu pakete katkıda bulunmak isterseniz. Github üzerinden “repository” alanına basarak “request” yapabilirsiniz. Eğer bu paketin sağlayıcısı sizin yaptığınız geliştirmeyi kabul ederse artık siz de katkı sağlayanlar kısmında görünürsünüz.
Örnek paket kullanımı
Bunun için “simple-is” adında basit bir paket kullanacak ve bu paket üzerinden paket kullanımını anlayacağız. Adından da anlaşılacağı gibi gayet basit bir kullanımı var.
const deneme = 24;
Console.log(is.number(deneme)) //True
Örnek 1: siple-is kullanımıYukarıdaki örnekte, “deneme” adında bir değişken tanımladık ve “is.number()” yazarak bize bu değişkenin number olup olmadığını söylemesini istedik. Dönen “true/false” boolean değerine göre number olup olmadığını anladık.
Paketi daha önce oluşturduğum “test-paket” projesine kurdum. Siz de projenizde terminal alanında dokümanda yazdığı gibi “npm install simple-is” yazarak paketi projenize kurabilirsiniz. Kurulum işlemi tamamlandığında klasör alanınızda “node_modules” ve “package-lock.json” adında iki adet dosya geldiğini göreceksiniz.
“npm install simple-is” yazmak yerine kısaltmalar da kullanabilirsiniz. Örneğin “install” yerine “i” yazabilirsiniz.
Dikkat ederseniz “node_modules” klasörünün içinde bulunan “simple-is” klasörü Github’da bulunanlarla aynı olduğunu fark etmişsinizdir. Projenizde bir paket indirdiğiniz zaman daha önce “node_modules” isminde bir klasörünüz yoksa Npm bu klasörü otomatik olarak oluşturacaktır ve kullanmak istediğimiz paketlerimiz bu klasöre otomatik olarak yerleşecektir.
Yukarıdaki örnek bizim “Örnek 1” de gösterdiğimiz ile aynı. Sadece burada “Require” ı anlatmak istiyorum. “Require” in yaptığı işlem; parantezler içerisine herhangi bir paket ismi verdiğimiz zaman bu paket ismi “node_modules” klasörü altında aranıyor ve paketiniz varsa kullanacağınız alana dahil ediliyor. Bu sayede “is” üzerinden biz bu paketin fonksiyonlarına erişebiliyoruz.
Local paketler
Local paketleri en iyi şekilde anlamak için yeni bir proje oluşturun veya benim gibi bir önceki projenizin içini temizleyip denemeler yapın. Ben aşağıdaki örnekte görüldüğü gibi. “test-paket” projemin içerisini temizledim. Ayrıca içerisine “test1” ve “test2” adında ayrı 2 klasör oluşturdum. Siz bu klasörleri sanki ayrı birer proje gibi düşünebilirsiniz. Bu iki klasör için mantığını daha iyi kavramanız için “+ ( artı)” işaretine basarak iki terminal oluşturdum.
Öncelikle soldaki terminalden yani “test1” projemize “simple-is” paketin kurulumunu yapıyoruz. Ardından yukarıda anlattığım şekilde “simple-is” paketinin özelliğini kullanıyoruz.
Dikkat ettiyseniz solda bulunan terminalimizden index.js’yi çalıştırdığımızda paketimiz kurulu olduğu için bize “true” değeri döndü. Diğer terminalimizde ise paket kurulumu olmadığı için “is” kodunun ne işe yaradığını anlayamadı ve hata aldık. Bunun sebebi “npm i simple-is” dediğinizde siz aslında yerel bir paket kurmuş oluyorsunuz. Yani paketiniz yerel olarak sadece “test 1” projesinde aktif. Peki bu paketimizi global kursaydık ne olurdu? Bunun için öncelikle “test 1” projesinin içinde bulunan “node_modules” klasörünü ve “package-lock.json” dosyasını kaldırıyoruz.
Global paketler
Örneğin, bir paketi birden bilgisayarınızda birden fazla projenizde kullanacaksınız. Her seferinde bu paketi yerel kurmaktansa, sadece bir kere global olarak kurup tüm projelerinizde kullanabilirsiniz. Yalnız global ve local paketler arasında söyle bir fark bulunuyor; eğer siz projenizi ürün kısmına çıkacaksanız yani uygulamanızı artık yayınlayacaksanız global paketleriniz sadece sizin bilgisayarınıza kurulu olduğu ve zaman server tarafında bu paketler olmayacağı için programınız sıkıntıya girecektir. Bu nedenle sadece geliştirme ortamında kullanacağınız ortak paketleri global olarak kurun.
Peki global paketler nereye kuruluyor ?
Komut istemi (cmd) yada terminallerinizden “npm root -g” kodunu çalıştırırsanız bu sorunun cevabını alacaksınız. Aşağıda görünen yol benim bilgisayarımdaki konumu. Sizde daha farklı olabilir.
Global paketlerle uğraşırken özellikle Windows işletim sistemi kullananların yaşadığı bir sorunla karşılaştım. Siz paketinizi global olarak kurduğunuzu zannetseniz de NODE_PATH bulunamadığı için bazen paketiniz yüklenemeyebiliyor. Bunun çözümü için NODE_PATH’imizi sistem değişkenlerine eklemeniz gerekiyor. Bu işlem için masaüstünüzde bulunan “Bilgisayarım” iconuna sağ tıklayın ve özelliklere basın. Ardından aşağıda bulunan resimler üzerinden adım adım ilerleyin.
Artık global paketleriniz gösterdiğiniz yol üzerinden bulunabilir. Bu işlemleri yaptıktan sonra bilgisayarızını “restart” etmenizde fayda var. Eğer “restart etsem 10 saatte anca açılır benim külüstür” 😊 diyorsanız, görev yöneticisinden Vs Code ile alakalı olan ne görev varsa sonlandırmanız gerekiyor.
Projemize dönecek olursak. En son hatırlarsanız tertemiz bir şekilde yukarıdaki gibi projemizi bırakmıştık. Resimde görünen terminallerden herhangi birine “npm i -g simple-is” yazmanız global olarak kurmanız için yeterli olacaktır. Terminalden kodumuzu yazdıktan sonra “NODE_PATH” olarak yazdığımız yolunuza bakacak olursanız, paketimizin oraya yüklendiğini göreceksiniz.
Eğer Linux kullanıcıysanız “sudo npm i -g simple-is” şeklinde yazmanız gerekmektedir.
index.js‘de yazmış olduğunuz “require” kodu paketinizi yerel olarak “node_modules” klasörünü içinde arar, bulamazsa globale bakar ve bulursa oradan kullanır. Yani biz globaldeki paketimizi uygulamamızda yada geliştirici ortamımızda herhangi bir uygulamadan direkt olarak kullanabiliyoruz. Tekrar terminalinize geldiğimizde artık paketinizin her iki projede de çalıştığını göreceksiniz.
Package.json dosyası
Bizim Javascript projelerinizin kullanma kılavuzu gibi düşünebilirsiniz. Bizim oluşturduğumuz her bir uygulama aslında kendi içerisinde pakettir ve bu paketin aslında birden fazla pakete ihtiyacı olabilir. Yani biz bir tane uygulama geliştirdiğimiz zaman bir tane paket oluşturmuş oluyoruz. Kısacası bu package.json dosyası bizim uygulamamızın ne gibi paketlere ihtiyaç duyacağını veya bu uygulamanın ne gibi özelliklere sahip olacağını tutan bir tane “json” dosyasıdır. Daha net anlamak için, İlk olarak boş bir proje üzerinden başlayalım ve terminalden “npm init” komutunu çalıştırarak bize bir “package.json” dosyası oluşturmasını isteyelim.
Siz terminalinize npm kodunu yazdığınızda karşınıza yukarıdaki gibi sorular gelecektir.
Package name: Projenize ismini yazacağımız yerdir. Burada dikkat etmeniz gereken bir durum var. Eğer bu oluşturduğunuz paketi sonradan “npmjs.com” ‘da yayınlayacaksanız, bu alana yazacağınız isim kesinlikle unique(benzersiz) olması gerekir. Örneğin paketinizin ismini “simple-is” yaparsanız ve npmjs.com‘a göndermek isterseniz hata ile karşılaşırsınız. Bunu alanı domain adresi olarak düşünebilirsiniz.
Version: Projenize versiyon atadığınız alandır. Projenizin zaten ilk versiyonu olacağı otomatik olarak 1.0.0 atıyor. Bu alanı “enter” ile geçebilirsiniz.
Description: Projenizin içeriğini anlatacağınız açıklama alanıdır.
Entry point: Projenizin başlangıç dosyasının ne olduğunu tanımladığınız yerdir. Bu alana genelde index.js veya app.js yazılır ama siz farklı bir dosya ismi de tanımlayabilirsiniz.
Test command: Projenizde belli başlı testler yazmak istiyorsanız, komutlarınızı bu alana girmeniz gerekiyor.
Git repostory: Projenizin kaynak kodlarının barındığı bir Github deposu varsa onun linkini tanımladığınız yerdir. Bu alanı şimdilik boş geçtik ama ileride paketimizi Github’a attığımızda bu alana link ataması yapacağız.
Keywords : Bu alanı web sitelerindeki meta alanları olarak düşünebilirsiniz. Npmjs.com sayfasında paketinizi yayınladığınızda, aramalarda çıkmasını sağlayacak anahtar kelimeleri yazacağınız alandır.
Author : Bence burası sizin en çok seveceğiniz kısım. Bu paketi ben yaptım diye isminizi yazacağınız alan. 😊
Licence : Varsa lisans kısmı. Bu alanı da boş bıraktık.
Bu tüm işlemlerin sonunda girdiğimiz bilgilerin doğru olup olmadığını kontrol etmemiz için örnek bir “json” yapısı gösterecek, onayımızın ardından package.json dosyamızı oluşturacaktır. Onayladıktan sonra geri dönülmez bir seçim yaptığınızı sanmayın. Oluşturduğunuz tüm ayarlamaları package.json dosyanızdan tekrar düzeltebilirsiniz.
Yukarıda bulunan görselin tamamı sizin eseriniz. Ancak “scripts” alanını siz oluşturmadınız.
Scripts: Projelerinizde terminalinizden sürekli çalıştırdığınız uzun kodlarınıza kısa takma isimler atayacağınız alandır. Bu alanda “key:value” değerlerine göre atama yapmalısınız. Örneğin “echo ‘hello world’” yazdırmak için kısa kod olarak” deneme” kullanalım.
Terminalden “run” komutunu çalıştırdığınızda package.json kodu çalışacak, scripts objesinin içine girecek ve bu alanda “deneme” key’ini bulduğunda buna karşılık gelen kodu çalıştıracaktır.
Örnekleri çoğaltacak olursak; Bir adet “index.js” dosyası oluşturalım ve içine “console.log” yazdıralım. Normal koşullarda bunu yukarıdaki yazılarda “node index.js” kodu ile nasıl çalıştıracağımızı biliyoruz. Biz bu kodu sürekli kullanacaksak, bu kodu scripts’in içerisine farklı bir “key” ile atama yapabilir, ardından o key’e karşılık gelen kod ile otomatik olarak çalıştırabiliriz.
Paketimizi yüklediğimizde bu sefer daha önce hiç karşılaşmadığımız bir “dependencies” objesinin bizim json’ımızın içerisine yerleştiğini göreceksiniz. Hatıllarsanız “package.json” için bizim kullanma kılavuzumuzdur ve biz ona bakarak o projenin bağımlılıklarını anlarız demiştik. İşte “dependencies” tam olarak da bu işe yarıyor diyebiliriz. Projenizi paketleyip npmjs.com’a gönderdiğinizde, indiren insanlar bu alana bakarak sizin hangi paketleri kullandığınızın bilgisini bulabilir, ayrıca terminallerine “npm install” yazarak kullanacakları tüm paketleri otomatik indirebilirler. Örneğin “node_modules” klasörünü ve “package-log.json” dosyasını silerek sadece “npm install” kodunu çalıştıralım. Bu kodu çalıştırdıktan sonra paketinizin tekrardan yüklendiğini göreceksiniz.
Yukarıdaki örnekten de anlaşılacağı gibi paketimiz depedecies’in içerisine “0.2.0” son versiyonu ile eklendi. Projemizde hangi paketleri kullanıyorsak buraya depedecies olarak gelecektir.
Peki depedecies’in buraya gelmesinin sebebi ne ve neden buraya geliyor?
Örneğin siz uygulamalarınızda çok fazla paket kullanmak istiyor olabilirsiniz. Ancak kullandığınız bu paketlerin bağımlılıkları birbiri ile geliyor olabilir. Örneğin “simple-is” paketinin çalışması için kendi içinde 10 farklı paket ile geliyor olabilir. Bu paketlerin hepsinin gelmesi gün sonunda sizin “node_modules” klasörünüzün boyutunu büyütecektir. Burada 80Mb-100Mb ya da daha fazla olacağını düşünecek olursak, projeyi server a göndermek istendiğinde zaman olarak ciddi sıkıntılar yaşanacaktır. Bunun çözümü aslında kendi içerisinde saklı. Bunun için doğru yöntem; Server’a gönderim işlemi sırasında projeden “node_modules” ve “package-lock.json” silmek, artından kurulumları server üzerinden yapılması olacaktır (“npm install“ ile). Eğer depedecies olmasaydı paketlerinizi tek tek kurmanız gerekecek veya “node_modules”’u server’a taşımak zorunda kalınacaktı.
Package-lock.json
Artık konu ile alakalı birçok bilgiye sahip olduğumuza göre bu dosyanın ne işe yaradığına değinebiliriz. Projemize her paket eklediğinizde “node modules” kılasörünüzün değiştiğinden bahsetmiştik. İşte bu “node_modules” klasöründe olan değişikliklerinin log kayıtlarının tutulduğu alan package-lock.json dosyasıdır. Örneğin aşağıdaki örnekte başka bir paket indirdiğimizde bu alanın değiştiğini görebilirsiniz.
devDependencies
Depedecies’ler bizim geliştirme ortamımızda da yani production kısmında ihtiyacımız olan paketlerimizdir. Ancak bizim sadece geliştirme ortamında ihtiyacımız olan paketlerimiz varsa, bu paketlerimizi devDependencies’lere göre düzenlememiz gerekir. Yani bu paketlerimiz aslında biz production kısmına çıktığımızda bir daha indirilmeyecekler ve sadece geliştirme ortamında kullanılacaklar. Eğer bir tane paketi devDependencies olarak eklemek istiyorsak “npm i webpack-cli --save-dev” yazmamız yani indireceğimiz paketin sonuna “--save-dev” yazmamız yeterli olacaktır.
Yukarıdaki örnekte “node_modules” klasörüne bir sürü paketin gelmesinin sebebi; “webpack-cli“ paketinin ihtiyaç duyduğu paketlerin de birlikte gelmesinden dolayıdır. Örneğin gelen paketler arasında” cross-spawn” isminde bulunan klasörü “npmjs.com” üzerinden arattığınızda aslında paket olarak var olduğunu göreceksiniz.
Paketlemeye işlemleri
Git ve Github kullanımı
Konumuz Git eğitimi olmadığından ufak tefek bilgiler haricinde çok fazla detaya girmeyeceğim. Ancak hiçbir şey bilmiyorsanız benim yaptıklarımın aynısını yapmanız günün sonunda “paketleme” amacınıza ulaşmanızı sağlayacaktır. Öncelikle bilgisayarınıza “Git” kurmanız gerekiyor. Kurulum işlemleri için git-scm.com sitesinden downloads linkinden işletim sisteminize uygun olanı yükleyebilirsiniz. “.exe” dosyasını indirdikten sonra tüm adınlara “next (ileri)” diyerek kurulumu tamamlayabilirsiniz. Kurulum işlemlerini tamamlandığınızda Komut istemi’ne benzer bir program ile karşılaşacaksınız. Aslına bakarsanız ikisi de aynı şey. “Komut istemi” veya “git bash” programlarında “git” komutunu çalıştırdığınızda karşınıza bu şekilde yazılar çıkıyorsa, kurulumunuz tamamlanmış demektir.
Artık Github hesabınıza bağlanıp dosyalarınızı oraya gönderebilirsiniz. Paket işlemlerine başlamadan önce ilk olarak github.com sitesinden üyelik oluşturmanız gerekiyor. Üyeliğinizi tamamladıktan sonra kullanıcı resminizin üzerinden “your repositories” kısmına tıklayarak ilk reponuzu oluşturabilirisiniz.
Yukarıdaki adımlar sonrasında repomuz oluştu. Ancak repomuzun içi boş olduğundan yukarıdaki şekilde gözüküyor. Kırmızı ile işaretli alandaki yönergelere göre projemizdeki dosyaları Github repomuza göndermeliyiz. Mavi ile işaretli alan github reponuzun linkini göstermektedir. Bu linki “https://github.com/yavuzakinci/test-paket.git” bir sonraki adımımızda package.json kılavuz dosyamızda ilgili yere kopyalayacağız.
“package.json” dosyamızın herhangi bir yerine “repository” objesi açarak ayarlamalar yapmamız gerekiyor. Type alanına “git” ve url alanına da yukarıda kopyaladığımız linki yapıştırıyoruz. Bundan sonrası için tamimiyle Github’ın bize söylediği adımları takip edeceğiz.
Bu adımları terminalimize yazarak reponuza göndermeden önce önce mutlaka daha önce de bahsettiğim sebeplerden ötürü “node_modules” ve “package-lock.json” dosyalarını silmeniz gerekiyor.
git init
Projenizin bir git repostories olduğunu belirtmiş oluyorsunuz yani “initialize (başlatmak)” yapıyorsunuz. İşe yaradığını dosyalarınızın yeşermesinden anlayabilirsiniz.
git add .
Tüm klasörlerinizini git repositories’e göndermek için.
git commit -m “first commit”
Göndereceğiniz dosyalar için bir mesaj yazıyorsunuz. (bu komutları detaylı git eğitimi aldığınızda daha rahat anlayacaksınız).
git remote add origin https://github.com/yavuzakinci/test-paket.git
Hangi repositories’e atacağınızı belirtiyorsunuz.
git push -u origin master
Master branch’ine dosyalarınızı gönderiyorsunuz.
Tüm işlemler sona erdiğinde, size Github hesabınızın kullanıcı adı / mailinizi ve şifrenizi soracak. Bunu bazı terminallerde içeride terminal alanında soruyor, bazen de küçük bir panel çıkartıyor. Bende panel çıktı. Terminal alanından şifre soranlar şaşırmasınlar güvenlik amaçlı git yazdığınız şifreyi gizliyor. Aslında klavyeniz çalışıyor yazıyorsunuz ancak, göremiyorsunuz bozuldu sanmayın. 😊
Aşağıdaki adımları tamamladığınızda Github repositories sayfanızı yenilerseniz dosyalarınızın yüklendiğini göreceksiniz.
Nmp’e paket yollamak
Github’da olduğu gibi burada da ilk olarak üye olmanız, mailinize gelen üyelik etkinleştirme butonuna basarak üyelik işlemini tamamlamanız ve son olarak npmjs.com sitesinden avatarınıza tıklayarak “paketler” kısmına geçmeniz gerekiyor.
Git den farklı olarak burada öncelikle teminalinizden “npm login” komutunu çalıştırarak npmjs login bilgilerinizi girmeniz ve giriş yapmanız gerekiyor. Şifre kısmı burada terminalden sordu ve daha önce dediğim gibi yazıyorsunuz ama yazmıyor gibisiniz 😊.
Sonrasında yapacağınız işlem çok kolay sadece “npm publish” yazarak tüm dosyalarınızı göndermiş oluyorsunuz. Npmjs.com paketleriniz alanında sayfayı yenilerseniz artık paketinizin yüklendiğini göreceksiniz.
Yükleme işlemini tamamladığımızda npmjs sitesindeki paketler sayfanızı yenileyin. Paketinizin içine girdiğinizde en tepede Github’ta yazmış olduğumuz “# test-paket” yani README.md dosyasının bu alana yerleştirişini göreceksiniz. Siz de diğer paketlerdeki gibi açıklamanızı README.md dosyasına yazarak paketinizin daha profesyonel görünmesini sağlayabilirsiniz. Package.json dosyamızın içine daha önce hatırlarsanız keywords’ler koymuştuk. Bunlarda “Keywords” başlığı altında ikinci alana yerleşmiş durumda.
Paketimizin içerisinde kullanılan Dependencies ve Dev Dependencies’leri buradan görebilirsiniz. Örneğin bu alanda “simple-is” ye tıklayarak ilgili pakete gidebilir, repository kısmında bulunan Github logosuna basarak da Github repositori’nize gidebilirsiniz.
Npm Js’den publish ettiğiniz paketleri silmek için “npm unpublish test-paket -f” komutunu terminalden çalıştırarak paketinizi silebilirsiniz.
Kısacası paketle ilgili her şeyi burada bulabilirisiniz. Tüm işlemleri gerçekleştirmiş ve artık paketinizi kullanıma hazır hale getirmiş oldunuz. Hatta yeni boş bir proje açarak terminalinize “npm install test-paket” derseniz oluşturduğunuz paketin yüklendiğini göreceksiniz.
Paketleme ile ilgili benim anlatacaklarım bu kadar. Umarım sizler için de faydalı bir makale olmuştur. Yukarıdaki işlemleri uygularken benim verdiğim isimle “test-paket” diye uygulamayın. Çünkü sizler deneme yaparken başka biri de makaleyi okuyup aynı isimle çalışma yapıyor olabilir. En güzeli deneme yaparken “test-paket-numara-isminiz” şeklinde benzersiz bir isim oluşturun.
