Intlayer का उपयोग करके अपने Vite और Vanilla JS वेबसाइट का अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)

विषय सूची

विकल्पों पर इन्टलेयर क्यों?

i18next या i18n.js जैसे मुख्य समाधानों की तुलना में, Intlayer एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:

Vite और Vanilla JS एप्लिकेशन में Intlayer सेट करने के लिए चरण-दर-चरण मार्गदर्शिका

1. 1

   निर्भरताएँ स्थापित करें

   npm का उपयोग करके आवश्यक पैकेज स्थापित करें:

   bash

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

   कोड कॉपी करें

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

   npx intlayer init --interactive
   

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

   यह कमांड आपके एनवायरनमेंट को डिटेक्ट करेगी और आवश्यक पैकेज इंस्टॉल करेगी। उदाहरण के लिए:

   bash

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

   कोड कॉपी करें

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

   npm install intlayer vanilla-intlayer
   npm install vite-intlayer --save-dev
   

   • intlayer मुख्य पैकेज जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, सामग्री घोषणा, ट्रांसपाइलेशन और CLI कमांड के लिए अंतर्राष्ट्रीयकरण उपकरण प्रदान करता है।

   • vanilla-intlayer पैकेज जो Intlayer को शुद्ध JavaScript / TypeScript अनुप्रयोगों के साथ एकीकृत करता है। यह एक पब/सब सिंगलटन (IntlayerClient) और कॉलबैक-आधारित सहायक (useIntlayer, useLocale, आदि) प्रदान करता है ताकि आपके ऐप का कोई भी हिस्सा बिना किसी UI फ्रेमवर्क पर निर्भर हुए लोकेल परिवर्तनों पर प्रतिक्रिया कर सके।

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

2. 2

   अपने प्रोजेक्ट का कॉन्फ़िगरेशन

   अपने एप्लिकेशन की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएँ:

   intlayer.config.ts

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

   कोड कॉपी करें

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

   import { Locales, type IntlayerConfig } from "intlayer";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         // आपके अन्य लोकेल
       ],
       defaultLocale: Locales.ENGLISH,
     },
   };
   
   export default config;
   

   इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर पुनर्निर्देशन, कुकी नाम, अपनी सामग्री घोषणाओं का स्थान और विस्तार सेट कर सकते हैं, कंसोल में Intlayer लॉग को अक्षम कर सकते हैं, और बहुत कुछ। उपलब्ध मापदंडों की पूरी सूची के लिए, कॉन्फ़िगरेशन दस्तावेज़ देखें।

3. 3

   अपने Vite कॉन्फ़िगरेशन में Intlayer एकीकृत करें

   अपने कॉन्फ़िगरेशन में intlayer प्लगइन जोड़ें।

   vite.config.ts

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

   कोड कॉपी करें

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

   import { defineConfig } from "vite";
   import { intlayer } from "vite-intlayer";
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [
       intlayer({
         proxy: {
           ignore: (req) => req.url?.startsWith("/api"),
         },
       }),
     ],
   });
   

   intlayer() Vite प्लगइन का उपयोग Intlayer को Vite के साथ एकीकृत करने के लिए किया जाता है। यह सामग्री घोषणा फ़ाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Vite एप्लिकेशन के भीतर Intlayer वातावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को अनुकूलित करने के लिए उपनाम (aliases) प्रदान करता है।

4. 4

   अपने एंट्री पॉइंट में Intlayer बूटस्ट्रैप करें

   किसी भी सामग्री को रेंडर करने से पहले installIntlayer() को कॉल करें ताकि वैश्विक लोकेल सिंगलटन तैयार हो जाए।

   src/main.ts

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

   कोड कॉपी करें

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

   import { installIntlayer } from "vanilla-intlayer";
   
   // किसी भी i18n सामग्री को रेंडर करने से पहले कॉल किया जाना चाहिए।
   installIntlayer();
   
   // अपने ऐप मॉड्यूल आयात करें और चलाएं।
   import "./app.js";
   

   यदि आप md() सामग्री घोषणाओं (Markdown) का भी उपयोग करते हैं, तो मार्कडाउन रेंडरर भी स्थापित करें:

   src/main.ts

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

   कोड कॉपी करें

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

   import { installIntlayer, installIntlayerMarkdown } from "vanilla-intlayer";
   
   installIntlayer();
   installIntlayerMarkdown();
   
   import "./app.js";
   

