Intlayer कैसे काम करता है

अवलोकन

Intlayer के पीछे मुख्य विचार यह है कि प्रति-कंपोनेंट सामग्री प्रबंधन को अपनाया जाए। तो Intlayer का विचार यह है कि आपको अपनी सामग्री को अपनी कोडबेस में कहीं भी घोषित करने की अनुमति दी जाए, जैसे कि आपके कंपोनेंट के समान डायरेक्टरी में।

.└── Components    └── MyComponent        ├── index.content.cjs        └── index.mjs

ऐसा करने के लिए, Intlayer की भूमिका आपके प्रोजेक्ट में मौजूद सभी विभिन्न प्रारूपों में आपके सामग्री घोषणा फ़ाइलों को ढूंढना है, और फिर उनसे डिक्शनरीज़ उत्पन्न करना है।

तो इसमें दो मुख्य चरण होते हैं:

• निर्माण चरण
• व्याख्या चरण

डिक्शनरीज़ निर्माण चरण

निर्माण चरण तीन तरीकों से किया जा सकता है:

• CLI का उपयोग करके npx intlayer build के साथ
• vscode एक्सटेंशन का उपयोग करके
• ऐप प्लगइन्स का उपयोग करके जैसे vite-intlayer पैकेज, या उनके Next.js के लिए समकक्ष। जब आप इन प्लगइन्स में से किसी एक का उपयोग करते हैं, तो Intlayer स्वचालित रूप से आपके डिक्शनरीज़ का निर्माण करेगा जब आप अपना एप्लिकेशन शुरू (डेव) या निर्माण (प्रोड) करेंगे।

1. सामग्री फ़ाइलों की घोषणा

   • सामग्री फ़ाइलें विभिन्न प्रारूपों में परिभाषित की जा सकती हैं, जैसे TypeScript, ECMAScript, CommonJS, या JSON।
   • सामग्री फ़ाइलें प्रोजेक्ट में कहीं भी परिभाषित की जा सकती हैं, जो बेहतर रखरखाव और स्केलेबिलिटी की अनुमति देती हैं। सामग्री फ़ाइलों के लिए फ़ाइल एक्सटेंशन सम्मेलनों का पालन करना महत्वपूर्ण है। यह एक्सटेंशन डिफ़ॉल्ट रूप से *.content.{js|cjs|mjs|ts|tsx|json} है, लेकिन इसे कॉन्फ़िगरेशन फ़ाइल में संशोधित किया जा सकता है।

2. डिक्शनरीज़ का निर्माण

   • डिक्शनरीज़ सामग्री फ़ाइलों से उत्पन्न होती हैं। डिफ़ॉल्ट रूप से, Intlayer डिक्शनरीज़ प्रोजेक्ट की .intlayer/dictionaries डायरेक्टरी में उत्पन्न होती हैं।
   • ये डिक्शनरीज़ विभिन्न प्रारूपों में उत्पन्न होती हैं ताकि सभी आवश्यकताओं को पूरा किया जा सके और एप्लिकेशन के प्रदर्शन को अनुकूलित किया जा सके।

3. डिक्शनरी प्रकारों का निर्माण

आपके डिक्शनरीज़ के आधार पर, Intlayer प्रकार उत्पन्न करेगा ताकि उन्हें आपके एप्लिकेशन में उपयोग किया जा सके।

• डिक्शनरी प्रकार Intlayer डिक्शनरीज़ से उत्पन्न होते हैं। डिफ़ॉल्ट रूप से, Intlayer डिक्शनरी प्रकार प्रोजेक्ट की .intlayer/types डायरेक्टरी में उत्पन्न होते हैं।

• Intlayer मॉड्यूल वृद्धि एक TypeScript सुविधा है जो आपको Intlayer के लिए अतिरिक्त प्रकार परिभाषित करने की अनुमति देती है। यह विकास अनुभव को आसान बनाता है उपलब्ध तर्कों या आवश्यक तर्कों का सुझाव देकर। उत्पन्न प्रकारों में, Intlayer डिक्शनरी प्रकार या यहां तक कि भाषा कॉन्फ़िगरेशन प्रकार types/intlayer.d.ts फ़ाइल में जोड़े जाते हैं, और अन्य पैकेजों द्वारा उपयोग किए जाते हैं। ऐसा करने के लिए, यह आवश्यक है कि tsconfig.json फ़ाइल को प्रोजेक्ट की types डायरेक्टरी को शामिल करने के लिए कॉन्फ़िगर किया गया हो।

