React İle Component Oluşturup npm de Paylaşma ve github-pages de Deploy Etme

React İle Component Oluşturup npm de Paylaşma ve github-pages de Deploy Etme

2019, Feb 10    

Yaptığınız React component’ı community ile paylaşarak başka insanların da faydalanmasını sağlayabilirsiniz. Bu yazıda kendi yaptığım component üzerinde bunu nasıl yapacağımızdan bahsedeceğim.

Yazıyı 3 kısma ayırdım. Bunlar şöyle;

  1. Webpack kullanarak localde çalışan bir component oluşturma
  2. Component’ı npm de paylaşma
  3. github-pages’e deploy etme

1) Component Oluşturma

Öncelikle bir folder oluşturmalı ve npm’i başlatmalıyız. Burada dikkat edilmesi gereken en önemli nokta paket adınızın npm’deki diğer paket adlarından farklı olması. Benim kullandığım folder adı ‘react-rate-component’

npm init dediğinizde varsayılan soruları kabul edip ilerleyebilirsiniz. Ya da

npm init -y

diyerek bütün soruları geçebilirsiniz.

Component’ı oluşturabilmemiz için başta react ve react-dom olmak üzere çeşitli paketlerimize ihtiyacımız var. Bu paketleri hepsini birden indiriyoruz.

İhtiyacımız olan paketleri indirmemiz için bir başka yöntem de benim package.json dosyamı koplayıp düzenledikten sonra npm install demeniz.

Projeyi webpack ile başlatabilmemiz için package.json’ a start komutunu eklemeliyiz.

"start": "webpack-dev-server --mode development"

Şimdi root folder’ımızın içine src ve examples/src adında folder’ları oluşturuyoruz.

src\   <- component'ımızın kaynak kodları ve style dosyalarımız
examples\src\  <- oluşturacağımız demo için

src folder’ın içine index.js adında bir dosya daha oluşturup component’ın kaynak kodlarını içine yerleştiriyoruz. Varsa eğer style’larımız için de bir dosya oluşturup onları da index.js’e import ediyoruz.

Component’ın iskeletini oluşturduğumuza göre şimdi de demo için bir iskelet oluşturalım.

Demo için component’ımızı ../../src ‘ den import etmeliyiz.

Şimdi ise component’ın bel kemiğini oluşturmaya geldi. Yani webpack ayarlarımızı yapmamız gerekli öncelikle. Bunun için root folder’a webpack.config.js adında bir dosya oluşturun. Ve aşağıdaki kodları bu dosyanın içine kopyalayın.

Daha fazla browser’da kodumuzu çalıştırabilmek için babel ayarlarımızı yapmamız gerekli. Babel component’ımızı es5’e transpile ediyor. Babel ayarlarını yapmak için root folder da .babelrc adında bir dosya oluşturuyoruz.

Şimdi oluşturduğumuz component’ın demosunu

npm start

diyarek localhost:3001 adresinde görebiliriz. Yaptığınız değişikliklerin otomatik olarak güncelleneceğini unutmayın lütfen.

2) Component’ı npm de Paylaşma

Component’ımızı oluşturduktan sonra sıra geldi npm’de paylaşma kısmına. Aslında burası en kolay kısmı yanlızca birkaç ayar yaptıktan sonra kolayca paylaşabiliriz.

İlk adım için babel -cli paketimizi indiriyoruz.

Ve dosyalarımızı transpile etmek için package.json dosyamıza bu komutu ekliyoruz. Ardından root folder’da dist adında bir dosya yaratıp main endpointi değiştiriyoruz.

npm run transpile

diyerek dosyalarımızın transpile edilmiş halini dist/index.js dosyamızda görebiliriz.

Her seferinde bu transpile işlemini yapmamak ve değişiklikleri en güncel halde olması için script dosyamıza prepublishOnly komutumuzu ekliyoruz package.json dosyamızın içine.

Sondan bir önceki adım olarak bir .npmignore dosyası oluşturacağız root klsörümüzün içine. Çünkü gereksiz dosyaların component’ı kullanan insanlara ulaşmasını ve component file’ını şişirmek istemeyiz.

Şimdi component’ımızı paylaşabiliriz.

npm publish

Burada dikkat edilmesi gereken bir diğer husus da npm ‘ecommand line’dan giriş yapmış olmalısınız. Onun için de;

npm login

Şimdi npm hesabınızdan paketinizi kontrol edebilirsiniz. Benimki şurada.

3)github-pages’a Deploy Etme

github-pages kullanarak projelerimizi deploy etmek için webpack olmazsa olmaz. Github projeleri github-pages branch’i üzerinden yapıyor. En hızlı yoldan deploy almak için şu paketi projemize indiriyoruz.

npm i gh-pages -D

Ve pakage.json’a şu komutları yazıyoruz.

build komutu dosyalarımızı production için minified etmeye yarıyor. Ancak webpack’de nereye build edeceğini belirtmemiz gerekli. Bunun için şu komutu webpack.config.js dosyamıza ekliyoruz.

npm run build

ile production için build edilmiş dosyalarımızı examples/dist altında de bulabiliriz.

Şimdi bir .gitignore dosyası oluşturacağız. Yine gereksiz dosyalarımızı göndermemek için.

Artık bir github repository oluşturup local dosyalarımızı bu repositorye gönderebiliriz.

Son adım olarak artık deploy alabiliriz. \o/

npm run deploy

Şimdi github’da projenizin setting ayarlarından github-pages ayarına bakarsanız component’ın oraya deploy edilmiş halini bulabilirsiniz. Benimki de şurada.

Component da herhangi bir değişiklikte paylaşma ve deploy yapma işini tek bir komutta toplamak için;

npm run publish-demo

⚠️ Bu ve diğer yazılarımı medium üzerinden de okuyabilirsiniz.

⚠️ Component için PropTypes kullanmayı ve diğer developerların projenizi rahatlıkla anlayabilmesi için README yazmayı unutmayın.

⚠️ Yazıda herhangi bir hata bulursanız ya da eksik olduğunu düşündüğünüz bir yer olursa lütfen bana bildirin. Bu hem benim yanlış öğrendiğim bir şeyi düzeltir hem de bu yazıyı okuyanları yanlış bilgilendirmiş olmam. Şimdiden teşekkürler.

Sevgiler.