React kütüphanesi oluşturun ve NPM paketi olarak paylaşın
Amerika’yı yeniden keşfetmeye gerek var mı, tartışılabilir ama eğer getirisi sadece zahmet olacaksa gerek yok. Yazılım geliştirirken de bir çok işimizi zahmete girmeden halledebiliriz. Aldığımız hatanın çözümünü araştırıp saniyeler içinde anlayabilir ve çözeriz mesela. Çünkü önceden bu hata ile karşılaşıp ve çözümünü bulduğunda internette paylaşmış koca yürekli yazılımcılar var. İşte bu koca yüreklilik sadece hata çözümleri ile bitmiyor. Bir randevu sistemi barındıran site geliştireceğinizi düşünün. Güzel tasarımlı bir takvime, saat-dakika seçiciye, popup’a vb. ihtiyacınız olabilir. Neden hazırını alıp kullanmak yerine her şeyi sıfırdan siz geliştiresiniz ki ? Başta dediğim gibi eğer getirisi sadece zahmet olacaksa vakit harcamayalım boşuna. İşte diğer bir koca yürekli yazılımcı çeşidi: çok zaman alacak işlemleri yapmak ve herkesin kullanımına sunmak.
Her zaman hazır kullanmak yerine bazen de insanlara kullanmaları için hazır şeyleri biz sunmak isteriz. Bu yazımda sizlere React componentlerinizi NPM paketi olarak tüm dünya kullanımına sunmayı göstermek istedim. Öncelikle nelere ihtiyaç olduğuna bakalım;
- Github hesabınızda bulunan ve paket olarak paylaşmak istediğiniz proje.(Gitlab, Bitbucket vb. kullanılabilir).
- Paketinizin paylaşılacağı npmjs.com hesabı.
- NPM paket yöneticisinin makinenizde kurulu olması :D
Şimdi izleyeceğimiz adımlara bakalım;
1. create-react-library kurulumu
2. Componentlerimizi yazmak ve paketi hazır hâle getirmek
3. NPM’de paylaşmak
Kütüphane Oluşturma
Kütüphaneyi önce localimizde oluşturacağız. Bunun için create-react-library paketini kullanacağız. Bu paket sayesinde hem componentlerimizi yazacağız hem de içerisinde gelen example React projesinde deneyebileceğiz. Kurmak için ise terminalimizde `npm install -g create-react-library` komutunu çalıştıralım. Yetki hatası (permission denied) alırsanız lütfen `sudo npm install -g create-react-library` komutunu kullanın.
Artık create-react-library komutu ile makinemizde istediğimiz klasörde bir kütüphane oluşturabiliriz. Klasör oluşturun ve klasöre gidin, ardından komutu çalıştırın.
- mkdir library
- cd library
- create-react-library
Ben paket olarak size başta bahsettiğim, randevu sistemi barındıran siteler için hazırladığım, gün-saat seçiçi popup componentlerimi paylaşacağım.
create-react-library komutunu çalıştırdıktan sonra bizden sırasıyla bir kaç bilgi istedi, paket ismi, açıklaması, Github repo adresi vb. bunları girdikten sonra paket yöneticisi seçmemizi istedi (Package Manage) ben yarn kullanacağım dilerseniz npm olarak kalabilir. Son olarak template kısmında Typescript ile geliştirme yapacaksanız seçebilirsiniz. Default olarak Javascript gelecektir. Bu son seçim ile birlikte projemiz localimize kurulmuş oluyor.
Çalıştırmak için görselde de görebileceğiniz üzere `cd react-date-time-picker-popup && yarn start` komutunu kullanacağız. Paketimizi çalıştırdıktan sonra componentlerimizi import edip deneyebileceğimiz proje ise example klasörü içerisinde geliyor. Example projemizi çalıştırmak için ise `cd react-date-time-picker-popup/example && yarn start` komutunu kullanacağız.
Componentlerin Export Edilmesi
Sonraki adıma geçebiliriz ve yapmamız gereken src klasörünün altına kendi componentlerimizi yazmak. Yazdığımız componentleri index.js dosyasında export etmemiz gerekiyor (etmezsek import ederken paket isminden sonra dizin belirtmemiz gerekir). Export edeceğimiz componentleri index.js dosyasında import ederek de istediğimizi yapabiliriz. Fakat burda dikkat etmemiz gereken şeyler import ettiğimiz componentleri export ederken props’ları göndermeyi de unutmamak.
Bu görselde ise farklı dosyadan import edilmiş PopupComponent isimli componenti Popup ismiyle export ediyoruz. return olarak döndüğümüz componentin içine propslarımızı göndermeyi unutmuyoruz.
Componentlerin Import Edilmesi ve Denenmesi
Src klasörünün içinde tüm componentlerinizi export ettiyseniz NPM’e paylaşmadan önceki son adıma geçebiliriz: example projesinde componentlerimi import etmek ve denemek. Example klasörü içerisine baktığımızda başka bir React projesi olduğunu görürüz. Bu projede az önce export ettiğimiz componentleri import edip çalıştığını kontrol edeceğiz.
Görselde gördüğünüz gibi ‘react-date-time-picker-popup’ isimli paketimizden Popup ve DatePicker componentlerimizi import edip projemizde kullandık ve aşağıda gördüğünüz gibi sağlıklı bir şekilde çalıştı. Bu arada import ettiğimiz componentlerin stil dosyasını import etmek için de /dist/index.css yolunu kullandık.
Sanırım kontrol aşaması da tamamlandığına göre projemizi artık npmjs.com’a yükleyebiliriz.
NPM’e Paket Paylaşma
npm.js.com’da paketimizi paylaşmak için 2 komut yeterli olacaktır. Öncelikle terminalden npm’e login olacağız ardından paylaşımı yapacağız.
Terminalde projemizi açıyoruz ve `npm login` komutunu çalıştırıyoruz. Bizden npmjs.com hesabımıza ait bilgiler isteyecektir.
Görselde gördüğünüz gibi başarılı bir şekilde npmjs.com hesabımıza giriş yapabildik. Şimdi ise projemizi paylaşmak için son komutu çalıştırıyoruz: `npm publish`
Projemizi başarılı bir şekilde paylaşmış olduk. Son olarak npm.js sitesine giderek hesap > paketler sekmesinden kontrol edelim.
Readme Düzenleme & Ekleme
Projenize readme dosyası eklemek istiyorsanız yapmanız gereken proje ana dizinine README.md isimli bir markdown dosyası ekleyip, istediğiniz içeriği oluşturup ardından sırasıyla şu iki komutu terminalde (proje dizinindeyken) çalıştırmanız:
1. npm version patch
2. npm publish
Son olarak eklemek istediğim bir şey var. Projeyi oluştururken bizden Github repo linki istemişti fakat henüz projemizi Github’a yüklemedik.
Projeyi oluştururken verdiğimiz Github repo linkine projemizi yüklememiz gerekiyor, çünkü npm.js paket sayfasında bu adres kullanıcılara sunuluyor ve yüklemediğimiz zaman 404 sayfası ile karşılaşılıyor.
Okuduğunuz için teşekkür ederim umarım faydalı bir yazı olmuştur. Bir sonraki yazılarda görüşmek üzere.
