\n \n \n \n \n

\n

\n \n\n```\n\nСборка предоставляет `Intlayer` и `VanillaIntlayer` в качестве глобальных объектов на `window`.\n\n\n\n\n\nВ вашем `src/main.js` вызовите `installIntlayer()` **до** того, как какой-либо контент будет отрисован, чтобы глобальный синглтон языка был готов.\n\n```javascript fileName=\"src/main.js\"\nconst { installIntlayer } = window.VanillaIntlayer;\n\n// Должно быть вызвано перед отрисовкой любого i18n-контента.\ninstallIntlayer();\n```\n\nЕсли вы также хотите использовать рендерер markdown, вызовите `installIntlayerMarkdown()`:\n\n```javascript fileName=\"src/main.js\"\nconst { installIntlayer, installIntlayerMarkdown } = window.VanillaIntlayer;\n\ninstallIntlayer();\ninstallIntlayerMarkdown();\n```\n\n\n\n\n\nСоздавайте и управляйте объявлениями контента для хранения переводов:\n\n```typescript fileName=\"src/app.content.ts\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { insert, t, type Dictionary } from \"intlayer\";\n\nconst appContent = {\n key: \"app\",\n content: {\n title: \"Vite + Vanilla\",\n\n viteLogoLabel: t({\n en: \"Vite Logo\",\n fr: \"Logo Vite\",\n es: \"Logo Vite\",\n }),\n\n count: insert(\n t({\n en: \"count is {{count}}\",\n fr: \"le compte est {{count}}\",\n es: \"el recuento es {{count}}\",\n })\n ),\n\n readTheDocs: t({\n en: \"Click on the Vite logo to learn more\",\n fr: \"Cliquez sur le logo Vite pour en savoir plus\",\n es: \"Haga clic en el logotipo de Vite para obtener más información\",\n }),\n },\n} satisfies Dictionary;\n\nexport default appContent;\n```\n\n```json fileName=\"src/app.content.json\" contentDeclarationFormat=\"json\"\n{\n \"$schema\": \"https://intlayer.org/schema.json\",\n \"key\": \"app\",\n \"content\": {\n \"title\": \"Vite + Vanilla\",\n \"viteLogoLabel\": {\n \"nodeType\": \"translation\",\n \"translation\": {\n \"en\": \"Vite Logo\",\n \"fr\": \"Logo Vite\",\n \"es\": \"Logo Vite\"\n }\n },\n \"count\": {\n \"nodeType\": \"insertion\",\n \"insertion\": {\n \"nodeType\": \"translation\",\n \"translation\": {\n \"en\": \"count is {{count}}\",\n \"fr\": \"le compte est {{count}}\",\n \"es\": \"el recuento es {{count}}\"\n }\n }\n },\n \"readTheDocs\": {\n \"nodeType\": \"translation\",\n \"translation\": {\n \"en\": \"Click on the Vite logo to learn more\",\n \"fr\": \"Cliquez sur le logo Vite pour en savoir plus\",\n \"es\": \"Haga clic en el logotipo de Vite para obtener más información\"\n }\n }\n }\n}\n```\n\n> Ваши объявления контента могут быть определены в любом месте вашего приложения, если они включены в директорию `contentDir` (по умолчанию `./src`) и соответствуют расширению файла объявления контента (по умолчанию `.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}`).\n>\n> Для получения более подробной информации см. [документацию по объявлению контента](/ru/doc/concept/content).\n\n\n\n\n\nОбъект `window.VanillaIntlayer` предоставляет вспомогательные функции API: `useIntlayer(key, locale?)` возвращает переведенный контент для заданного ключа.\n\n```javascript fileName=\"src/main.js\"\nconst { installIntlayer, useIntlayer } = window.VanillaIntlayer;\n\ninstallIntlayer();\n\n// Получение начального контента для текущего языка.\n// Соедините с .onChange(), чтобы получать уведомления при смене языка.\nconst content = useIntlayer(\"app\").onChange((newContent) => {\n // Перерисовываем или обновляем только затронутые DOM-узлы\n document.querySelector(\"h1\").textContent = String(newContent.title);\n document.querySelector(\".read-the-docs\").textContent = String(\n newContent.readTheDocs\n );\n});\n\n// Начальная отрисовка\ndocument.querySelector(\"h1\").textContent = String(content.title);\ndocument.querySelector(\".read-the-docs\").textContent = String(\n content.readTheDocs\n);\n```\n\n> Получайте дочерние значения в виде строк, оборачивая их в `String()`, что вызывает метод `toString()` узла и возвращает переведенный текст.\n>\n> Если вам нужно значение для нативного HTML-атрибута (например, `alt`, `aria-label`), используйте `.value` напрямую:\n>\n> ```javascript\n> img.alt = content.viteLogoLabel.value;\n> ```\n\n\n\n\n\nЧтобы изменить язык вашего контента, используйте функцию `setLocale`, предоставляемую `useLocale`.\n\n```javascript fileName=\"src/locale-switcher.js\"\nconst { getLocaleName } = window.Intlayer;\nconst { useLocale } = window.VanillaIntlayer;\n\nexport function setupLocaleSwitcher(container) {\n const { locale, availableLocales, setLocale, subscribe } = useLocale();\n\n const select = document.createElement(\"select\");\n select.setAttribute(\"aria-label\", \"Язык\");\n\n const render = (currentLocale) => {\n select.innerHTML = availableLocales\n .map(\n (loc) =>\n ``\n )\n .join(\"\");\n };\n\n render(locale);\n container.appendChild(select);\n\n select.addEventListener(\"change\", () => setLocale(select.value));\n\n // Поддерживаем список в актуальном состоянии, если язык был изменен в другом месте\n return subscribe((newLocale) => render(newLocale));\n}\n```\n\n\n\n\n\nОбновляйте атрибуты `lang` и `dir` тега `` в соответствии с текущим языком для обеспечения доступности и SEO.\n\n```javascript fileName=\"src/main.js\"\nconst { getHTMLTextDir } = window.Intlayer;\nconst { installIntlayer, useLocale } = window.VanillaIntlayer;\n\ninstallIntlayer();\n\nuseLocale({\n onLocaleChange: (locale) => {\n document.documentElement.lang = locale;\n document.documentElement.dir = getHTMLTextDir(locale);\n },\n});\n```\n\n\n\n\n\nЕсли вы хотите загружать словари лениво для каждого языка, вы можете использовать `useDictionaryDynamic`. Это полезно, если вы не хотите включать все переводы в начальный файл `intlayer.js`.\n\n```javascript fileName=\"src/app.js\"\nconst { installIntlayer, useDictionaryDynamic } = window.VanillaIntlayer;\n\ninstallIntlayer();\n\nconst unsubscribe = useDictionaryDynamic(\n {\n en: () => import(\"../.intlayer/dictionaries/en/app.mjs\"),\n fr: () => import(\"../.intlayer/dictionaries/fr/app.mjs\"),\n es: () => import(\"../.intlayer/dictionaries/es/app.mjs\"),\n },\n \"app\"\n).onChange((content) => {\n document.querySelector(\"h1\").textContent = String(content.title);\n});\n```\n\n> Примечание: `useDictionaryDynamic` требует, чтобы словари были доступны в виде отдельных файлов ESM. Этот подход обычно используется, если у вас есть веб-сервер, раздающий словари.\n> \n\n\n\n### Настройка TypeScript\n\nУбедитесь, что ваша конфигурация TypeScript включает автоматически генерируемые типы.\n\n```json5 fileName=\"tsconfig.json\"\n{\n \"compilerOptions\": {\n // ...\n },\n \"include\": [\"src\", \".intlayer/**/*.ts\"],\n}\n```\n\n### Расширение для VS Code\n\nЧтобы улучшить процесс разработки с Intlayer, вы можете установить официальное **расширение Intlayer для VS Code**.\n\n[Установить из VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)\n\nЭто расширение предоставляет:\n\n- **Автодополнение** для ключей переводов.\n- **Обнаружение ошибок в реальном времени** для недостающих переводов.\n- **Встроенный предпросмотр** переведенного контента.\n- **Быстрые действия** для легкого создания и обновления переводов.\n\nДля получения более подробной информации об использовании расширения см. [документацию расширения Intlayer для VS Code](https://intlayer.org/doc/vs-code-extension).\n\n---\n\n### Идите дальше\n\nЧтобы пойти дальше, вы можете внедрить [визуальный редактор](/ru/doc/concept/editor) или вынести ваш контент во внешнюю среду с помощью [CMS](/ru/doc/concept/cms).\n","description":"Больше никакого i18next. Руководство 2026 по созданию многоязычного (i18n) приложения Vanilla JS. Переводите с помощью ИИ-агентов и оптимизируйте размер бандла, SEO и производительность.","url":"https://intlayer.org/ru/doc/environment/vanilla","datePublished":"2026-03-31","dateModified":"2026-05-31","version":"8.9.0","keywords":"Интернационализация, Документация, Intlayer, Vanilla JS, JavaScript, TypeScript, HTML","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Разработчики, менеджеры контента"}}
    Автор:
    Создание:2026-03-31Последнее обновление:2026-05-31

    Переведите ваш сайт на Vanilla JS с помощью Intlayer | Интернационализация (i18n)

    ide.intlayer.org

    Содержание

    Почему Intlayer лучше альтернатив?

    По сравнению с основными решениями, такими как i18next или i18n.js, Intlayer — это решение, которое включает в себя встроенные оптимизации, такие как:

    Intlayer оптимизирован для идеальной работы с Vanilla JavaScript, предлагая независимое от платформы управление контентом, поддержку TypeScript и все функции, необходимые для масштабирования интернационализации (i18n).

    Вместо загрузки огромных файлов JSON на свои страницы загружайте только необходимый контент. Intlayer помогает уменьшить размер бандла и страниц до 50 %.

    Определение области содержимого вашего приложения облегчает обслуживание крупномасштабных приложений. Вы можете дублировать или удалить отдельную папку функций, не утруждав себя мысленным бременем проверки всей кодовой базы контента. Кроме того, Intlayer полностью типизирован, что обеспечивает точность вашего контента.

    Совместное размещение контента уменьшает контекст, необходимый для моделей большого языка (LLM). Intlayer также поставляется с набором инструментов, таких как CLI для проверки отсутствия переводов,LSP, MCP, и навыки агента, чтобы сделать работу разработчика (DX) еще более удобной для агентов ИИ.

    Используйте автоматизацию для перевода в своем конвейере CI/CD, используя LLM по вашему выбору за счет вашего поставщика ИИ. Intlayer также предлагает компилятор для автоматизации извлечения контента, а также веб-платформу, которая помогает переводить в фоновом режиме.

    Подключение больших файлов JSON к компонентам может привести к проблемам с производительностью и реактивностью. Intlayer оптимизирует загрузку контента во время сборки (build time).

    Intlayer — это больше, чем просто решение i18n. Он предоставляет автономный визуальный редактор и полный CMS, чтобы помочь вам управлять многоязычным контентом в реальном времени, упрощая сотрудничество с переводчиками, копирайтерами и другими членами команды. Контент может храниться локально и/или удаленно.

    Пошаговое руководство по настройке Intlayer в приложении на Vanilla JS

    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. Он предоставляет синглтон pub/sub (IntlayerClient) и вспомогательные функции на основе обратных вызовов (useIntlayer, useLocale и т. д.), чтобы любая часть вашего приложения могла реагировать на изменение языка без зависимости от UI-фреймворка.

      Экспорт сборки (bunding) CLI intlayer standalone создает оптимизированную сборку за счет исключения неиспользуемого кода (tree-shaking) неиспользуемых пакетов, локалей и второстепенной логики (такой как редиректы или префиксы), специфичной для вашей конфигурации.

    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, перенаправление через middleware, имена куки, расположение и расширение ваших объявлений контента, отключить логи Intlayer в консоли и многое другое. Полный список доступных параметров см. в документации по конфигурации.

    3. Импорт сборки в ваш HTML

      После того как вы сгенерировали сборку intlayer.js, вы можете импортировать ее в свой HTML-файл:

      index.html
      <!DOCTYPE html><html lang="ru">  <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>

      Сборка предоставляет Intlayer и VanillaIntlayer в качестве глобальных объектов на window.

    4. Инициализация Intlayer в точке входа

      В вашем src/main.js вызовите installIntlayer() до того, как какой-либо контент будет отрисован, чтобы глобальный синглтон языка был готов.

      src/main.js
      const { installIntlayer } = window.VanillaIntlayer;// Должно быть вызвано перед отрисовкой любого i18n-контента.installIntlayer();

      Если вы также хотите использовать рендерер markdown, вызовите 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: "Haga clic en el logotipo de Vite para obtener más información",
    }),
  },
} satisfies Dictionary;

