Интеграция с Vite

Компилятор Lingo.dev интегрируется напрямую с Vite, чтобы обеспечить локализацию на этапе сборки для React-приложений.

Следуйте этим шагам, чтобы добавить поддержку нескольких языков в ваше приложение на Vite + React.

Или изучите демо-проект Vite, чтобы попробовать компилятор в действии.

Предварительные требования

  • Vite 4+
  • React 18+
  • Node.js 18 или выше

Шаг 1. Установите пакет

Установите пакет lingo.dev:

npm install lingo.dev

Шаг 2. Настройте Vite

Импортируйте и настройте компилятор в вашем vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import lingoCompiler from "lingo.dev/compiler";

const viteConfig = {
  plugins: [react()],
  // Ваши существующие настройки Vite
};

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    targetLocales: ["es", "fr", "de"],
    models: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

Шаг 3. Настройте аутентификацию

Создайте бесплатный аккаунт на groq.com и добавьте ваш API-ключ:


# .env

GROQ_API_KEY=gsk_...

Шаг 4. Добавьте провайдер

Импортируйте провайдер в ваш основной файл входа (src/main.tsx):

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { LingoProviderWrapper, loadDictionary } from "lingo.dev/react/client";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <LingoProviderWrapper loadDictionary={(locale) => loadDictionary(locale)}>
      <App />
    </LingoProviderWrapper>
  </React.StrictMode>,
);

Шаг 5. Необязательно: добавьте переключатель языка

Создайте компонент переключателя языка в вашем приложении или заголовке:

import { LocaleSwitcher } from "lingo.dev/react/client";

function App() {
  return (
    <div className="App">
      <header>
        <LocaleSwitcher locales={["en", "es", "fr", "de"]} />
      </header>
      <main>
        <h1>Добро пожаловать в наше приложение</h1>
        <p>Этот контент переводится автоматически</p>
      </main>
    </div>
  );
}

export default App;

Шаг 6. Сборка и тестирование

Запустите сервер разработки:

npm run dev

Компилятор автоматически:

  1. Сканирует ваши React-компоненты на наличие переводимого контента
  2. Извлекает ключи переводов
  3. Генерирует переводы с помощью ИИ
  4. Создает оптимизированные файлы переводов в директории lingo/

Перейдите на http://localhost:5173, чтобы увидеть ваше многоязычное приложение в действии.

Параметры конфигурации

Вы можете настроить поведение компилятора:

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    sourceLocale: "en",
    targetLocales: ["es", "fr", "de", "ja"],
    lingoDir: "lingo",
    debug: false,
  })(viteConfig),
);

Функции для разработки

Горячая замена модулей (HMR)

Компилятор поддерживает HMR в Vite для обновления переводов:

// src/components/Welcome.tsx
export function Welcome() {
  return (
    <div>
      <h1>Добро пожаловать в наше приложение</h1>
      <p>
        Измените этот текст и увидите, как переводы обновляются автоматически
      </p>
    </div>
  );
}

Оптимизация сборки

Оптимизация сборки в Vite работает без проблем с компилятором:

  • Разделение кода включает пакеты переводов
  • Оптимизация ресурсов эффективно обрабатывает файлы переводов
  • Tree shaking удаляет неиспользуемые переводы

Пример структуры проекта

my-vite-app/
├── src/
│   ├── components/
│   │   └── Welcome.tsx
│   ├── App.tsx
│   ├── main.tsx
│   └── lingo/           # Сгенерированные файлы переводов
│       ├── meta.json
│       └── dictionary.js
├── vite.config.ts
├── package.json
└── .env

Развертывание в продакшн

  1. Соберите ваше приложение:

    npm run build

  2. Закоммитьте файлы переводов:

    git add src/lingo/
git commit -m "Добавить переводы"

  3. Разверните на вашей предпочтительной платформе (Vercel, Netlify и т.д.)

Ваше приложение на Vite будет автоматически предоставлять локализованный контент на основе предпочтений пользователя.

Устранение неполадок

Частые проблемы

Переводы не генерируются: Убедитесь, что ваш GROQ_API_KEY правильно настроен в файле .env.

Ошибки сборки: Убедитесь, что директория lingo/ включена в систему контроля версий.

HMR не работает: Перезапустите сервер разработки после добавления нового переводимого контента.

Следующие шаги