Vite-Integration

Lingo.dev Compiler integriert sich direkt in Vite, um Lokalisierung zur Build-Zeit für React-Anwendungen bereitzustellen.

Befolgе diese Schritte, um mehrsprachige Unterstützung zu deiner Vite + React-Anwendung hinzuzufügen.

Oder sieh dir das Vite-Demoprojekt an, um den Compiler in Aktion zu erleben.

Voraussetzungen

  • Vite 4+
  • React 18+
  • Node.js 18 oder höher

Schritt 1. Paket installieren

Installieren Sie das lingo.dev-Paket:

npm install lingo.dev

Schritt 2. Vite konfigurieren

Importiere und konfiguriere den Compiler in deiner vite.config.ts:

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

const viteConfig = {
  plugins: [react()],
  // Deine bestehende Vite-Konfiguration
};

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

Schritt 3. Authentifizierung einrichten

Lingo.dev Compiler sendet Ihre Inhalte zur Lokalisierung an KI-Übersetzungs-Engines, daher müssen Sie sich zunächst authentifizieren.

Option 1. Lingo.dev Engine

Lingo.dev Compiler kann Lingo.dev Engine als KI-Übersetzungs-Engine verwenden. Diese bietet dynamische Modellauswahl, Auto-Routing, Translation Memory und Glossar-Unterstützung. Kostenlose und kostenpflichtige Optionen sind verfügbar.

Für die Authentifizierung führen Sie aus:

npx lingo.dev@latest login

Bei Problemen mit dem Browser-Workflow können Sie manuell einen LINGODOTDEV_API_KEY zu Ihrer .env-Datei hinzufügen:


# .env

LINGODOTDEV_API_KEY=...

Den Token finden Sie in Ihren Lingo.dev Engine Projekteinstellungen.

Option 2. Alternative LLM-Anbieter

Alternativ können Sie Modelle von unterstützten LLM-Anbietern verwenden:

Fügen Sie Ihre(n) API-Schlüssel zu Ihrer .env-Datei hinzu:


# .env

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

Hinweis: Stellen Sie sicher, dass Sie Ihr Konto beim LLM-Anbieter aktiviert und deren Nutzungsbedingungen akzeptiert haben, bevor Sie es im Compiler verwenden.

Schritt 4. Provider hinzufügen

Importieren Sie den Provider in Ihrer Haupt-Einstiegsdatei (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>,
);

Schritt 5. Optional: Locale-Switcher hinzufügen

Erstellen Sie eine Sprachumschalter-Komponente in Ihrer App oder im Header:

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

function App() {
  return (
    <div className="App">
      <header>
        <LocaleSwitcher locales={["en", "es", "fr", "de"]} />
      </header>
      <main>
        <h1>Welcome to our app</h1>
        <p>This content is automatically translated</p>
      </main>
    </div>
  );
}

export default App;

Schritt 6. Bauen und Testen

Starten Sie Ihren Entwicklungsserver:

npm run dev

Der Compiler wird automatisch:

  1. Ihre React-Komponenten nach übersetzbaren Inhalten durchsuchen
  2. Übersetzungsschlüssel extrahieren
  3. KI-gestützte Übersetzungen generieren
  4. Optimierte Übersetzungsdateien im Verzeichnis lingo/ erstellen

Besuchen Sie http://localhost:5173, um Ihre mehrsprachige Anwendung in Aktion zu sehen.

Konfigurationsoptionen

Sie können das Compiler-Verhalten anpassen:

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

Entwicklungsfunktionen

Hot Module Replacement

Der Compiler unterstützt Vites HMR für Übersetzungsaktualisierungen:

// src/components/Welcome.tsx
export function Welcome() {
  return (
    <div>
      <h1>Welcome to our app</h1>
      <p>Edit this text and see translations update automatically</p>
    </div>
  );
}

Build-Optimierung

Vites Build-Optimierung funktioniert nahtlos mit dem Compiler:

  • Code-Splitting umfasst Übersetzungsbundles
  • Asset-Optimierung verarbeitet Übersetzungsdateien effizient
  • Tree-Shaking entfernt ungenutzte Übersetzungen

Beispiel-Projektstruktur

my-vite-app/
├── src/
│   ├── components/
│   │   └── Welcome.tsx
│   ├── App.tsx
│   ├── main.tsx
│   └── lingo/           # Generierte Übersetzungsdateien
│       ├── meta.json
│       └── dictionary.js
├── vite.config.ts
├── package.json
└── .env

Produktionsdeployment

  1. Bauen Sie Ihre Anwendung:

    npm run build

  2. Übersetzungsdateien committen:

    git add src/lingo/
git commit -m "Add translations"

  3. Deployment über Ihre bevorzugte Plattform (Vercel, Netlify, etc.)

Ihre Vite-Anwendung wird lokalisierte Inhalte automatisch basierend auf den Benutzereinstellungen bereitstellen.

Fehlerbehebung

Häufige Probleme

Übersetzungen werden nicht generiert: Stellen Sie sicher, dass Ihr GROQ_API_KEY korrekt in Ihrer .env-Datei eingestellt ist.

Build-Fehler: Stellen Sie sicher, dass das Verzeichnis lingo/ in Ihrer Versionskontrolle enthalten ist.

HMR funktioniert nicht: Starten Sie den Entwicklungsserver neu, nachdem Sie neue übersetzbare Inhalte hinzugefügt haben.

Nächste Schritte