डिक्शनरीज़ की व्याख्या चरण

Intlayer का उपयोग करके, आप अपने एप्लिकेशन में useIntlayer हुक का उपयोग करके अपनी सामग्री तक पहुंच सकते हैं।

const MyComponent = () => {  const content = useIntlayer("my-component");  return <div>{content.title}</div>;};

यह हुक आपके लिए लोकेल का पता लगाने का प्रबंधन करेगा और वर्तमान लोकेल के लिए सामग्री लौटाएगा। इस हुक का उपयोग करके, आप मार्कडाउन की व्याख्या कर सकते हैं, बहुवचन प्रबंधन कर सकते हैं, और भी बहुत कुछ।

Intlayer की सभी विशेषताओं को देखने के लिए, आप डिक्शनरी दस्तावेज़ पढ़ सकते हैं।

दूरस्थ सामग्री

Intlayer आपको सामग्री को स्थानीय रूप से घोषित करने और फिर उन्हें CMS में निर्यात करने की अनुमति देता है ताकि आपकी गैर-तकनीकी टीम द्वारा इसे संपादित किया जा सके।

इसलिए आप CMS से सामग्री को अपनी एप्लिकेशन में पुश और पुल कर सकेंगे, जैसे कि आप अपने कोड के लिए Git के साथ करते हैं।

यदि आपके प्रोजेक्ट पर कॉन्फ़िगर किया गया है, तो Intlayer स्वचालित रूप से आपके लिए एप्लिकेशन शुरू (डेव) / निर्माण (प्रोड) करते समय CMS से सामग्री को प्राप्त करने का प्रबंधन करेगा।

दृश्य संपादक

Intlayer एक दृश्य संपादक भी प्रदान करता है जो आपको अपनी सामग्री को दृश्य तरीके से संपादित करने की अनुमति देता है। यह विज़ुअल एडिटर बाहरी intlayer-editor पैकेज में उपलब्ध है।

ऐप निर्माण अनुकूलन

आपके एप्लिकेशन के बंडल आकार को अनुकूलित करने के लिए, Intlayer दो प्लगइन्स प्रदान करता है: @intlayer/babel और @intlayer/swc प्लगइन्स।

डेवलपमेंट मोड में, Intlayer डिक्शनरीज़ के लिए केंद्रीकृत स्थिर आयात का उपयोग करता है ताकि विकास अनुभव को सरल बनाया जा सके।

निर्माण को अनुकूलित करके, Intlayer डिक्शनरीज़ के सभी कॉल्स को बदल देगा ताकि चंकिंग को अनुकूलित किया जा सके। इस तरह अंतिम बंडल केवल उन डिक्शनरीज़ को आयात करेगा जो उपयोग की जाती हैं।

कॉन्फ़िगरेशन में activateDynamicImport विकल्प को सक्रिय करके, Intlayer डिक्शनरीज़ को लोड करने के लिए डायनेमिक आयात का उपयोग करेगा। यह विकल्प डिफ़ॉल्ट रूप से अक्षम है ताकि एप्लिकेशन को रेंडर करते समय असिंक्रोनस प्रोसेसिंग से बचा जा सके।

@intlayer/babel डिफ़ॉल्ट रूप से vite-intlayer पैकेज पर उपलब्ध है,

@intlayer/swc डिफ़ॉल्ट रूप से next-intlayer पैकेज पर स्थापित नहीं है क्योंकि SWC प्लगइन्स अभी भी Next.js पर प्रयोगात्मक हैं।

अपने एप्लिकेशन के निर्माण को कॉन्फ़िगर करने का तरीका देखने के लिए, आप कॉन्फ़िगरेशन दस्तावेज़ पढ़ सकते हैं।

पैकेज

Intlayer कई पैकेजों से बना है, जिनमें से प्रत्येक का अनुवाद प्रक्रिया में एक विशिष्ट भूमिका है। यहां इस पैकेज की संरचना का एक ग्राफिकल प्रतिनिधित्व है:

intlayer

intlayer पैकेज का उपयोग एप्लिकेशन में सामग्री फ़ाइलों में सामग्री घोषित करने के लिए किया जाता है।

react-intlayer

react-intlayer पैकेज का उपयोग Intlayer डिक्शनरीज़ की व्याख्या करने और उन्हें React एप्लिकेशन में उपयोगी बनाने के लिए किया जाता है।

next-intlayer

next-intlayer पैकेज का उपयोग react-intlayer के ऊपर एक लेयर के रूप में किया जाता है ताकि Intlayer डिक्शनरीज़ को Next.js एप्लिकेशन में उपयोगी बनाया जा सके। इसमें Next.js वातावरण में Intlayer को काम करने के लिए आवश्यक सुविधाएँ शामिल हैं, जैसे अनुवाद मिडलवेयर, रूटिंग, या next.config.js फ़ाइल कॉन्फ़िगरेशन।

vue-intlayer

vue-intlayer पैकेज का उपयोग Intlayer डिक्शनरीज़ की व्याख्या करने और उन्हें Vue एप्लिकेशन में उपयोगी बनाने के लिए किया जाता है।

svelte-intlayer (कार्य प्रगति पर)

svelte-intlayer पैकेज का उपयोग Intlayer डिक्शनरीज़ की व्याख्या करने और उन्हें Svelte एप्लिकेशन में उपयोगी बनाने के लिए किया जाता है।

solid-intlayer (कार्य प्रगति पर)

solid-intlayer पैकेज का उपयोग Intlayer डिक्शनरीज़ की व्याख्या करने और उन्हें Solid.js एप्लिकेशन में उपयोगी बनाने के लिए किया जाता है।

preact-intlayer

preact-intlayer पैकेज का उपयोग Intlayer डिक्शनरीज़ की व्याख्या करने और उन्हें Preact एप्लिकेशन में उपयोगी बनाने के लिए किया जाता है।

angular-intlayer (कार्य प्रगति पर)

angular-intlayer पैकेज का उपयोग Intlayer डिक्शनरीज़ की व्याख्या करने और उन्हें Angular एप्लिकेशन में उपयोगी बनाने के लिए किया जाता है।

express-intlayer

express-intlayer पैकेज का उपयोग Express.js बैकएंड पर Intlayer का उपयोग करने के लिए किया जाता है।

react-native-intlayer

react-native-intlayer पैकेज Intlayer को Metro बंडलर के साथ काम करने के लिए प्लगइन्स को एकीकृत करने वाले उपकरण प्रदान करता है।

lynx-intlayer

lynx-intlayer पैकेज Intlayer को Lynx बंडलर के साथ काम करने के लिए प्लगइन्स को एकीकृत करने वाले उपकरण प्रदान करता है।

vite-intlayer

Intlayer को Vite बंडलर के साथ एकीकृत करने के लिए Vite प्लगइन के साथ-साथ उपयोगकर्ता की पसंदीदा लोकेल का पता लगाने, कुकीज़ प्रबंधन, और URL रीडायरेक्शन को संभालने के लिए मिडलवेयर शामिल करता है।

react-scripts-intlayer

intlayer-editor

intlayer-editor पैकेज का उपयोग विज़ुअल एडिटर का उपयोग करने की अनुमति देने के लिए किया जाता है। यह पैकेज, वैकल्पिक, एप्लिकेशनों में इंस्टॉल किया जा सकता है और इसे react-intlayer पैकेज द्वारा उपयोग किया जाएगा।
यह दो भागों में विभाजित है: सर्वर और क्लाइंट।

क्लाइंट में UI तत्व शामिल हैं जो react-intlayer द्वारा उपयोग किए जाएंगे।

सर्वर, जो Express पर आधारित है, विज़ुअल एडिटर अनुरोधों को प्राप्त करने और सामग्री फ़ाइलों को प्रबंधित या संशोधित करने के लिए उपयोग किया जाता है।

intlayer-cli

intlayer-cli पैकेज का उपयोग npx intlayer dictionaries build कमांड का उपयोग करके शब्दकोश उत्पन्न करने के लिए किया जा सकता है। यदि intlayer पहले से इंस्टॉल है, तो CLI स्वचालित रूप से इंस्टॉल हो जाता है और यह पैकेज आवश्यक नहीं है।

@intlayer/core

@intlayer/core पैकेज मुख्य Intlayer पैकेज है। इसमें अनुवाद और शब्दकोश प्रबंधन कार्य शामिल हैं। @intlayer/core मल्टीप्लेटफॉर्म है और अन्य पैकेजों द्वारा शब्दकोशों की व्याख्या करने के लिए उपयोग किया जाता है।

