@intlayer/docs 8.4.9 → 8.5.0

package/docs/hi/intlayer_with_vite+vanilla.md

@@ -0,0 +1,722 @@
+---
+createdAt: 2026-03-23
+updatedAt: 2026-03-23
+title: i18n Vite + Vanilla JS - 2026 में Vanilla JS ऐप का अनुवाद कैसे करें
+description: जानें कि अपने Vite और Vanilla JS वेबसाइट को बहुभाषी कैसे बनाएं। अंतर्राष्ट्रीयकरण (i18n) और अनुवाद के लिए दस्तावेज़ों का पालन करें।
+keywords:
+  - अंतर्राष्ट्रीयकरण
+  - दस्तावेज़ीकरण
+  - Intlayer
+  - Vite
+  - Vanilla JS
+  - JavaScript
+  - TypeScript
+  - HTML
+slugs:
+  - doc
+  - environment
+  - vite-and-vanilla
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-vanilla-template
+history:
+  - version: 8.4.10
+    date: 2026-03-23
+    changes: "Init history"
+---
+
+# Intlayer का उपयोग करके अपने Vite और Vanilla JS वेबसाइट का अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)
+
+## विषय सूची
+
+<TOC/>
+
+## Intlayer क्या है?
+
+**Intlayer** एक अभिनव, ओपन-सोर्स अंतर्राष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब अनुप्रयोगों में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।
+
+Intlayer के साथ, आप:
+
+- घटक स्तर पर घोषणात्मक शब्दकोशों का उपयोग करके **अनुवादों को आसानी से प्रबंधित** कर सकते हैं।
+- मेटाडेटा, रूट और सामग्री को **गतिशील रूप से स्थानीयकृत** कर सकते हैं।
+- स्वतः उत्पन्न प्रकारों के साथ **TypeScript समर्थन सुनिश्चित** कर सकते हैं, जिससे स्वतः पूर्णता और त्रुटि पहचान में सुधार होता है।
+- गतिशील लोकेल पहचान और स्विचिंग जैसी **उन्नत सुविधाओं का लाभ** उठा सकते हैं।
+
+---
+
+## Vite और Vanilla JS एप्लिकेशन में Intlayer सेट करने के लिए चरण-दर-चरण मार्गदर्शिका
+
+### चरण 1: निर्भरताएँ स्थापित करें
+
+npm का उपयोग करके आवश्यक पैकेज स्थापित करें:
+
+```bash packageManager="npm"
+npm install intlayer vanilla-intlayer
+npm install vite-intlayer --save-dev
+npx intlayer init
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer vanilla-intlayer
+pnpm add vite-intlayer --save-dev
+pnpm intlayer init
+```
+
+```bash packageManager="yarn"
+yarn add intlayer vanilla-intlayer
+yarn add vite-intlayer --save-dev
+yarn intlayer init
+```
+
+```bash packageManager="bun"
+bun add intlayer vanilla-intlayer
+bun add vite-intlayer --dev
+bunx intlayer init
+```
+
+- **intlayer**
+  मुख्य पैकेज जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, [सामग्री घोषणा](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md), ट्रांसपाइलेशन और [CLI कमांड](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/cli/index.md) के लिए अंतर्राष्ट्रीयकरण उपकरण प्रदान करता है।
+
+- **vanilla-intlayer**
+  पैकेज जो Intlayer को शुद्ध JavaScript / TypeScript अनुप्रयोगों के साथ एकीकृत करता है। यह एक पब/सब सिंगलटन (`IntlayerClient`) और कॉलबैक-आधारित सहायक (`useIntlayer`, `useLocale`, आदि) प्रदान करता है ताकि आपके ऐप का कोई भी हिस्सा बिना किसी UI फ्रेमवर्क पर निर्भर हुए लोकेल परिवर्तनों पर प्रतिक्रिया कर सके।
+
+- **vite-intlayer**
+  Intlayer को [Vite बंडलर](https://vite.dev/guide/why.html#why-bundle-for-production) के साथ एकीकृत करने के लिए Vite प्लगइन शामिल है, साथ ही उपयोगकर्ता के पसंदीदा लोकेल का पता लगाने, कुकीज़ प्रबंधित करने और URL पुनर्निर्देशन को संभालने के लिए मिडलवेयर भी शामिल है।
+
+### चरण 2: अपने प्रोजेक्ट का कॉन्फ़िगरेशन
+
+अपने एप्लिकेशन की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएँ:
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // आपके अन्य लोकेल
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+import { Locales } from "intlayer";
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // आपके अन्य लोकेल
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+const { Locales } = require("intlayer");
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // आपके अन्य लोकेल
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+module.exports = config;
+```
+
+> इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर पुनर्निर्देशन, कुकी नाम, अपनी सामग्री घोषणाओं का स्थान और विस्तार सेट कर सकते हैं, कंसोल में Intlayer लॉग को अक्षम कर सकते हैं, और बहुत कुछ। उपलब्ध मापदंडों की पूरी सूची के लिए, [कॉन्फ़िगरेशन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md) देखें।
+
+### चरण 3: अपने Vite कॉन्फ़िगरेशन में Intlayer एकीकृत करें
+
+अपने कॉन्फ़िगरेशन में intlayer प्लगइन जोड़ें।
+
+```typescript fileName="vite.config.ts" codeFormat="typescript"
+import { defineConfig } from "vite";
+import { intlayer } from "vite-intlayer";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [intlayer()],
+});
+```
+
+```javascript fileName="vite.config.mjs" codeFormat="esm"
+import { defineConfig } from "vite";
+import { intlayer } from "vite-intlayer";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [intlayer()],
+});
+```
+
+```javascript fileName="vite.config.cjs" codeFormat="commonjs"
+const { defineConfig } = require("vite");
+const { intlayer } = require("vite-intlayer");
+
+// https://vitejs.dev/config/
+module.exports = defineConfig({
+  plugins: [intlayer()],
+});
+```
+
+> `intlayer()` Vite प्लगइन का उपयोग Intlayer को Vite के साथ एकीकृत करने के लिए किया जाता है। यह सामग्री घोषणा फ़ाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Vite एप्लिकेशन के भीतर Intlayer वातावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को अनुकूलित करने के लिए उपनाम (aliases) प्रदान करता है।
+
+### चरण 4: अपने एंट्री पॉइंट में Intlayer बूटस्ट्रैप करें
+
+किसी भी सामग्री को रेंडर करने से **पहले** `installIntlayer()` को कॉल करें ताकि वैश्विक लोकेल सिंगलटन तैयार हो जाए।
+
+```typescript fileName="src/main.ts" codeFormat="typescript"
+import { installIntlayer } from "vanilla-intlayer";
+
+// किसी भी i18n सामग्री को रेंडर करने से पहले कॉल किया जाना चाहिए।
+installIntlayer();
+
+// अपने ऐप मॉड्यूल आयात करें और चलाएं।
+import "./app.js";
+```
+
+यदि आप `md()` सामग्री घोषणाओं (Markdown) का भी उपयोग करते हैं, तो मार्कडाउन रेंडरर भी स्थापित करें:
+
+```typescript fileName="src/main.ts" codeFormat="typescript"
+import { installIntlayer, installIntlayerMarkdown } from "vanilla-intlayer";
+
+installIntlayer();
+installIntlayerMarkdown();
+
+import "./app.js";
+```
+
+### चरण 5: अपनी सामग्री की घोषणा करें
+
+अनुवादों को संग्रहीत करने के लिए सामग्री घोषणाएं बनाएं और प्रबंधित करें:
+
+```typescript fileName="src/app.content.ts" contentDeclarationFormat="typescript"
+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;
+```
+
+```javascript fileName="src/app.content.mjs" codeFormat="esm"
+import { insert, t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+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 लोगो पर क्लिक करें",
+    }),
+  },
+};
+
+export default appContent;
+```
+
+```javascript fileName="src/app.content.cjs" codeFormat="commonjs"
+const { insert, t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+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 लोगो पर क्लिक करें",
+    }),
+  },
+};
+
+module.exports = appContent;
+```
+
+```json fileName="src/app.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "app",
+  "content": {
+    "title": "Vite + Vanilla",
+    "viteLogoLabel": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "Vite Logo",
+        "fr": "Logo Vite",
+        "es": "Logo Vite"
+      }
+    },
+    "count": {
+      "nodeType": "insertion",
+      "insertion": {
+        "nodeType": "translation",
+        "translation": {
+          "en": "count is {{count}}",
+          "fr": "le compte est {{count}}",
+          "es": "el recuento es {{count}}"
+        }
+      }
+    },
+    "readTheDocs": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "Click on the Vite logo to learn more",
+        "fr": "Cliquez sur le logo Vite pour en savoir plus",
+        "es": "अधिक जानने के लिए Vite लोगो पर क्लिक करें"
+      }
+    }
+  }
+}
+```
+
+> आपकी सामग्री घोषणाएं आपके एप्लिकेशन में कहीं भी परिभाषित की जा सकती हैं जैसे ही वे `contentDir` निर्देशिका (डिफ़ॉल्ट रूप से, `./src`) में शामिल होती हैं। और सामग्री घोषणा फ़ाइल एक्सटेंशन (डिफ़ॉल्ट रूप से, `.content.{json,ts,tsx,js,jsx,mjs,cjs}`) से मेल खाती हैं।
+>
+> अधिक विवरण के लिए, [सामग्र घोषणा दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md) देखें।
+
+### चरण 6: अपने JavaScript में Intlayer का उपयोग करें
+
+`vanilla-intlayer`, `react-intlayer` सरफेस API को प्रतिबिंबित करता है: `useIntlayer(key, locale?)` सीधे अनुवादित सामग्री लौटाता है। लोकेल परिवर्तनों की सदस्यता लेने के लिए परिणाम पर `.onChange()` को चेन करें — React री-रेंडर के स्पष्ट समकक्ष।
+
+```typescript fileName="src/main.ts" codeFormat="typescript"
+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: अपनी सामग्री की भाषा बदलें
+
+अपनी सामग्री की भाषा बदलने के लिए, `useLocale` द्वारा प्रदान किए गए `setLocale` फ़ंक्शन का उपयोग करें।
+
+```typescript fileName="src/locale-switcher.ts" codeFormat="typescript"
+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: मार्कडाउन और HTML सामग्री रेंडर करें
+
+Intlayer `md()` और `html()` सामग्री घोषणाओं का समर्थन करता है। Vanilla JS में, संकलित आउटपुट `innerHTML` के माध्यम से कच्चे HTML के रूप में डाला जाता है।
+
+```typescript fileName="src/app.content.ts" contentDeclarationFormat="typescript"
+import { md, t, type Dictionary } from "intlayer";
+
+const appContent = {
+  key: "app",
+  content: {
+    // ...
+    editNote: md(
+      t({
+        en: "Edit `src/main.ts` and save to test **HMR**",
+        fr: "Modifiez `src/main.ts` et enregistrez pour tester **HMR**",
+        es: "Edite `src/main.ts` y guarde para probar **HMR**",
+      })
+    ),
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+HTML संकलित करें और डालें:
+
+```typescript fileName="src/main.ts" codeFormat="typescript"
+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: अपने एप्लिकेशन में स्थानीयकृत रूटिंग जोड़ें
+
+प्रत्येक भाषा के लिए अद्वितीय रूट बनाने के लिए (SEO के लिए उपयोगी), आप सर्वर-साइड लोकेल पहचान के लिए अपने Vite कॉन्फ़िगरेशन में `intlayerProxy` का उपयोग कर सकते हैं।
+
+सबसे पहले, अपने Vite कॉन्फ़िगरेशन में `intlayerProxy` जोड़ें:
+
+> ध्यान दें कि उत्पादन में `intlayerProxy` का उपयोग करने के लिए, आपको `vite-intlayer` को `devDependencies` से `dependencies` में ले जाने की आवश्यकता है।
+
+```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
+import { defineConfig } from "vite";
+import { intlayer, intlayerProxy } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayerProxy(), // पहले रखा जाना चाहिए
+    intlayer(),
+  ],
+});
+```
+
+```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
+import { defineConfig } from "vite";
+import { intlayer, intlayerProxy } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayerProxy(), // पहले रखा जाना चाहिए
+    intlayer(),
+  ],
+});
+```
+
+```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
+const { defineConfig } = require("vite");
+const { intlayer, intlayerProxy } = require("vite-intlayer");
+
+module.exports = defineConfig({
+  plugins: [
+    intlayerProxy(), // पहले रखा जाना चाहिए
+    intlayer(),
+  ],
+});
+```
+
+### (वैकल्पिक) चरण 10: लोकेल बदलने पर URL बदलें
+
+लोकेल बदलने पर ब्राउज़र URL को अपडेट करने के लिए, Intlayer स्थापित करने के बाद `useRewriteURL()` को कॉल करें:
+
+```typescript fileName="src/main.ts" codeFormat="typescript"
+import { installIntlayer, useRewriteURL } from "vanilla-intlayer";
+
+installIntlayer();
+
+// URL को तुरंत और हर बाद के लोकेल परिवर्तन पर फिर से लिखता है।
+// सफाई के लिए एक अनसब्सक्राइब फ़ंक्शन लौटाता है।
+const stopRewriteURL = useRewriteURL();
+```
+
+### (वैकल्पिक) चरण 11: HTML भाषा और दिशा विशेषताओं को स्विच करें
+
+पहुंच और SEO के लिए वर्तमान लोकेल से मेल खाने के लिए `<html>` टैग की `lang` और `dir` विशेषताओं को अपडेट करें।
+
+```typescript fileName="src/main.ts" codeFormat="typescript"
+import { getHTMLTextDir } from "intlayer";
+import { installIntlayer, useLocale } from "vanilla-intlayer";
+
+installIntlayer();
+
+useLocale({
+  onLocaleChange: (locale) => {
+    document.documentElement.lang = locale;
+    document.documentElement.dir = getHTMLTextDir(locale);
+  },
+});
+```
+
+### (वैकल्पिक) चरण 12: प्रति लोकेल शब्दकोशों को लेज़ी-लोड करें
+
+बड़े ऐप्स के लिए आप प्रत्येक लोकेल के शब्दकोश को उसके अपने चंक में विभाजित करना चाह सकते हैं। Vite के गतिशील `import()` के साथ `useDictionaryDynamic` का उपयोग करें:
+
+```typescript fileName="src/app.ts" codeFormat="typescript"
+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: अपने घटकों की सामग्री निकालें
+
+यदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।
+
+इस प्रक्रिया को आसान बनाने के लिए, Intlayer आपके घटकों को बदलने और सामग्री निकालने के लिए एक [कंपाइलर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/compiler.md) / [एक्सट्रैक्टर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/cli/extract.md) का प्रस्ताव करता है।
+
+इसे सेट करने के लिए, आप अपनी `intlayer.config.ts` फ़ाइल में `compiler` अनुभाग जोड़ सकते हैं:
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import { type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... आपके बाकी कॉन्फ़िगरेशन
+  compiler: {
+    /**
+     * इंगित करता है कि क्या कंपाइलर सक्षम होना चाहिए।
+     */
+    enabled: true,
+
+    /**
+     * आउटपुट फ़ाइलों का पथ परिभाषित करता है
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * इंगित करता है कि क्या घटकों को बदलने के बाद सहेजा जाना चाहिए।
+     * इस तरह, कंपाइलर को ऐप को बदलने के लिए केवल एक बार चलाया जा सकता है, और फिर इसे हटाया जा सकता है।
+     */
+    saveComponents: false,
+
+    /**
+     * शब्दकोश कुंजी उपसर्ग
+     */
+    dictionaryKeyPrefix: "",
+  },
+};
+
+export default config;
+```
+
+<Tabs>
+ <Tab value='Extract कमांड'>
+
+अपने घटकों को बदलने और सामग्री निकालने के लिए एक्सट्रैक्टर चलाएं
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+ </Tab>
+ <Tab value='Babel कंपाइलर'>
+
+`intlayerCompiler` प्लगइन शामिल करने के लिए अपना `vite.config.ts` अपडेट करें:
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer(),
+    intlayerCompiler(), // कंपाइलर प्लगइन जोड़ता है
+  ],
+});
+```
+
+```bash packageManager="npm"
+npm run build # या npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # या pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # या yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # या bun run dev
+```
+
+ </Tab>
+</Tabs>
+
+### TypeScript कॉन्फ़िगर करें
+
+सुनिश्चित करें कि आपके TypeScript कॉन्फ़िगरेशन में स्वतः उत्पन्न प्रकार शामिल हैं।
+
+```json5 fileName="tsconfig.json"
+{
+  "compilerOptions": {
+    // ...
+  },
+  "include": ["src", ".intlayer/**/*.ts"],
+}
+```
+
+### Git कॉन्फ़िगरेशन
+
+Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करने की अनुशंसा की जाती है। यह आपको उन्हें अपने Git रिपॉजिटरी में प्रतिबद्ध करने से बचने की अनुमति देता है।
+
+ऐसा करने के लिए, आप अपनी `.gitignore` फ़ाइल में निम्नलिखित निर्देश जोड़ सकते हैं:
+
+```bash
+# Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें
+.intlayer
+```
+
+### VS Code एक्सटेंशन
+
+Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक **Intlayer VS Code एक्सटेंशन** स्थापित कर सकते हैं।
+
+[VS Code Marketplace से इंस्टॉल करें](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+यह एक्सटेंशन प्रदान करता है:
+
+- अनुवाद कुंजियों के लिए **स्वतः पूर्णता**।
+- गुम अनुवादों के लिए **रीयल-टाइम त्रुटि पहचान**।
+- अनुवादित सामग्री का **इनलाइन पूर्वावलोकन**।
+- अनुवादों को आसानी से बनाने और अपडेट करने के लिए **त्वरित क्रियाएं**।
+
+एक्सटेंशन का उपयोग करने के तरीके के बारे में अधिक विवरण के लिए, [Intlayer VS Code एक्सटेंशन दस्तावेज़](https://intlayer.org/doc/vs-code-extension) देखें।
+
+---
+
+### आगे बढ़ें
+
+आगे बढ़ने के लिए, आप [विजुअल एडिटर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_visual_editor.md) लागू कर सकते हैं या [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_CMS.md) का उपयोग करके अपनी सामग्री को बाहरी बना सकते हैं।