React Native kütüphanenizi NPM’de yayınlama rehberi

Merhaba. Ben Fatih. DIGIEGGS’te front end geliştirici olarak çalışıyorum. Bu yazıda, geliştirdiğiniz bir React Native componentini, NPM’de nasıl yayınlayabileceğinizi, kendi deneyimimden yola çıkarak anlatacağım.

Geçen hafta, React Native ve Firebase ile OTP auth üzerinde çalışırken, kullanıcıdan telefon numarasıyla beraber, bir ülke alan kodu girişi almam gerekti. Önce, “Güzel bir picker kütüphanesi bulayım.” diye düşündüm fakat bulduğum kütüphaneler customizable olmadığı ve tasarımlarını beğenmediğim için kendi picker componentimi tasarlamaya karar verdim. Daha sonrasında ise şirket olarak açık kaynak dünyasına bir katkı yapmak niyetiyle yayınlamaya karar verdik.

Göz atmak veya denemek isterseniz: NPM |GitHub

Sol tarafta görebileceğiniz gibi, filtrelenebilen, bayraklı ve FlatList ile yaptığım için lazy olarak yüklenen ve performans dostu bir component geliştirdim.

Öncelikle, kullandığım üçüncü parti uygulamaları belirtmek istiyorum.

Ülkeleri https://restcountries.eu/ adresinden çekip, bir JSON dosyasına koydum.

Bayrakları ise, uri olarak https://www.countryflags.io/ adresinden çektim.

Şimdi, bu componenti nasıl NPM’de yayınlanacak hale getireceğimize bakalım.

Bir React Native projesi initialize edelim

Bare workflow ile, TypeScript konfigürasyonuna sahip bir proje oluşturmak için aşağıdaki komutu çalıştıralım.

npx react-native init AwesomeTSProject — template react-native-template-typescript

TypeScript konfigürasyonu

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react-native",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "strict": true
  },
  "include": ["src/index.tsx"],
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

Package.json konfigürasyonu

Package.json dosyası, NPM ile kütüphanenizin arasında bir haberleşme aracı görevi görüyor. Aşağıdaki, yayınladığım kütüphanenin package.json dosyası. Kopyala yapıştır yapmadan, oluşturduğunuz projedeki default dosya ile karşılaştırıp, kendi kütüphanenize göre bir package.json oluşturun.

{
  "name": "@digieggs-rn-country-code-picker", // Paketinizin ismi
  "version": "1.0.0", // Paketinizin versiyonu. 1.0.0 ile başlayıp semantic olarak artırıyoruz. Oraya da değineceğim.
  "main": "lib/module/index.js", // paketimiz built edildikten sonraki entry pointi
  "module": "lib/module/index.js", // entry point
  "react-native": "src/index.ts", // entry point
  "types": "lib/typescript/index.d.ts", // Paketimizin type tanımlamaları
  "description": "A searchable dropdown component to select a country code for your phone number input.", // Paketinizin NPM'de görünecek olan kısa açıklaması
 "files": [
    "lib/",
    "src/"
  ], // build için gerekli dosya konumları
  "keywords": [
    "react-native",
    "country",
    "country-code",
    "dialing code",
    "picker",
    "mobile",
    "ios",
    "android"
  ], // Paketimizin bulunabilmesi için anahtar kelimeler
  "bugs": {
    "url": "https://github.com/DIGIEGGS/rn-country-code-picker/issues"
  },
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "prepare": "bob build" // Paketimizi build edecek olan komut
  },
  "dependencies": {
    "react": "16.13.1",
    "react-native": "0.63.3",
    "react-native-svg": "^12.1.0" // Kullandığım iconlar için react-native-svg paketini yükledim
  },
  "devDependencies": {
    ...
    "@react-native-community/bob": "^0.16.2", // Paketimizi build etmek için kullanacağımız kütüphane
  },
  "peerDependencies": {
    "react-native-svg": "^12.1.0"
  }, // Buraya, paketin doğru çalışması için zorunlu kıldığımız dependency leri ekliyoruz. Kullanıcı manual olarak yüklemezse hata alır
  "repository": {
    "type": "git",
    "url": "git+https://github.com/DIGIEGGS/rn-country-code-picker"
  }, // Paketinizi açık kaynak olarak yayınlayacaksanız, repo detayları
  "author": "Fatih Can <contact@fatihcan.dev>", // NPM'de görünmesi için kişisel bilgileriniz
  "license": "MIT", // Lisans bilgisi
  "@react-native-community/bob": {
    "source": "src",
    "output": "lib",
    "targets": [
      "module",
      "typescript"
    ]
  } // Paketimizi build edecek olan builder bob için konfigürasyon
}

