Yapılandırma Eklentilerini npm Paketleri Olarak Dağıtma
Yapılandırma eklentinizi bir npm modülü olarak paketleyin, bir app.plugin.js giriş noktası ekleyin, npm'de yayımlayın ve doğru şekilde uygulandığını doğrulamak için başka bir Expo projesine kurun.
Yapılandırma Eklentilerini npm Paketleri Olarak Dağıtma, CoddyKit'te ücretsiz bir React Native Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Native Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Native Academy kursu toplamda 4 dersten oluşur.
Yapılandırma Eklentisi Neden Paketlenir
Aynı yapılandırma eklentisini birden çok Expo projesinde kullanıyor veya React Native topluluğuyla paylaşmak istiyorsanız, eklentiyi bir npm modülü olarak paketlemek dağıtımı kolaylaştırır. Kullanıcılar npm install ile yükler ve app.json içinde paket adıyla belirtir. Expo, tüketicinin ek yapılandırma yapmasına gerek kalmadan paket kökündeki app.plugin.js dosyasını otomatik olarak bulur.
npm Paketini Yapılandırma
Bir yapılandırma eklentisi npm paketi en az şu yapıya sahiptir: bir package.json, paket kökünde bir app.plugin.js giriş noktası (Expo'nun aradığı dosya budur) ve isteğe bağlı olarak eklenti dosyasına derlenen TypeScript kaynakları için bir src/ klasörü. app.plugin.js dosya adı Expo'nun kuralıdır; adı farklı koymayın, aksi hâlde Expo dosyayı otomatik olarak bulamaz.
# Package structure
expo-plugin-my-sdk/
app.plugin.js <- Expo auto-discovers this
index.js <- optional JS API exports
package.json
README.md
# Or with TypeScript build:
expo-plugin-my-sdk/
src/
withMyPlugin.ts
index.ts
build/
withMyPlugin.js <- compiled output
app.plugin.js <- re-exports from build/
package.jsonapp.plugin.js Giriş Noktası
app.plugin.js dosyası, module.exports (CommonJS) kullanarak varsayılan dışa aktarma olarak tek bir işlevi dışa aktarmalıdır. Bu işlev yapılandırma eklentisinin kendisidir; config ve isteğe bağlı options değerlerini alır, değişiklikleri uygular ve değiştirilmiş yapılandırmayı döndürür. Paketinizde bir TypeScript derleme adımı varsa app.plugin.js yalnızca derlenmiş build/ klasöründen yeniden dışa aktarım yapar.
// app.plugin.js (root of the npm package)
// Simple single-file plugin:
const { withInfoPlist } = require('@expo/config-plugins');
/** @type {import('@expo/config-plugins').ConfigPlugin<{ apiKey?: string }>} */
module.exports = function withMySDK(config, options = {}) {
if (!options.apiKey) {
throw new Error('[expo-plugin-my-sdk] apiKey option is required.');
}
return withInfoPlist(config, (iosConfig) => {
iosConfig.modResults['MySDKApiKey'] = options.apiKey;
return iosConfig;
});
};package.json Dosyasını Yapılandırma
Bir yapılandırma eklentisi paketinin package.json dosyasında standart alanların yanı sıra Expo'ya özgü birkaç kural bulunmalıdır. main alanını derlenmiş JS girişinize ayarlayın (app.plugin.js dosyasına değil; o ayrıdır). Tüketicilerin kendi yüklenmiş sürümlerini kullanması ve yinelenen yüklemelerden kaçınması için @expo/config-plugins paketini normal bağımlılıklar yerine peerDependencies içinde listeleyin. Paket adının önüne expo- ekleyin veya @yourorg/expo-plugin-name gibi kapsamlı bir ad kullanın.
{
'name': 'expo-plugin-my-sdk',
'version': '1.0.0',
'description': 'Expo config plugin for MySDK',
'main': 'build/index.js',
'files': ['build', 'app.plugin.js'],
'scripts': {
'build': 'tsc',
'prepare': 'npm run build'
},
'peerDependencies': {
'@expo/config-plugins': '>=7.0.0',
'expo': '>=50.0.0'
},
'devDependencies': {
'@expo/config-plugins': '^7.0.0',
'typescript': '^5.0.0'
}
}Eklentiyi TypeScript ile Yazma
@expo/config-plugins, TypeScript türlerini dışa aktarır; bu da eklentinizi doğru şekilde türlendirmenizi kolaylaştırır. Seçenekler arayüzünüzle birlikte ConfigPlugin genel türünü kullanın. TypeScript, tür hatalarını (geçersiz bir bildirim anahtarı geçirmek gibi) tüketicinin ön derleme zamanı yerine derleme zamanında yakalar. Tüketicilerin seçenekleri geçirirken IntelliSense alabilmesi için bildirim dosyaları (.d.ts) oluşturun.
// src/withMySDK.ts
import { ConfigPlugin, withInfoPlist, withAndroidManifest } from '@expo/config-plugins';
interface MySDKOptions {
apiKey: string;
enableAnalytics?: boolean;
}
const withMySDK: ConfigPlugin<MySDKOptions> = (config, options) => {
if (!options.apiKey) {
throw new Error('[expo-plugin-my-sdk] apiKey is required');
}
config = withInfoPlist(config, (c) => {
c.modResults['MySDKApiKey'] = options.apiKey;
c.modResults['MySDKAnalytics'] = options.enableAnalytics ?? true;
return c;
});
return config;
};
export default withMySDK;app.plugin.js Dosyasından Yeniden Dışa Aktarma
TypeScript kullanırken kaynak kodunuz build/ klasörüne derlenir; ancak Expo kökteki app.plugin.js dosyasını arar. Derlenmiş çıktıyı gerektiren en küçük biçimli bir app.plugin.js dosyası oluşturun. Bu ayrım, Expo'nun modül çözümlemesinin beklediği doğru giriş noktasını sağlarken TypeScript kaynaklarının temiz kalmasını sağlar. Dosya genellikle yalnızca bir veya iki satırdan oluşur.
// app.plugin.js (root)
// Re-export the compiled TypeScript plugin
module.exports = require('./build/withMySDK').default;
// Or with named export:
// const { withMySDK } = require('./build/index');
// module.exports = withMySDK;Yayınlanan Eklentiyi Yükleme ve Kullanma
npm'de yayınlandıktan sonra tüketiciler paketi yükler ve app.json içindeki eklentilere ekler. Expo paketi adına göre çözümler, node_modules klasöründe app.plugin.js dosyasını bulur ve ön derleme sırasında çalıştırır. Tüketici seçenekleri, eklenti dizisi demetinin ikinci öğesi olarak geçirir. Bu, Expo'nun kendi birinci taraf eklentileriyle tamamen aynı geliştirici deneyimidir.
# Install the plugin
npm install expo-plugin-my-sdk
# app.json
{
'expo': {
'plugins': [
[
'expo-plugin-my-sdk',
{
'apiKey': 'sk-live-abc123',
'enableAnalytics': true
}
]
]
}
}Yayınlamadan Önce Test Etme
npm'de yayınlamadan önce eklentinizi npm link kullanarak veya test uygulamasının package.json dosyasında göreli bir file: yolu belirterek yerel olarak test edin. Bu, yayınlama yapmadan hızlıca yineleme yapmanızı sağlar. Yerel testten sonra bir tarball oluşturmak ve içeriğini inceleyerek doğru dosyaların dahil edildiğini doğrulamak için npm pack kullanın. Eklentinin uçtan uca çalıştığını doğruladıktan sonra yayınlayın.
# Method 1: npm link (symlink)
cd expo-plugin-my-sdk
npm link
cd ../my-test-app
npm link expo-plugin-my-sdk
npx expo prebuild --clean
# Method 2: file path in package.json
{
'dependencies': {
'expo-plugin-my-sdk': 'file:../expo-plugin-my-sdk'
}
}
# Inspect pack output before publishing
npm pack --dry-runnpm'de Yayınlama
Eklentinizi npm publish ile yayınlayın. package.json içindeki files alanının app.plugin.js ve build/ dosyalarını içerdiğinden, ancak src/ klasörünü içermediğinden emin olun (tüketicilerin TypeScript kaynaklarına ihtiyacı yoktur). Anlamsal sürümleme kullanın: hata düzeltmeleri için yama sürümünü, yeni seçenekler için küçük sürümü, yapılandırmayı geriye dönük uyumsuz biçimde değiştirdiğinizde (ör. bir seçeneği yeniden adlandırdığınızda) ana sürümü artırın.
# Login to npm
npm login
# Verify what will be published
npm pack --dry-run
# Should include:
# app.plugin.js
# build/withMySDK.js
# build/withMySDK.d.ts
# package.json
# README.md
# Publish
npm publish
# For scoped packages (public)
npm publish --access publicİyi Bir README Yazma
Bir yapılandırma eklentisinin README dosyasında şunlar bulunmalıdır: yükleme komutu, kullanılabilir tüm seçenekleri gösteren tam app.json parçacığı, her seçeneğin türünü, varsayılan değerini ve açıklamasını belgeleyen bir tablo ve eklentinin yaptığı yerel değişikliklerin listesi (hangi izinleri eklediği ve hangi Info.plist anahtarlarını ayarladığı). Geliştiricilerin, yerel projelerine güvenmeden önce eklentinin neyi değiştirdiğini anlaması gerekir.
## Installation
npm install expo-plugin-my-sdk
## Setup (app.json)
[
'expo-plugin-my-sdk',
{
'apiKey': 'your-api-key',
'enableAnalytics': true
}
]
## Options
| Option | Type | Required | Default | Description |
|-------------------|---------|----------|---------|----------------------|
| apiKey | string | yes | - | Your MySDK API key |
| enableAnalytics | boolean | no | true | Enable analytics |
## Native Changes
- iOS: Adds `MySDKApiKey` to Info.plist
- Android: Adds `<meta-data android:name="com.mysdk.API_KEY" />` to AndroidManifestSürümleme ve Geriye Dönük Uyumsuz Değişiklikler
Yapılandırma eklentisi tüketicileri eklentinizi uygulamak için expo prebuild çalıştırır; kodunuzu çalışma zamanında doğrudan çağırmazlar. Geriye dönük uyumsuz değişiklikler şunları içerir: seçenekleri yeniden adlandırmak, seçenekleri kaldırmak, bir seçeneğin türünü değiştirmek veya daha önce eklenmiş bir girdiyi kaldıran farklı bir yerel çıktı üretmek. Geriye dönük uyumsuz değişiklikleri her zaman bir CHANGELOG.md dosyasında belgeleyin ve tüketicilerin güvenli bir sürüme sabitleyebilmesi için ana sürümü artırın.
// CHANGELOG.md example
## [2.0.0] - Breaking Changes
- BREAKING: Renamed `apiKey` option to `publishableKey` to match SDK terminology
- BREAKING: Removed `enableAnalytics` option (now always enabled)
- Added `merchantId` option for Apple Pay support
## [1.2.0]
- Added `enableAnalytics` option
## [1.1.0]
- Added Android support (previously iOS only)
## [1.0.0]
- Initial release: iOS Info.plist configurationKısa Kontrol
Bu dersteki React Native Mobil Geliştirme kavramlarını anlayıp anlamadığınızı test edin.
Ders Özeti
Bu derste şunları öğrendiniz: kökünde app.plugin.js bulunan bir yapılandırma eklentisi için npm paketinin nasıl yapılandırılacağını, eklenti TypeScript ile nasıl yazılır ve app.plugin.js dosyasından nasıl yeniden dışa aktarılır ve yayınlamadan önce npm link ile yerel olarak nasıl test edilir. Ayrıca package.json dosyasının doğru peerDependencies ve files alanlarıyla nasıl yapılandırılacağını gördünüz. Sırada iOS App Store gönderim sürecini ele alacağız.
Yapay zeka eğitmeniyle JavaScript öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Yapılandırma Eklentilerini npm Paketleri Olarak Dağıtma” dersi ücretsiz mi?
Evet — “Yapılandırma Eklentilerini npm Paketleri Olarak Dağıtma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Native Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Native Academy kursu toplamda 4 dersten oluşur.
“Yapılandırma Eklentilerini npm Paketleri Olarak Dağıtma” dersinde ne öğreneceğim?
Yapılandırma eklentinizi bir npm modülü olarak paketleyin, bir app.plugin.js giriş noktası ekleyin, npm'de yayımlayın ve doğru şekilde uygulandığını doğrulamak için başka bir Expo projesine kurun. React Native Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
React Native Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React Native Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Yapılandırma Eklentilerini npm Paketleri Olarak Dağıtma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu React Native Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React Native Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Yapılandırma Eklentileri Nedir ve Ne Zaman Kullanılır
- İlk Yapılandırma Eklentinizi Yazma
- AndroidManifest ve Info.plist Dosyalarını Değiştirme
- Yapılandırma Eklentilerini npm Paketleri Olarak Dağıtma