Author:
    Aymeric PINEAU
    Creation:2026-03-31Last update:2026-05-31

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

    ide.intlayer.org
    intlayer-vanilla-template.vercel.app

    विषय-सूची

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

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

    इंटलेयर को फ्रेमवर्क-अज्ञेयवादी सामग्री प्रबंधन, टाइपस्क्रिप्ट समर्थन, और स्केलिंग अंतर्राष्ट्रीयकरण (i18n) के लिए आवश्यक सभी सुविधाओं की पेशकश करके वेनिला जावास्क्रिप्ट के साथ पूरी तरह से काम करने के लिए अनुकूलित किया गया है।

    अपने पृष्ठों में विशाल JSON फ़ाइलें लोड करने के बजाय, केवल आवश्यक सामग्री लोड करें। इंटलेयर आपके बंडल और पृष्ठ आकार को 50% तक कम करने में मदद करता है।

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

    सामग्री का सह-स्थानीकरण बड़े भाषा मॉडल (एलएलएम) द्वारा आवश्यक संदर्भ को कम करता है। इंटलेयर टूल के एक सूट के साथ भी आता है, जैसे CLI ताकि लापता अनुवादों का परीक्षण किया जा सके,LSP, MCP, और agent skills, AI एजेंटों के लिए डेवलपर अनुभव (DX) को और भी आसान बनाने के लिए।

    अपने एआई प्रदाता की कीमत पर अपनी पसंद के एलएलएम का उपयोग करके अपने सीआई/सीडी पाइपलाइन में अनुवाद करने के लिए स्वचालन का उपयोग करें। इंटलेयर सामग्री निष्कर्षण को स्वचालित करने के लिए एक कंपाइलर के साथ-साथ पृष्ठभूमि में अनुवाद में मदद करने के लिए एक वेब प्लेटफ़ॉर्म भी प्रदान करता है।

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

    सिर्फ एक i18n समाधान से अधिक, Intlayer एक स्व-होस्टेड विज़ुअल एडिटर और एक [पूर्ण] प्रदान करता है सीएमएस](/hi/doc/concept/cms) आपकी बहुभाषी सामग्री को वास्तविक समय में प्रबंधित करने में मदद करता है, जिससे अनुवादकों, कॉपीराइटरों और टीम के अन्य सदस्यों के साथ सहयोग सहज हो जाता है। सामग्री को स्थानीय और/या दूरस्थ रूप से संग्रहीत किया जा सकता है।

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

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

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

      bash
      # intlayer और vanilla-intlayer का स्टैंडअलोन बंडल जनरेट करें
# यह फ़ाइल आपकी HTML फ़ाइल में आयात की जाएगी
npx intlayer standalone --packages intlayer vanilla-intlayer --outfile intlayer.js

# कॉन्फ़िगरेशन फ़ाइल के साथ intlayer प्रारंभ करें
npx intlayer init --no-gitignore

# शब्दकोश बनाएँ
npx intlayer build

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

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

      intlayer standalone CLI का बंडलिंग एक्सपोर्ट अनुपयोगित पैकेज, लोकेल और आपके कॉन्फ़िगरेशन के लिए विशिष्ट गैर-जरूरी लॉजिक (जैसे रीडायरेक्ट या प्रीफ़िक्स) को ट्री-शेकिंग (tree-shaking) के माध्यम से हटाकर एक अनुकूलित बिल्ड तैयार करता है।

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

      आर्किटेक्चर

      इस आर्किटेक्चर में, कोर intlayer बिना किसी फ्रंटएंड फ्रेमवर्क के मानक JavaScript या TypeScript वातावरण में शब्दकोशों को घोषित और उपभोग करने के लिए JavaScript API प्रदान करता है।

      bash
      .
