Config Plugins को npm Packages के रूप में वितरित करना
अपने config plugin को npm module के रूप में package करें, app.plugin.js entry point जोड़ें, npm पर publish करें और सही ढंग से लागू होने का सत्यापन करने के लिए उसे किसी अन्य Expo project में इंस्टॉल करें।
Config Plugins को npm Packages के रूप में वितरित करना, CoddyKit पर React Native Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह React Native Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
Config Plugin को Package क्यों बनाएँ
यदि आप एक ही config plugin का उपयोग multiple Expo projects में करते हैं या उसे React Native समुदाय के साथ साझा करना चाहते हैं, तो उसे npm module के रूप में package करने से वितरण आसान हो जाता है। उपयोगकर्ता इसे npm install से install करते हैं और app.json में package name से इसका संदर्भ देते हैं। Expo बिना किसी अतिरिक्त configuration के package root में मौजूद app.plugin.js file को अपने-आप खोज लेता है।
npm Package की संरचना
Config plugin npm package की न्यूनतम संरचना होती है: एक package.json, package root पर app.plugin.js entry point (यही वह file है जिसे Expo खोजता है), और वैकल्पिक रूप से TypeScript source के लिए src/ folder, जो plugin file में compile होता है। app.plugin.js filename Expo की convention है — इसका नाम अलग न रखें, वरना Expo इसे अपने-आप नहीं खोज पाएगा।
# 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 Entry Point
app.plugin.js file को module.exports (CommonJS) का उपयोग करके default export के रूप में एक single function export करना होगा। यही function config plugin है — यह config और वैकल्पिक options लेता है, modifications लागू करता है और modified config लौटाता है। यदि आपके package में TypeScript build step है, तो app.plugin.js compiled build/ directory से केवल re-export करता है।
// 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 को Configure करना
Config plugin package के package.json में standard fields के साथ Expo-विशिष्ट कुछ conventions भी आवश्यक होती हैं। main को अपने compiled JS entry पर सेट करें (app.plugin.js पर नहीं — वह अलग है)। @expo/config-plugins को peerDependencies में सूचीबद्ध करें (सामान्य dependencies में नहीं), ताकि उपयोगकर्ता अपना installed version इस्तेमाल करें और duplicate installs से बचें। Package name में expo- prefix लगाएँ या @yourorg/expo-plugin-name जैसा scoped name इस्तेमाल करें।
{
'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'
}
}Plugin को TypeScript में लिखना
@expo/config-plugins TypeScript types export करता है, जिससे अपने plugin को सही प्रकार देना आसान हो जाता है। अपने options interface के साथ ConfigPlugin generic type का उपयोग करें। TypeScript type errors (जैसे invalid manifest key पास करना) को consumer के prebuild time पर नहीं, बल्कि compile time पर पकड़ लेता है। declaration files (.d.ts) generate करें, ताकि options पास करते समय उपयोगकर्ताओं को IntelliSense मिल सके।
// 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 से Re-export करना
TypeScript का उपयोग करते समय आपका source code build/ में compile होता है, लेकिन Expo root पर app.plugin.js खोजता है। एक न्यूनतम app.plugin.js बनाएँ, जो compiled output को require करे। यह अलगाव TypeScript source को साफ़ रखते हुए सही entry point उपलब्ध कराता है, जिसकी Expo का module resolution अपेक्षा करता है। यह file आम तौर पर केवल एक या दो lines की होती है।
// 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;Published Plugin को Install और उपयोग करना
npm पर publish होने के बाद उपयोगकर्ता package install करके उसे app.json plugins में जोड़ते हैं। Expo package को name से resolve करता है, node_modules folder में app.plugin.js खोजता है और prebuild के दौरान उसे चलाता है। उपयोगकर्ता options को plugin array tuple के दूसरे element के रूप में पास करता है। यह Expo के अपने first-party plugins जैसा ही developer experience है।
# Install the plugin
npm install expo-plugin-my-sdk
# app.json
{
'expo': {
'plugins': [
[
'expo-plugin-my-sdk',
{
'apiKey': 'sk-live-abc123',
'enableAnalytics': true
}
]
]
}
}Publish करने से पहले Testing
npm पर publish करने से पहले अपने plugin का स्थानीय रूप से npm link या test app के package.json में दिए गए relative file: path से test करें। इससे publish किए बिना तेज़ी से बदलाव आज़माए जा सकते हैं। स्थानीय testing के बाद tarball बनाने के लिए npm pack का उपयोग करें और उसकी सामग्री की जाँच करें, ताकि सही files शामिल होने की पुष्टि हो सके। Plugin के end-to-end काम करने की पुष्टि होने के बाद ही publish करें।
# 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 पर Publish करना
अपने plugin को npm publish से publish करें। सुनिश्चित करें कि package.json का files field app.plugin.js और build/ को शामिल करता हो, लेकिन src/ को नहीं (उपयोगकर्ताओं को TypeScript source की आवश्यकता नहीं होती)। semantic versioning का उपयोग करें: bug fixes के लिए patch version, नए options के लिए minor version और config में breaking बदलाव (जैसे किसी option का नाम बदलना) होने पर major version बढ़ाएँ।
# 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अच्छा README लिखना
Config plugin README में ये बातें शामिल होनी चाहिए: installation command, सभी उपलब्ध options दिखाने वाला सटीक app.json snippet, हर option के type, default और description वाली तालिका, तथा plugin द्वारा किए जाने वाले native changes की सूची (यह किन अनुमतियों को जोड़ता है और Info.plist की कौन-सी keys सेट करता है)। अपने native project को plugin के भरोसे सौंपने से पहले developers को समझना आवश्यक है कि plugin क्या बदलता है।
## 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 AndroidManifestVersioning और Breaking Changes
Config plugin के उपयोगकर्ता आपका plugin लागू करने के लिए expo prebuild चलाते हैं — वे runtime पर आपके code को सीधे call नहीं करते। Breaking changes में options का नाम बदलना, options हटाना, किसी option का type बदलना या ऐसा अलग native output बनाना शामिल है जो पहले जोड़ी गई entry को हटा दे। Breaking changes को हमेशा CHANGELOG.md में दर्ज करें और major version बढ़ाएँ, ताकि उपयोगकर्ता किसी सुरक्षित version को pin कर सकें।
// 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 configurationत्वरित जाँच
इस lesson में React Native Mobile Development की अवधारणाओं की अपनी समझ जाँचें।
Lesson का पुनरावलोकन
इस lesson में आपने सीखा: root पर app.plugin.js के साथ config plugin के लिए npm package की संरचना कैसे बनाएँ, plugin को TypeScript में कैसे लिखें और app.plugin.js से re-export कैसे करें, और publish करने से पहले npm link से स्थानीय testing कैसे करें। आपने यह भी देखा कि सही peerDependencies और files fields के साथ package.json को कैसे configure करें। अब हम iOS App Store submission प्रक्रिया पर चर्चा करेंगे।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “Config Plugins को npm Packages के रूप में वितरित करना” पाठ निःशुल्क है?
हाँ — React Native Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Config Plugins को npm Packages के रूप में वितरित करना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“Config Plugins को npm Packages के रूप में वितरित करना” में मैं क्या सीखूँगा?
अपने config plugin को npm module के रूप में package करें, app.plugin.js entry point जोड़ें, npm पर publish करें और सही ढंग से लागू होने का सत्यापन करने के लिए उसे किसी अन्य Expo project में इंस्टॉल क… आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Native Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या React Native Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Native Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“Config Plugins को npm Packages के रूप में वितरित करना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस React Native Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर React Native Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Config Plugins क्या हैं और उनका उपयोग कब करें
- अपना पहला Config Plugin लिखना
- AndroidManifest और Info.plist में बदलाव करना
- Config Plugins को npm Packages के रूप में वितरित करना