5. 5

   अपनी सामग्री की घोषणा करें

   अनुवादों को संग्रहीत करने के लिए सामग्री घोषणाएं बनाएं और प्रबंधित करें:

   आपकी सामग्री घोषणाएं आपके एप्लिकेशन में कहीं भी परिभाषित की जा सकती हैं जैसे ही वे contentDir निर्देशिका (डिफ़ॉल्ट रूप से, ./src) में शामिल होती हैं। और सामग्री घोषणा फ़ाइल एक्सटेंशन (डिफ़ॉल्ट रूप से, .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}) से मेल खाती हैं।

   अधिक विवरण के लिए, सामग्र घोषणा दस्तावेज़ देखें।

6. 6

   अपने JavaScript में Intlayer का उपयोग करें

   vanilla-intlayer, react-intlayer सरफेस API को प्रतिबिंबित करता है: useIntlayer(key, locale?) सीधे अनुवादित सामग्री लौटाता है। लोकेल परिवर्तनों की सदस्यता लेने के लिए परिणाम पर .onChange() को चेन करें - React री-रेंडर के स्पष्ट समकक्ष।

   src/main.ts

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

   कोड कॉपी करें

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

   import { installIntlayer, useIntlayer } from "vanilla-intlayer";
   
   installIntlayer();
   
   // वर्तमान लोकेल के लिए प्रारंभिक सामग्री प्राप्त करें।
   // जब भी लोकेल बदलता है, सूचित होने के लिए .onChange() को चेन करें।
   const content = useIntlayer("app").onChange((newContent) => {
     // केवल प्रभावित DOM नोड्स को फिर से रेंडर या पैच करें
     document.querySelector<HTMLHeadingElement>("h1")!.textContent = String(
       newContent.title
     );
     document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =
       String(newContent.readTheDocs);
   });
   
   // प्रारंभिक रेंडर
   document.querySelector<HTMLHeadingElement>("h1")!.textContent = String(
     content.title
   );
   document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =
     String(content.readTheDocs);
   

   लीफ मानों को String() में लपेटकर उन्हें स्ट्रिंग के रूप में एक्सेस करें, जो नोड की toString() विधि को कॉल करता है और अनुवादित टेक्स्ट लौटाता है।

   जब आपको नेटिव HTML विशेषता (जैसे alt, aria-label) के लिए मान की आवश्यकता हो, तो सीधे .value का उपयोग करें:

   typescript

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

   कोड कॉपी करें

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

   img.alt = content.viteLogoLabel.value;
   

7. 7

   अपनी सामग्री की भाषा बदलें

   वैकल्पिक

   अपनी सामग्री की भाषा बदलने के लिए, useLocale द्वारा प्रदान किए गए setLocale फ़ंक्शन का उपयोग करें।

   src/locale-switcher.ts

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

   कोड कॉपी करें

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

   import { getLocaleName } from "intlayer";
   import { useLocale } from "vanilla-intlayer";
   
   export function setupLocaleSwitcher(container: HTMLElement): () => void {
     const { locale, availableLocales, setLocale, subscribe } = useLocale();
   
     const select = document.createElement("select");
     select.setAttribute("aria-label", "Language");
   
     const render = (currentLocale: string) => {
       select.innerHTML = availableLocales
         .map(
           (loc) =>
             `<option value="${loc}"${loc === currentLocale ? " selected" : ""}>
               ${getLocaleName(loc)}
             </option>`
         )
         .join("");
     };
   
     render(locale);
     container.appendChild(select);
   
     select.addEventListener("change", () => setLocale(select.value as any));
   
     // जब लोकेल कहीं और से बदलता है तो ड्रॉपडाउन को सिंक में रखें
     return subscribe((newLocale) => render(newLocale));
   }
   

