Начало работы с интернационализацией (i18n) с Intlayer, Vite и Svelte

Этот пакет находится в разработке. Подробнее смотрите в issue. Покажите свой интерес к Intlayer для Svelte, поставив лайк этому issue.

Что такое Intlayer?

Intlayer — это инновационная, открытая библиотека интернационализации (i18n), разработанная для упрощения поддержки многоязычности в современных веб-приложениях.

С помощью Intlayer вы можете:

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

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

Шаг 1: Установка зависимостей

Установите необходимые пакеты с помощью npm:

npm install intlayer svelte-intlayernpm install vite-intlayer --save-dev

• intlayer

• intlayer

  Основной пакет, предоставляющий инструменты интернационализации для управления конфигурацией, перевода, объявления контента, транспиляции и CLI-команд.

• svelte-intlayer Пакет, который интегрирует Intlayer с приложением на Svelte. Он предоставляет провайдеры контекста и хуки для интернационализации в Svelte.

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

Шаг 3: Интеграция Intlayer в вашу конфигурацию Vite

Добавьте плагин intlayer в вашу конфигурацию.

import { defineConfig } from "vite";import react from "@vitejs/plugin-react-swc";import { intlayerPlugin } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({  plugins: [react(), intlayerPlugin()],});

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

Шаг 4: Объявите Ваш Контент

Создайте и управляйте декларациями контента для хранения переводов:

import { t, type Dictionary } from "intlayer";const appContent = {  key: "app",  content: {},} satisfies Dictionary;export default appContent;

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

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

Шаг 5: Использование Intlayer в вашем коде

[заполнить]

(Необязательно) Шаг 6: Изменение языка вашего контента

[заполнить]

(Необязательно) Шаг 7: Добавление локализованной маршрутизации в ваше приложение

[заполнить]

(Необязательно) Шаг 8: Изменение URL при смене локали

[заполнить]

(Необязательно) Шаг 9: Переключение атрибутов языка и направления HTML

[заполнить]

(Необязательно) Шаг 10: Создание локализованного компонента ссылки

[заполнить]

Конфигурация Git

Рекомендуется игнорировать файлы, сгенерированные Intlayer. Это позволит избежать их коммита в ваш репозиторий Git.

Для этого вы можете добавить следующие инструкции в ваш файл .gitignore:

# Игнорировать файлы, сгенерированные Intlayer.intlayer

Расширение VS Code

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

Установить из магазина расширений VS Code

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

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

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

Продвинутые возможности

Для расширения возможностей вы можете реализовать визуальный редактор или вынести ваш контент во внешний CMS.

История документации

• 5.5.10 - 2025-06-29: Инициализация истории