Получайте уведомления о предстоящих релизах Intlayer
    Создание:2025-04-18Последнее обновление:2025-06-29

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

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

    Что такое Intlayer?

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

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

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

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

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

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

    bash
    npm install intlayer solid-intlayernpm install vite-intlayer --save-dev
    • intlayer

    • intlayer

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

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

    • vite-intlayer Включает плагин Vite для интеграции Intlayer с сборщиком Vite, а также промежуточное ПО для определения предпочтительной локали пользователя, управления cookie и обработки перенаправления URL.

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

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

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

    vite.config.ts
    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: Объявите ваш контент

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

    src/app.content.tsx
    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:

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

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

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

    Установить из VS Code Marketplace

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

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

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


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

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


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

    • 5.5.10 - 2025-06-29: Инициализация истории
    Получайте уведомления о предстоящих релизах Intlayer