8. 8

   मार्कडाउन और HTML सामग्री रेंडर करें

   वैकल्पिक

   Intlayer md() और html() सामग्री घोषणाओं का समर्थन करता है। Vanilla JS में, संकलित आउटपुट innerHTML के माध्यम से कच्चे HTML के रूप में डाला जाता है।

   HTML संकलित करें और डालें:

   src/main.ts

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

   कोड कॉपी करें

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

   import {
     compileMarkdown,
     installIntlayerMarkdown,
     useIntlayer,
   } from "vanilla-intlayer";
   
   installIntlayerMarkdown();
   
   const content = useIntlayer("app").onChange((newContent) => {
     const el = document.querySelector<HTMLDivElement>(".edit-note")!;
     el.innerHTML = compileMarkdown(String(newContent.editNote));
   });
   
   document.querySelector<HTMLDivElement>(".edit-note")!.innerHTML =
     compileMarkdown(String(content.editNote));
   

   TIP

   String(content.editNote) IntlayerNode पर toString() कॉल करता है जो कच्चा मार्कडाउन स्ट्रिंग लौटाता है। HTML स्ट्रिंग प्राप्त करने के लिए इसे compileMarkdown में पास करें, फिर इसे innerHTML के माध्यम से सेट करें।

   WARNING

   केवल विश्वसनीय सामग्री के साथ innerHTML का उपयोग करें। यदि मार्कडाउन उपयोगकर्ता इनपुट से आता है, तो इसे पहले सैनिटाइज़ करें (उदाहरण के लिए DOMPurify के साथ)। आप एक सैनिटाइजिंग रेंडरर गतिशील रूप से स्थापित कर सकते हैं:

   typescript

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

   कोड कॉपी करें

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

   import { installIntlayerMarkdownDynamic } from "vanilla-intlayer";
   
   await installIntlayerMarkdownDynamic(async () => {
     const DOMPurify = await import("dompurify");
     return (markdown) => DOMPurify.sanitize(compileMarkdown(markdown));
   });
   

9. 9

   अपने एप्लिकेशन में स्थानीयकृत रूटिंग जोड़ें

   वैकल्पिक

   प्रत्येक भाषा के लिए अद्वितीय रूट बनाने के लिए (SEO के लिए उपयोगी), आप सर्वर-साइड लोकेल पहचान के लिए अपने Vite कॉन्फ़िगरेशन में intlayerProxy का उपयोग कर सकते हैं।

   सबसे पहले, अपने Vite कॉन्फ़िगरेशन में intlayerProxy जोड़ें:

   ध्यान दें कि उत्पादन में intlayerProxy का उपयोग करने के लिए, आपको vite-intlayer को devDependencies से dependencies में ले जाने की आवश्यकता है।

   Intlayer v9 के बाद से, intlayerProxy() सीधे intlayer() plugin में बंडल किया गया है और routing.enableProxy विकल्प के माध्यम से डिफ़ॉल्ट रूप से सक्षम है (true डिफ़ॉल्ट रूप से)। इसे नीचे दिखाए गए अनुसार अलग से पंजीकृत करना अब वैकल्पिक है — इसे पिछड़ी संगतता के लिए और उन सेटअप के लिए रखा गया है जिन्हें plugin क्रम को नियंत्रित करने की आवश्यकता है। routing.enableProxy: false सेट करके opt out करें। v9 release notes देखें।

   vite.config.ts

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

   कोड कॉपी करें

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

   import { defineConfig } from "vite";
   import { intlayer } from "vite-intlayer";
   
   export default defineConfig({
     plugins: [
       intlayer({
         proxy: {
           ignore: (req) => req.url?.startsWith("/api"),
         },
       }),
     ],
   });
   

10. 10

    लोकेल बदलने पर URL बदलें

    वैकल्पिक

    लोकेल बदलने पर ब्राउज़र URL को अपडेट करने के लिए, Intlayer स्थापित करने के बाद useRewriteURL() को कॉल करें:

    src/main.ts

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

    कोड कॉपी करें

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

    import { installIntlayer, useRewriteURL } from "vanilla-intlayer";
    
    installIntlayer();
    
    // URL को तुरंत और हर बाद के लोकेल परिवर्तन पर फिर से लिखता है।
    // सफाई के लिए एक अनसब्सक्राइब फ़ंक्शन लौटाता है।
    const stopRewriteURL = useRewriteURL();
    

11. 11

    HTML भाषा और दिशा विशेषताओं को स्विच करें

    वैकल्पिक

    पहुंच और SEO के लिए वर्तमान लोकेल से मेल खाने के लिए <html> टैग की lang और dir विशेषताओं को अपडेट करें।

    src/main.ts

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

    कोड कॉपी करें

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

    import { getHTMLTextDir } from "intlayer";
    import { installIntlayer, useLocale } from "vanilla-intlayer";
    
    installIntlayer();
    
    useLocale({
      onLocaleChange: (locale) => {
        document.documentElement.lang = locale;
        document.documentElement.dir = getHTMLTextDir(locale);
      },
    });
    

12. 12

    प्रति लोकेल शब्दकोशों को लेज़ी-लोड करें

    वैकल्पिक

    बड़े ऐप्स के लिए आप प्रत्येक लोकेल के शब्दकोश को उसके अपने चंक में विभाजित करना चाह सकते हैं। Vite के गतिशील import() के साथ useDictionaryDynamic का उपयोग करें:

    src/app.ts

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

    कोड कॉपी करें

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

    import { installIntlayer, useDictionaryDynamic } from "vanilla-intlayer";
    
    installIntlayer();
    
    const unsubscribe = useDictionaryDynamic(
      {
        en: () => import("../.intlayer/dictionaries/en/app.mjs"),
        fr: () => import("../.intlayer/dictionaries/fr/app.mjs"),
        es: () => import("../.intlayer/dictionaries/es/app.mjs"),
      },
      "app"
    ).onChange((content) => {
      document.querySelector("h1")!.textContent = String(content.title);
    });
    

    प्रत्येक लोकेल का बंडल केवल तभी प्राप्त किया जाता है जब वह लोकेल सक्रिय हो जाता है और परिणाम कैश किया जाता है - उसी लोकेल पर बाद के स्विच त्वरित होते हैं।

13. 13

    अपने घटकों की सामग्री निकालें

    वैकल्पिक

    यदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।

    इस प्रक्रिया को आसान बनाने के लिए, Intlayer आपके घटकों को बदलने और सामग्री निकालने के लिए एक कंपाइलर / एक्सट्रैक्टर का प्रस्ताव करता है।

    इसे सेट करने के लिए, आप अपनी intlayer.config.ts फ़ाइल में compiler अनुभाग जोड़ सकते हैं:

    intlayer.config.ts

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

    कोड कॉपी करें

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

    import { type IntlayerConfig } from "intlayer";
    
    const config: IntlayerConfig = {
      // ... आपके बाकी कॉन्फ़िगरेशन
      compiler: {
        /**
         * इंगित करता है कि क्या कंपाइलर सक्षम होना चाहिए।
         */
        enabled: true,
    
        /**
         * आउटपुट फ़ाइलों का पथ परिभाषित करता है
         */
        output: ({ fileName, extension }) => `./${fileName}${extension}`,
    
        /**
         * इंगित करता है कि क्या घटकों को बदलने के बाद सहेजा जाना चाहिए।
         * इस तरह, कंपाइलर को ऐप को बदलने के लिए केवल एक बार चलाया जा सकता है, और फिर इसे हटाया जा सकता है।
         */
        saveComponents: false,
    
        /**
         * शब्दकोश कुंजी उपसर्ग
         */
        dictionaryKeyPrefix: "",
      },
    };
    
    export default config;
    

    Extract कमांडBabel कंपाइलर

    अपने घटकों को बदलने और सामग्री निकालने के लिए एक्सट्रैक्टर चलाएं

    bash

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

    कोड कॉपी करें

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

    npx intlayer extract
    

    Since v9, the intlayerCompiler is included in the intlayer plugin. So you don't need to add it manually.

    intlayerCompiler प्लगइन शामिल करने के लिए अपना vite.config.ts अपडेट करें:

    vite.config.ts

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

    कोड कॉपी करें

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

    import { defineConfig } from "vite";
    import { intlayer, intlayerCompiler } from "vite-intlayer";
    
    export default defineConfig({
      plugins: [
        intlayer(),
        intlayerCompiler(), // Adds the compiler plugin
      ],
    });
    

    bash

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

    कोड कॉपी करें

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

    npm run build # या npm run dev
    

(वैकल्पिक) साइटमैप और robots.txt (बिल्ड-टाइम जनरेशन)

Intlayer generateSitemap और getMultilingualUrls उपलब्ध कराता है ताकि आप क्रॉलर-तैयार बहुभाषी sitemap.xml और robots.txt बनाकर public/ में स्वचालित लिख सकें। आमतौर पर Vite से पहले छोटा Node स्क्रिप्ट चलाएँ (जैसे npm predev / prebuild)।

साइटमैप

Intlayer का साइटमैप जनरेटर आपकी लोकेल सेटिंग का सम्मान करता है और क्रॉलर के लिए मेटाडेटा जोड़ता है।

जनरेट साइटमैप xhtml:link (hreflang) नेमस्पेस को सपोर्ट करता है। सपाट URL सूची के बजाय Intlayer हर पृष्ठ के सभी भाषा संस्करणों को दोतरफा जोड़ता है (जैसे /about, /fr/about, या /about?lang=fr - रूटिंग मोड पर निर्भर)।

Robots.txt

getMultilingualUrls का उपयोग करें ताकि Disallow नियम संवेदनशील पथों के सभी बहुभाषी रूपों को कवर करें।

1. प्रोजेक्ट रूट में generate-seo.mjs जोड़ें

import fs from "fs";
import path from "path";
import { fileURLToPath } from "url";
import { generateSitemap, getMultilingualUrls } from "intlayer";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(
  /\/$/,
  ""
);

const pathList = [
  { path: "/", changefreq: "daily", priority: 1.0 },
  { path: "/about", changefreq: "monthly", priority: 0.7 },
];

const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);

const getAllMultilingualUrls = (urls) =>
  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));

const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);

const robotsTxt = [
  "User-agent: *",
  "Allow: /",
  ...disallowedPaths.map((path) => `Disallow: ${path}`),
  "",
  `Sitemap: ${SITE_URL}/sitemap.xml`,
].join("\n");

fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);

console.log("SEO files generated successfully.");

स्क्रिप्ट को intlayer इम्पोर्ट करने के लिए पैकेज इंस्टॉल होना चाहिए। प्रोडक्शन में SITE_URL सेट करें (जैसे CI में)।

Node ESM के लिए generate-seo.mjs पसंद करें। generate-seo.js के लिए package.json में "type": "module" या अन्य ESM सेटअप करें।

2. Vite से पहले स्क्रिप्ट चलाएँ

{
  "scripts": {
    "dev": "vite",
    "prebuild": "node generate-seo.mjs",
    "build": "vite build",
    "preview": "vite preview"
  }
}

pnpm या yarn हो तो कमांड अनुकूलित करें। CI से भी कॉल कर सकते हैं।

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

सुनिश्चित करें कि आपके TypeScript कॉन्फ़िगरेशन में स्वतः उत्पन्न प्रकार शामिल हैं।

{
  "compilerOptions": {
    // ...
  },
  "include": ["src", ".intlayer/**/*.ts"],
}

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

Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करने की अनुशंसा की जाती है। यह आपको उन्हें अपने Git रिपॉजिटरी में प्रतिबद्ध करने से बचने की अनुमति देता है।

ऐसा करने के लिए, आप अपनी .gitignore फ़ाइल में निम्नलिखित निर्देश जोड़ सकते हैं:

# Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें
.intlayer

VS Code एक्सटेंशन

Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक Intlayer VS Code एक्सटेंशन स्थापित कर सकते हैं।

VS Code Marketplace से इंस्टॉल करें

यह एक्सटेंशन प्रदान करता है:

• अनुवाद कुंजियों के लिए स्वतः पूर्णता।
• गुम अनुवादों के लिए रीयल-टाइम त्रुटि पहचान।
• अनुवादित सामग्री का इनलाइन पूर्वावलोकन।
• अनुवादों को आसानी से बनाने और अपडेट करने के लिए त्वरित क्रियाएं।

एक्सटेंशन का उपयोग करने के तरीके के बारे में अधिक विवरण के लिए, Intlayer VS Code एक्सटेंशन दस्तावेज़ देखें।

आगे बढ़ें

आगे बढ़ने के लिए, आप विजुअल एडिटर लागू कर सकते हैं या CMS का उपयोग करके अपनी सामग्री को बाहरी बना सकते हैं।

अक्सर पूछे जाने वाले प्रश्न