├── src
│   ├── app.content.mjs
│   └── main.js
├── index.html
├── intlayer.config.mjs
└── package.json

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

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

      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. अपने HTML में बंडल आयात करें

      एक बार जब आप intlayer.js बंडल जनरेट कर लेते हैं, तो आप इसे अपनी HTML फ़ाइल में आयात कर सकते हैं:

      index.html
      <!DOCTYPE html>
<html lang="hi">
  <head>
    <meta charset="UTF-8" />

    <!-- बंडल आयात करें -->
    <script src="./intlayer.js" defer></script>
    <!-- अपनी मुख्य स्क्रिप्ट आयात करें -->
    <script src="./src/main.js" defer></script>
  </head>
  <body>
    <h1 id="title"></h1>
    <p class="read-the-docs"></p>
  </body>
</html>

      बंडल window पर वैश्विक ऑब्जेक्ट के रूप में Intlayer और VanillaIntlayer को उजागर करता है।

    4. अपने प्रवेश बिंदु में Intlayer को बूटस्ट्रैप करें

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

      src/main.js
      const { installIntlayer } = window.VanillaIntlayer;

// किसी भी i18n सामग्री को रेंडर करने से पहले कॉल किया जाना चाहिए।
installIntlayer();

      यदि आप मार्कडाउन रेंडरर का भी उपयोग करना चाहते हैं, तो installIntlayerMarkdown() कॉल करें:

      src/main.js
      const { installIntlayer, installIntlayerMarkdown } = window.VanillaIntlayer;

installIntlayer();
installIntlayerMarkdown();

    5. अपनी सामग्री घोषित करें

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

      src/app.content.ts
      import { insert, t, type Dictionary } from "intlayer";

const appContent = {
  key: "app",
  content: {
    title: "Vite + Vanilla",

    viteLogoLabel: t({
      en: "Vite Logo",
      fr: "Logo Vite",
      es: "Logo Vite",
    }),

    count: insert(
      t({
        en: "count is {{count}}",
        fr: "le compte est {{count}}",
        es: "el recuento es {{count}}",
      })
    ),

    readTheDocs: t({
      en: "Click on the Vite logo to learn more",
      fr: "Cliquez sur le logo Vite pour en savoir plus",
      es: "अधिक जानने के लिए Vite लोगो पर क्लिक करें",
    }),
  },
} satisfies Dictionary;

export default appContent;

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

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

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

      window.VanillaIntlayer ऑब्जेक्ट API सहायक प्रदान करता है: useIntlayer(key, locale?) किसी दिए गए कुंजी के लिए अनुवादित सामग्री लौटाता है।

      src/main.js
      const { installIntlayer, useIntlayer } = window.VanillaIntlayer;

installIntlayer();

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

// प्रारंभिक रेंडर
document.querySelector("h1").textContent = String(content.title);
document.querySelector(".read-the-docs").textContent = String(
  content.readTheDocs
);

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

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

      javascript
      img.alt = content.viteLogoLabel.value;

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

      वैकल्पिक

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

      src/locale-switcher.js
      const { getLocaleName } = window.Intlayer;
const { useLocale } = window.VanillaIntlayer;

export function setupLocaleSwitcher(container) {
  const { locale, availableLocales, setLocale, subscribe } = useLocale();

  const select = document.createElement("select");
  select.setAttribute("aria-label", "भाषा");

  const render = (currentLocale) => {
    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));

  // जब लोकेल कहीं और से बदलता है तो ड्रॉपडाउन को सिंक में रखें
  return subscribe((newLocale) => render(newLocale));
}

    8. HTML भाषा और दिशा विशेषताएँ स्विच करें

      वैकल्पिक

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

      src/main.js
      const { getHTMLTextDir } = window.Intlayer;
const { installIntlayer, useLocale } = window.VanillaIntlayer;

installIntlayer();