export default appContent;

      Ваши объявления контента могут быть определены в любом месте вашего приложения, если они включены в директорию contentDir (по умолчанию ./src) и соответствуют расширению файла объявления контента (по умолчанию .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

      Для получения более подробной информации см. документацию по объявлению контента.

    6. Использование Intlayer в вашем JavaScript

      Объект 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. Изменение языка вашего контента

      Необязательно

      Чтобы изменить язык вашего контента, используйте функцию setLocale, предоставляемую useLocale.

      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

      Необязательно

      Обновляйте атрибуты lang и dir тега <html> в соответствии с текущим языком для обеспечения доступности и SEO.

      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. Ленивая загрузка словарей по языкам

      Необязательно

      Если вы хотите загружать словари лениво для каждого языка, вы можете использовать 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 Marketplace

    Это расширение предоставляет:

    • Автодополнение для ключей переводов.
    • Обнаружение ошибок в реальном времени для недостающих переводов.
    • Встроенный предпросмотр переведенного контента.
    • Быстрые действия для легкого создания и обновления переводов.

    Для получения более подробной информации об использовании расширения см. документацию расширения Intlayer для VS Code.

    Идите дальше

    Чтобы пойти дальше, вы можете внедрить визуальный редактор или вынести ваш контент во внешнюю среду с помощью CMS.

    Vite и Vanilla JSVite и Lit