Интеграция с 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. Настройте аутентификацию

Lingo.dev Compiler отправляет ваш контент в AI-движки перевода для локализации, поэтому сначала необходимо пройти аутентификацию.

Вариант 1. Движок Lingo.dev

Lingo.dev Compiler может использовать Lingo.dev Engine в качестве вашего AI-движка перевода. Он предоставляет динамический выбор моделей, авто-маршрутизацию, память переводов и поддержку глоссария. Доступны бесплатные и платные варианты.

Для аутентификации выполните команду:

npx lingo.dev@latest login

Если у вас возникли проблемы с браузерным процессом, вы можете вручную добавить LINGODOTDEV_API_KEY в ваш файл .env:


# .env

LINGODOTDEV_API_KEY=...

Вы найдете токен в настройках проекта Lingo.dev Engine.

Вариант 2. Альтернативный провайдер LLM

Кроме того, вы можете использовать модели от поддерживаемых поставщиков LLM:

Добавьте ваш(и) API-ключ(и) в файл .env:


# .env

GROQ_API_KEY=gsk_...
GOOGLE_API_KEY=...
OPENROUTER_API_KEY=...
MISTRAL_API_KEY=...

Примечание: Убедитесь, что вы активировали свою учетную запись у поставщика LLM и приняли их Условия использования перед началом работы с Compiler.

Шаг 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 не работает: Перезапустите сервер разработки после добавления нового переводимого контента.

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