Blog
Storybook ve Rollup Kullanarak Node Package Manager’e (NPM) React Componenti Publish Etmek
NPM nedir?
NPM dünyanın en büyük yazılım kayıt defteridir. Her kıtadan açık kaynak geliştiricileri, paketleri paylaşmak ve ödünç almak için npm’yi kullanır ve birçok kuruluş özel geliştirmeyi yönetmek için de npm kullanır. (npmjs.com)
Günümüzde geliştirdiğimiz web uygulamalarının çoğu bileşen tabanlıdır ve bileşenlerden tam olarak yararlanmak için bunları yalnızca aynı uygulamada değil, farklı uygulamalarda da yeniden kullanıyoruz.
Her yeni React uygulamamızda kullanmak durumunda olduğumuz komponentleri NPM’e publish ederek, her seferinde componenti tekrar yazmak yerine basit bir komut ile bağımlılık olarak projemize ekleyebiliriz (npm i xxx).
Storybook Nedir?
Storybook, UI bileşenlerini ve sayfalarını ayrı ayrı oluşturmak için açık kaynaklı bir araçtır. Kullanıcı arabirimi geliştirme, test etme ve belgeleme işlemlerini kolaylaştırır. (Storybook)
Storybook kullanarak, oluşturacağımız komponentin nasıl göründüğünü test etmek için her defasında projeyi build edip tekrar konfigüre etmek yerine, sanal bir ortamda izleme imkanı bulacağız. Böylece create-react-app kullanmak zorunda kalmamış oluruz. İlerde bahsedeceğim react ve react-dom bağımlılıklarını ekleyeceğimiz projede tek yapmamız gereken şey React komponenti oluşturmak olacak.
Rollup Nedir?
Rollup, küçük kod parçalarını bir kitaplık veya uygulama gibi daha büyük ve daha karmaşık bir şeye derleyen JavaScript için bir modül paketleyicidir. (rollup.js)
Alternatifi olan Browserify veya Webpack, export ederken kaynak dosyanın hepsini bundle ederken, Rollup yalnızca kullanılması gereken kısımlarını bundle ederek optimizasyon sağlar.
Başlayalım
Bu uygulamada daha önceden publish ettiğim bir komponenti (SimplestGallery) sıfırdan publish edeceğim. Uyguladığım adımları kendi komponentinize uygulayarak siz de NPM’de bir pakete sahip olabilirsiniz.
Paket ismi seçmek
İlk önce paketinizin isminin daha önce npm’de kayıtlı olmadığından emin olmalısınız. remarkablemark.org sitesinden oluşturacağınız paketin mevcut olup olmadığını kontrol edebilirsiniz. Paketimin isminin mithat-react-gallery olacağına karar verdim ve mevcut olmadığından emin oldum.
Paket ismiyle bir klasör oluşturalım.
C:\Users\marma\OneDrive\Belgeler> mkdir mithat-react-gallery
Ben belgeler klasörümün altında oluşturdum. İçerisinde Türkçe karakter barındırmayan herhangi bir dizinde oluşturabilirsiniz.
cd mithat-react-gallery
code .
Klasörü VS Code’da açalım.
Proje dizinindeyken (C:\Users\marma\OneDrive\Belgeler**mithat-react-gallery**) aşağıdaki bloğu çalıştıralım.
npm init
Bu komut bize bir package.json dosyası oluşturacaktır. İlk başta bütün aşamaları enter tuşuyla onaylayalım. entry point: (index.js) olmasına dikkat edelim. Bunlar daha sonra değiştirilebilir şeyler olduğundan ilk aşamada detaylara inmeyeceğim.
Hala projemizin kök dizinindeyken
mkdir src
komutuyla src klasörü oluşturalım. Şimdi src klasörümüzün içerisinde index.js dosyası ve components klasörü oluşturalım. Components klasörünün içerisinde de bir index.js dosyası ve oluşturacağımız komponentimizin ismiyle bir klasör oluşturalım. Bu noktada oluşturacağımız komponentin isminin paketimizin ismiyle aynı olmasına gerek yoktur. Mesela benim oluşturacağım paketin ismi mithat-react-gallery iken bu bu paketten kullanmak istediğim komponenin ismi Gallery. Daha sonra bu paketi bir React komponentinden import ederken şöyle bir kullanım görürüz :
import {Gallery} from 'mithat-react-gallery'
Komponentimizin ismiyle oluşturduğumuz klasörün için bir index.js dosyası ve Komponentİsmi.js dosyası oluşturacağız. Komponentİsmi.js dosyasında dikkat etmemiz gereken kısım bunun bir React komponenti olacağı ve isimlendirme kurallarının React isimlendirme kurallarına uymasıdır. Ben daha önce belirttiğim gibi Gallery.js isminde bir dosya oluşturdum. Bu adımları tamamladıktan sonraki dosyaların ve klasörlerin görünümü şu şekilde olmalıdır:
Şu ana kadar bu projenin React ile herhangi bir bağlantısı olmadığını farketmişsinizdir. Sırada kullanacağımız bağımlılıkları yüklemek var. Projemizin kök dizinine gidip react ve react-dom kütüphanelerini yükleyelim.
npm install react react-dom --save-dev
Dikkat etmemiz gereken şey — save-dev flagını kullanarak, react ve react-dom’u devDependency olarak yüklememiz. devDependency olarak yüklediğimiz bu iki kütüphaneyi ayrıca peerDependencies’nin altında da belirtmemiz gerekiyor. Sonuç olarak package.json dosyamızın şu şekilde genişlediğini görürüz: