i18next से Intlayer में माइग्रेशन

i18next से Intlayer में माइग्रेट करने के लिए?

माइग्रेशन रणनीति

i18next से Intlayer में माइग्रेट करने के लिए दो पूरक रणनीतियां हैं:

1. Compat एडॉप्टर (मौजूदा ऐप्स के लिए अनुशंसित) — @intlayer/i18next स्थापित करें। यह पैकेज i18next के बिल्कुल समान API को उजागर करता है लेकिन सभी अनुवाद कार्य को हूड के तहत Intlayer को सौंपता है। आप अपने मौजूदा i18next.t(), i18next.changeLanguage(), और createInstance() कॉल रखते हैं — एकमात्र परिवर्तन import पथ और आरंभीकरण है।

2. पूर्ण माइग्रेशन — धीरे-धीरे i18next API को मूल Intlayer उपकरणों और सह-स्थित सामग्री के साथ .content.ts फाइलों में बदलें।

यह गाइड रणनीति 1 को पहले कवर करता है (drop-in compat एडॉप्टर), फिर वैकल्पिक पूर्ण माइग्रेशन के माध्यम से चलता है।

विषय सूची

त्वरित माइग्रेशन

निम्नलिखित चरण अपने मौजूदा i18next ऐप को बिना कोड परिवर्तन के Intlayer पर चलाने के लिए आवश्यक न्यूनतम हैं।

1. 1

   डिपेंडेंसी स्थापित करें

   Intlayer मुख्य पैकेज और compat एडॉप्टर स्थापित करें:

   bash

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   npx intlayer-cli init --interactive

   --interactive फ्लैग वैकल्पिक है। अगर आप एक AI एजेंट हैं तो intlayer-cli init का उपयोग करें।

   यह कमांड आपके वातावरण का पता लगाएगा और आवश्यक पैकेज स्थापित करेगा। उदाहरण के लिए:

   bash

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   npm install intlayer @intlayer/i18next @intlayer/sync-json-plugin

   आप i18next को स्थापित रख सकते हैं — compat एडॉप्टर इसे devDependency / peerDependency के रूप में TypeScript प्रकारों के लिए उपयोग करता है।

2. 2

   Intlayer को कॉन्फ़िगर करें

   intlayer init कमांड एक स्टार्टर intlayer.config.ts बनाता है। अपने मौजूदा locales से मेल खाने के लिए इसे अपडेट करें और syncJSON प्लग-इन को अपनी संदेश फाइलों पर इंगित करें:

   intlayer.config.ts

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   import { Locales, type IntlayerConfig } from "intlayer";
   import { syncJSON } from "@intlayer/sync-json-plugin";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         // अपने सभी मौजूदा locales यहां जोड़ें
       ],
       defaultLocale: Locales.ENGLISH,
     },
     plugins: [
       syncJSON({
         // i18next प्लेसहोल्डर सिंटैक्स से मेल खाता है: {{name}}
         format: "i18next",
         source: ({ locale }) => `./src/locales/${locale}.json`,
         location: "src/locales",
       }),
     ],
   };
   
   export default config;

   source एक locale को इसकी JSON फाइल पथ पर मैप करता है। location Intlayer को बताता है कि परिवर्तनों की निगरानी के लिए कौन सा फोल्डर देखना चाहिए। format: 'i18next' विकल्प सुनिश्चित करता है कि {{name}} जैसे प्लेसहोल्डर को सही ढंग से पार्स किया जाता है।

3. 3

   बंडलर एलिएस को अपडेट करें (वैकल्पिक)

   अगर आप एक bundler (Vite, Webpack, esbuild) का उपयोग कर रहे हैं, तो आप एक मॉड्यूल एलिएस को इंजेक्ट कर सकते हैं ताकि import ... from 'i18next' स्वचालित रूप से @intlayer/i18next को हल करे। यह आपके कोडबेस में आयात को मैन्युअल रूप से बदलने की आवश्यकता को हटा देता है।

   Vite के लिए:

   vite.config.ts

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   import { defineConfig } from "vite";
   import i18nextVitePlugin from "@intlayer/i18next/plugin";
   
   export default defineConfig({
     plugins: [i18nextVitePlugin()],
   });

   i18nextVitePlugin() vite-intlayer के intlayer() प्लग-इन को लपेटता है और i18next → @intlayer/i18next एलिएस आपके लिए जोड़ता है। vite-intlayer से सादे intlayer() प्लग-इन का उपयोग करने से dictionaries को संकलित किया जाता है लेकिन नहीं वह एलिएस जोड़ता है — आप तब अगले चरण में imports को @intlayer/i18next पर नाम दें (देखें)।

त्वरित माइग्रेशन के लिए बस इतना ही। आपका ऐप अब Intlayer पर चलता है जबकि हर i18next import और API को बरकरार रखता है।

पूर्ण माइग्रेशन

नीचे दिए गए चरण वैकल्पिक हैं और वृद्धिशील रूप से किए जा सकते हैं। वे पूर्ण Intlayer फीचर सेट को अनलॉक करते हैं: visual editor, CMS, typed content फाइलें, AI-powered अनुवाद, और बहुत कुछ।

1. 4

   स्पष्ट import नाम देना (वैकल्पिक)

   वैकल्पिक

   अगर आप अपनी स्रोत फाइलों में निर्भरता को स्पष्ट बनाना पसंद करते हैं, या अगर आप import को एलिएस करने के लिए bundler प्लग-इन का उपयोग नहीं कर रहे हैं, तो आप आयात को मैन्युअल रूप से नाम दे सकते हैं:

   सभी तालिका सामग्री दिखाएं

   सभी तालिका सामग्री दिखाएं

   सभी डेटा सामग्री को स्पष्ट रूप से देखने के लिए तालिका को मोडल में खोलें

   पहले	बाद में
   import i18next from 'i18next'	import i18next from '@intlayer/i18next'
   import { createInstance } from 'i18next'	import { createInstance } from '@intlayer/i18next'
   import { t } from 'i18next'	import { t } from '@intlayer/i18next'

   ये drop-in replacements हैं — कॉल signature, arguments, या return प्रकार में कोई परिवर्तन आवश्यक नहीं है।

2. 5

   AI-Powered अनुवाद ऑटोमेशन को सक्षम करें

   वैकल्पिक

   एक बार Intlayer वायर्ड होने के बाद, अनुपलब्ध अनुवादों को स्वचालित रूप से भरने के लिए इसके CLI का उपयोग करें:

   bash

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   # अनुपलब्ध अनुवादों के लिए परीक्षण (CI में जोड़ें)npx intlayer test# AI के साथ अनुपलब्ध अनुवाद भरेंnpx intlayer fill

   intlayer.config.ts में AI कॉन्फ़िगरेशन जोड़ें:

   intlayer.config.ts

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   import { Locales, type IntlayerConfig } from "intlayer";
   import { syncJSON } from "@intlayer/sync-json-plugin";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
       defaultLocale: Locales.ENGLISH,
     },
     plugins: [
       syncJSON({
         format: "i18next",
         source: ({ locale }) => `./src/locales/${locale}.json`,
         location: "src/locales",
       }),
     ],
     ai: {
       apiKey: process.env.OPENAI_API_KEY,
       // provider: "openai",     // default
       // model: "gpt-4o-mini",   // default
     },
   };
   
   export default config;

   सभी उपलब्ध विकल्पों के लिए Intlayer CLI documentation देखें।

माइग्रेशन के बाद आप क्या हटा सकते हैं

एक बार compat एडॉप्टर मौजूद होने के बाद, निम्नलिखित i18next boilerplate को हटाया जा सकता है:

जब आप आगे बढ़ने के लिए तैयार हों, Intlayer स्वचालित रूप से आपके कोडबेस में कहीं भी सभी .content.ts और .content.json फाइलों को खोजता है (डिफ़ॉल्ट रूप से, ./src के अंदर कहीं भी)। आप एक my-component.content.ts फाइल को अपनी logic के बगल में रख सकते हैं और Intlayer इसे बिल्ड समय पर किसी अतिरिक्त कॉन्फ़िगरेशन के बिना उठाएगा — कोई imports, कोई पंजीकरण, कोई केंद्रीकृत index फाइल आवश्यक नहीं है। यह अनुवाद को सह-स्थित करना पूरी तरह से घर्षण रहित बनाता है।

TypeScript को कॉन्फ़िगर करें

Intlayer module augmentation का उपयोग करता है आपके अनुवाद कुंजियों के लिए पूर्ण TypeScript intellisense प्रदान करने के लिए। सुनिश्चित करें कि आपका tsconfig.json auto-generated प्रकारों को शामिल करता है:

{  // ... आपकी मौजूदा TypeScript कॉन्फ़िगरेशन  "include": [    // ... आपकी मौजूदा TypeScript कॉन्फ़िगरेशन    ".intlayer/**/*.ts", // auto-generated प्रकारों को शामिल करें  ],}

Git कॉन्फ़िगरेशन

Intlayer के generated directory को अपने .gitignore में जोड़ें:

# Intlayer द्वारा जनरेट की गई फाइलों को अनदेखा करें.intlayer

आगे बढ़ें

• Visual Editor — अपने ब्राउज़र में translations को visually प्रबंधित करें: Intlayer Visual Editor
• CMS — सामग्री को बाहरी रूप से प्रबंधित करें: Intlayer CMS
• VS Code Extension — autocompletion और real-time अनुवाद त्रुटि पहचान प्राप्त करें: Intlayer VS Code Extension
• CLI Reference — CLI commands की पूर्ण सूची: Intlayer CLI