useLocale({
  onLocaleChange: (locale) => {
    document.documentElement.lang = locale;
    document.documentElement.dir = getHTMLTextDir(locale);
  },
});

    9. प्रति लोकेल शब्दकोशों को आलसी-लोड (Lazy-load) करें

      वैकल्पिक

      यदि आप प्रति लोकेल शब्दकोशों को आलसी-लोड करना चाहते हैं, तो आप useDictionaryDynamic का उपयोग कर सकते हैं। यह उपयोगी है यदि आप प्रारंभिक intlayer.js फ़ाइल में सभी अनुवादों को बंडल नहीं करना चाहते हैं।

      src/app.js
      const { installIntlayer, useDictionaryDynamic } = window.VanillaIntlayer;

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);
});
      नोट: useDictionaryDynamic के लिए शब्दकोशों को अलग ESM फ़ाइलों के रूप में उपलब्ध होना आवश्यक है। यह दृष्टिकोण आमतौर पर तब उपयोग किया जाता है जब आपके पास शब्दकोश परोसने वाला वेब सर्वर होता है।

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

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

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

    VS Code एक्सटेंशन

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

    VS Code मार्केटप्लेस से इंस्टॉल करें

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

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

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

    आगे बढ़ें

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

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

    हाँ। यह गाइड विशेष रूप से उस मामले के लिए समर्पित है। आप vanilla-intlayer बंडल को सीधे HTML में शामिल करते हैं, इसे प्रारंभ करते हैं, और useIntlayer या getIntlayer के माध्यम से सामग्री पढ़ते हैं।

    पारंपरिक कैटलॉग की तुलना में बहुत कम, क्योंकि पृष्ठ कभी भी उस भाषा को डाउनलोड नहीं करता है जिसे वह रेंडर नहीं करता है। सामग्री अनुकूलित प्रारूपों में वितरित की जाती है। बंडल अनुकूलन देखें।

    काफी हद तक हाँ। i18next माइग्रेशन गाइड का पालन करें।

    हाँ। sync JSON plugin आपकी /messages/{locale}/{namespace}.json फ़ाइलों को सत्य का स्रोत बनाए रखता है और दोनों दिशाओं में उनसे Intlayer dictionaries बनाता है। sync PO plugin gettext catalogs के लिए भी ऐसा ही करता है, और per locale files आपको locales को एक फ़ाइल में समूहीकृत करने के बजाय भाषा के अनुसार content को विभाजित करने देते हैं।

    नहीं। npx intlayer extract चलाएं और Intlayer आपकी source files को पढ़ता है, user facing strings को निकालता है और प्रत्येक के बगल में एक .content file लिखता है, इसलिए आप strings को एक catalog में एक-एक करके कॉपी करने के बजाय एक diff की समीक्षा करते हैं। extract command देखें।

    पूर्ण स्वचालन के लिए, Intlayer Compiler बिल्ड समय पर यही काम करता है और प्रत्येक परिवर्तन पर शब्दकोश उत्पन्न करता है।

    पाँच उपकरण, सभी वैकल्पिक:

    • VS Code extension: useIntlayer कुंजी से उसे घोषित करने वाली सामग्री फ़ाइल पर जाएं, घटकों से सामग्री निकालें, और कमांड पैलेट या Intlayer टैब से build, fill, test, push और pull चलाएं।
    • LSP server: LSP का समर्थन करने वाले किसी भी संपादक में समान सुविधा, परिभाषा पर जाएं, अनुवादित मान का पूर्वावलोकन देखें, और कुंजी पूर्णता प्राप्त करें। i18next, react-i18next, next-intl और use-intl कॉल का भी समर्थन करता है।
    • MCP server: Cursor, VS Code, Claude Desktop, Claude Code और ChatGPT के लिए Intlayer दस्तावेज़ और CLI प्रदान करता है।
    • Agent skills: केंद्रित कौशल जैसे intlayer-config, intlayer-cli और intlayer-content।
    • ESLint plugin: no-raw-text नियम हार्डकोडेड स्ट्रिंग्स को चिह्नित करता है।
    Vite और Vanilla JSVite और Lit