@intlayer/config

@intlayer/config पैकेज का उपयोग Intlayer सेटिंग्स को कॉन्फ़िगर करने के लिए किया जाता है, जैसे उपलब्ध भाषाएं, Next.js मिडलवेयर पैरामीटर, या एकीकृत संपादक सेटिंग्स।

@intlayer/webpack

@intlayer/webpack पैकेज का उपयोग Webpack आधारित एप्लिकेशन को Intlayer के साथ काम करने के लिए Webpack कॉन्फ़िगरेशन प्रदान करने के लिए किया जाता है। यह पैकेज एक मौजूदा Webpack एप्लिकेशन में जोड़ने के लिए एक प्लगइन भी प्रदान करता है।

@intlayer/cli

@intlayer/cli पैकेज एक NPM पैकेज है जिसका उपयोग Intlayer कमांड लाइन इंटरफेस से संबंधित स्क्रिप्ट्स को घोषित करने के लिए किया जाता है। यह सभी Intlayer CLI कमांड्स की एकरूपता सुनिश्चित करता है। यह पैकेज विशेष रूप से intlayer-cli और intlayer पैकेजों द्वारा उपयोग किया जाता है।

@intlayer/dictionaries-entry & @intlayer/unmerged-dictionaries-entry & @intlayer/dynamic-dictionaries-entry

@intlayer/dictionaries-entry, @intlayer/unmerged-dictionaries-entry और @intlayer/dynamic-dictionaries-entry पैकेज Intlayer शब्दकोशों के एंट्री पथ को लौटाते हैं। चूंकि ब्राउज़र से फाइल सिस्टम को खोजना असंभव है, इसलिए Webpack या Rollup जैसे बंडलर्स का उपयोग करके शब्दकोशों के एंट्री पथ को पुनः प्राप्त करना संभव नहीं है। ये पैकेज विभिन्न बंडलर्स जैसे Vite, Webpack और Turbopack के साथ बंडलिंग अनुकूलन की अनुमति देने के लिए डिज़ाइन किए गए हैं।

@intlayer/chokidar

@intlayer/chokidar पैकेज का उपयोग सामग्री फ़ाइलों की निगरानी करने और प्रत्येक संशोधन पर संशोधित शब्दकोश को पुनः उत्पन्न करने के लिए किया जाता है।

@intlayer/editor

@intlayer/editor पैकेज शब्दकोश संपादक से संबंधित उपयोगिताओं को प्रदान करता है। इसमें विशेष रूप से Intlayer संपादक के साथ एप्लिकेशन को इंटरफेस करने के लिए API और शब्दकोशों को हेरफेर करने के लिए उपयोगिताएं शामिल हैं। यह पैकेज क्रॉस-प्लेटफॉर्म है।

@intlayer/editor-react

@intlayer/editor-react पैकेज React एप्लिकेशन को Intlayer संपादक के साथ इंटरफेस करने के लिए स्टेट्स, कॉन्टेक्स्ट्स, हुक्स और घटकों को प्रदान करता है।

@intlayer/babel

@intlayer/babel पैकेज Vite और Webpack आधारित एप्लिकेशनों के लिए शब्दकोशों की बंडलिंग को अनुकूलित करने वाले उपकरण प्रदान करता है।

@intlayer/swc (WIP)

@intlayer/swc पैकेज Next.js एप्लिकेशनों के लिए शब्दकोशों की बंडलिंग को अनुकूलित करने वाले उपकरण प्रदान करता है।

@intlayer/api

@intlayer/api पैकेज बैकएंड के साथ इंटरैक्ट करने के लिए एक API SDK है।

@intlayer/design-system

@intlayer/design-system पैकेज CMS और विज़ुअल एडिटर के बीच डिज़ाइन तत्वों को साझा करने के लिए उपयोग किया जाता है।

@intlayer/backend

@intlayer/backend पैकेज बैकएंड प्रकारों को निर्यात करता है और भविष्य में बैकएंड को एक स्टैंडअलोन पैकेज के रूप में पेश करेगा।

हमारी स्मार्ट डाक्यूमेंटेशन के साथ चैट करें

• हमारी स्मार्ट डाक्यूमेंटेशन से अपने सवाल पूछें