Intlayer를 사용하여 Vite 및 Vanilla JS 웹사이트 번역하기 | 국제화 (i18n)

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

import { installIntlayer } from "vanilla-intlayer";// i18n 콘텐츠를 렌더링하기 전에 호출해야 합니다.installIntlayer();// 앱 모듈을 가져와서 실행합니다.import "./app.js";

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

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);

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));}

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));

import { installIntlayer, useRewriteURL } from "vanilla-intlayer";installIntlayer();// 즉시 그리고 이후 로케일 변경 시마다 URL을 재정의합니다.// 정리를 위해 구독 해제 함수를 반환합니다.const stopRewriteURL = useRewriteURL();

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

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);});

import { type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  // ... 나머지 구성  compiler: {    /**     * 컴파일러 사용 여부를 나타냅니다.     */    enabled: true,    /**     * 출력 파일 경로를 정의합니다.     */    output: ({ fileName, extension }) => `./${fileName}${extension}`,    /**     * 컴포넌트를 변환한 후 저장할지 여부를 나타냅니다.     * 그렇게 하면 컴파일러를 한 번만 실행하여 앱을 변환하고 제거할 수 있습니다.     */    saveComponents: false,    /**     * 딕셔너리 키 접두사     */    dictionaryKeyPrefix: "",  },};export default config;

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.");

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

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

# Intlayer에서 생성된 파일 무시.intlayer