Package.json dosyasını düzenlemeyi bitirdikten sonra dependencylerimizi kuralım.

yarn

veya

npm install

Buradaki kilit dependency, @react-native-community/bob

https://github.com/callstack/react-native-builder-bob

Bu kütüphane, oluşturduğumuz componentleri / fonksiyonları compile edip, bir klasörün içine type tanımlamalarıyla beraber build ediyor. Benim kütüphanemde bu dosyanın adı, package.json’da output olarak tanımladığım lib klasörü.

Src klasörü

Oluşturacağımız paketteki tüm bileşenleri tutacağımız dosya olan src klasörü oluşturalım. Aşağıdaki gibi bir klasör yapısı işinizi kolaylaştıracaktır.

Ana componentimizi oluşturduktan sonra ise index.ts dosyasından aşağıdaki gibi export ediyoruz.

export { default as CallingCodePicker } from './CallingCodePicker';

Gerekli ignore dosyalarını da oluşturalım.

.gitignore

...

# generated files by bob
lib/

.eslintignore

node_modules/

# generated files by bob
lib/

.npmignore

tsconfig.json
src

# Logs
*.log
npm-debug.log

# Dependency directory
node_modules

# Runtime data
tmp

Kütüphanemizi build edelim

Aşağıdaki komut, builder bob’ı tetikleyecek ve kütüphanemizi build edecek.

yarn run prepare

Aşağıdaki resimdeki logları görüyorsanız, paketimiz başarıyla build edildi ve test edilmeye hazır.

Kurulum testi

Aşağıdaki komut, kütüphanemizi, yarn veya npm ile kurulabilen bir .tgz dosyası haline getirecek.

npm pack

Sol tarafta bir .tgz dosyası görüyorsanız işlem başarılı demektir. Dosyayı masaüstüne alıp, kurulumunu test etmek için yeni bir React Native projesi initialize edelim.

Projeyi oluşturduktan sonra, aşağıdaki komutu, dosya konumunu kendi .tgz dosyanıza göre değiştirip çalıştırın.

npm install C:\Users\digieggs\Desktop\digieggs-rn-country-code-picker-1.0.4.tgz

veya

yarn add C:\Users\digieggs\Desktop\digieggs-rn-country-code-picker-1.0.4.tgz

Kurulum başarılı olduysa, componentimizi aşağıdaki şekilde import edip kullanabiliriz.

import { CallingCodePicker } from '@digieggs/rn-country-code-picker'

Paketimizi yayınlama

Şu ana kadar herhangi bir yerde sorun yaşamadıysanız, paketimizi yayınlamaya hazırız. Aşağıdaki komut ile paketimizi yayınlayacağımız npm hesabını tanımlayacağız.

npm adduser

Eğer bir npm hesabınız yoksa şuradan kayıt olabilirsiniz.

Paketinizi bir organizasyon adı altında yayınlamak istemiyorsanız aşağıdaki komutu çalıştırın.

npm publish

Paketiniz scoped olacaksa yani benim gibi şirketinizin veya başka bir organizasyon adı altında yayınlamak istiyorsanız önce şu komutu çalıştırın.

npm config set scope <org-name> // e.g: @digieggs

Scoped paketler private olarak yayınlanır. Public olarak yayınlamak istiyorsak şu komutu çalıştırın.

npm publish --access public

Vee tebrikler! 🥳 Paketimiz yayınlandı ve aşağıdaki komutlar ile her yerden yüklenmeye hazır.

npm install <package_name>

veya

yarn add <package_name>

Paketinizde herhangi bir değişiklik yapacağınız zaman ise semantic versiyon artırma ilkelerine göre hareket etmelisiniz.

Sonuç

İlk NPM paketinizi yayınladınız. Her şey gibi bu da biraz zaman aldı fakat yeni bir şey öğrenmiş oldunuz. Paketinizi kullananlar olduğunu görünce bu çabaya değecek 🙂

Herhangi bir sorunuz olursa yorum yazmaktan çekinmeyin. Yeni yazılarda görüşmek üzere. Hoşçakalın! 👋