React Componentini Npm Paketi Yapmak

Ömer Gülçiçek
Jan 21 · 2 min read

Site geliştirirken sağ tarafta çıkan scroll bar’ları her zaman gizlemeyi tercih ettim. Çok sağlıklı bir yol olmayabilir fakat sayfanın tasarımını bozması beni çok rahatsız ediyordu. Ardından bir süredir düşündüğüm tasarımı koda dökerek yuvarlak bir progress bar geliştirdim. Son olarakta bunu bir paket haline getirip npm’e atmaya karar verdim. Bu makalede ise adım adım bu işlemleri anlatacağım.

React Npm Template

İlk olarak Chan Jing Hong’ın geliştirdiği React Npm Template’ini klonluyoruz. Bu paket bize React’ı build etmemize sağlayacak en temel gereksinimleri sağlıyor.

Image for post
Image for post
React Npm Template

React Component’inizi Eklemek

İkinci aşamada geliştirdiğiniz React componentini /src klasörünün içerisine taşıyoruz. İhtiyaç duyacağınız tüm .css yada .js dosyalarını burada tutuyoruz.

Image for post
Image for post
React Component’inin Eklenmesi

package.json Dosyasının Düzenlenmesi

package.json dosyasını açıp "name": "YOUR_PACKAGE_NAME" olan satırda npm paketimize kullanılmayan bir isim vermemiz gerekiyor. Paketiniz için ihtiyaç duyduğun farklı paketler var ise burada eklememiz gerekiyor. Ben geliştirdiğim pakette bunlara ek farklı bir ihtiyacım olmadığı için olduğu gibi bıraktım. Dosyanız şunun gibi duracak;

npm install (yada yarn install) komutu ile paketlerimizin tamamının yüklenmesini bekliyoruz.

webpack.config.js

Son aşamaya geçmeden önce webpack config dosyamızda componentimizin konumunu belirtip, ES6 kodlarımızın ES5’e çevrildiğinde hangi konuma çıkarılması gerektiğini belirtiyoruz.

Kodlarınızı Paketlemek

Ve son olarak npm run build komutu ile kodlarımızın tarayıcıların anlayacağı seviyeye dönüşmesini bekliyoruz. Sonrasında paketimiz npm’e gönderilmeye hazır.

npm login komutu ile üyeliğimize giriş yaptıktan sonra, npm publish komutu ile paketimizi npm’de yayınlıyoruz. Her publish’te package.json dosyasında versiyon yükseltmeyi unutmayın.

Kişisel Blog Sitem: omergulcicek.com

Makaleyi alkışlayarak destek olabilirsiniz 🌹

Kodcular

Bu yayın yazılım üzerine üretilen blogların bir araya…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store