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

विषय सूची

Intlayer क्या है?

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

Intlayer के साथ, आप:

• घटक स्तर पर घोषणात्मक शब्दकोशों का उपयोग करके अनुवादों को आसानी से प्रबंधित कर सकते हैं।
• मेटाडेटा, रूट और सामग्री को गतिशील रूप से स्थानीयकृत कर सकते हैं।
• स्वतः उत्पन्न प्रकारों के साथ TypeScript समर्थन सुनिश्चित कर सकते हैं, जिससे स्वतः पूर्णता और त्रुटि पहचान में सुधार होता है।
• गतिशील लोकेल पहचान और स्विचिंग जैसी उन्नत सुविधाओं का लाभ उठा सकते हैं।

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

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

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

npm install intlayer vanilla-intlayernpm install vite-intlayer --save-devnpx intlayer init

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

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

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

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

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

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: अपने Vite कॉन्फ़िगरेशन में Intlayer एकीकृत करें

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

import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [intlayer()],
});

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

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

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

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

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

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

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

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

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

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

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

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

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 फ़ंक्शन का उपयोग करें।

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 के रूप में डाला जाता है।

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

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 में ले जाने की आवश्यकता है।

import { defineConfig } from "vite";
import { intlayer, intlayerProxy } from "vite-intlayer";

export default defineConfig({
  plugins: [
    intlayerProxy(), // पहले रखा जाना चाहिए
    intlayer(),
  ],
});

(वैकल्पिक) चरण 10: लोकेल बदलने पर URL बदलें

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

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

(वैकल्पिक) चरण 11: HTML भाषा और दिशा विशेषताओं को स्विच करें

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

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 का उपयोग करें:

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 आपके घटकों को बदलने और सामग्री निकालने के लिए एक कंपाइलर / एक्सट्रैक्टर का प्रस्ताव करता है।

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

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

npx intlayer extract

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // कंपाइलर प्लगइन जोड़ता है ],});

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 का उपयोग करके अपनी सामग्री को बाहरी बना सकते हैं।