Intégration Vite

Lingo.dev Compiler s'intègre directement avec Vite pour fournir une localisation au moment de la compilation pour les applications React.

Suivez ces étapes pour ajouter la prise en charge multilingue à votre application Vite + React.

Ou explorez le projet de démonstration Vite pour essayer le Compiler en action.

Prérequis

  • Vite 4+
  • React 18+
  • Node.js 18 ou supérieur

Étape 1. Installer le package

Installez le package lingo.dev :

npm install lingo.dev

Étape 2. Configurer Vite

Importez et configurez le compilateur dans votre fichier vite.config.ts :

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

const viteConfig = {
  plugins: [react()],
  // Votre configuration Vite existante
};

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

Étape 3. Configurer l'authentification

Lingo.dev Compiler envoie votre contenu aux moteurs de traduction IA pour la localisation, vous devez donc d'abord vous authentifier.

Option 1. Lingo.dev Engine

Lingo.dev Compiler peut utiliser Lingo.dev Engine comme moteur de traduction IA. Il offre une sélection dynamique de modèles, un routage automatique, une mémoire de traduction et la prise en charge de glossaires. Des options gratuites et payantes sont disponibles.

Pour vous authentifier, exécutez :

npx lingo.dev@latest login

Si vous rencontrez des problèmes avec le flux via navigateur, vous pouvez ajouter manuellement une clé LINGODOTDEV_API_KEY à votre fichier .env :


# .env

LINGODOTDEV_API_KEY=...

Vous trouverez le jeton dans les paramètres de votre projet Lingo.dev Engine.

Option 2. Fournisseur LLM alternatif

Alternativement, vous pouvez utiliser des modèles provenant de fournisseurs LLM pris en charge :

Ajoutez votre/vos clé(s) API à votre fichier .env :


# .env

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

Remarque : Assurez-vous d'activer votre compte auprès du fournisseur de LLM et d'accepter leurs conditions d'utilisation avant de l'utiliser dans Compiler.

Étape 4. Ajouter le fournisseur

Importez le fournisseur dans votre fichier d'entrée principal (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>,
);

Étape 5. Optionnel : ajouter un sélecteur de langue

Créez un composant de sélection de langue dans votre App ou 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;

Étape 6. Compiler et tester

Démarrez votre serveur de développement :

npm run dev

Le compilateur va automatiquement :

  1. Scanner vos composants React pour identifier le contenu traduisible
  2. Extraire les clés de traduction
  3. Générer des traductions optimisées par IA
  4. Créer des fichiers de traduction optimisés dans le répertoire lingo/

Visitez http://localhost:5173 pour voir votre application multilingue en action.

Options de configuration

Vous pouvez personnaliser le comportement du compilateur :

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

Fonctionnalités de développement

Remplacement de module à chaud

Le compilateur prend en charge le HMR de Vite pour les mises à jour de traduction :

// 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>
  );
}

Optimisation de la compilation

L'optimisation de compilation de Vite fonctionne parfaitement avec le compilateur :

  • La séparation du code inclut les bundles de traduction
  • L'optimisation des ressources gère efficacement les fichiers de traduction
  • Le tree shaking supprime les traductions inutilisées

Structure de projet exemple

my-vite-app/
├── src/
│   ├── components/
│   │   └── Welcome.tsx
│   ├── App.tsx
│   ├── main.tsx
│   └── lingo/           # Fichiers de traduction générés
│       ├── meta.json
│       └── dictionary.js
├── vite.config.ts
├── package.json
└── .env

Déploiement en production

  1. Compilez votre application :

    npm run build

  2. Committez les fichiers de traduction :

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

  3. Déployez en utilisant votre plateforme préférée (Vercel, Netlify, etc.)

Votre application Vite servira automatiquement le contenu localisé en fonction des préférences de l'utilisateur.

Résolution des problèmes

Problèmes courants

Traductions non générées : Assurez-vous que votre GROQ_API_KEY est correctement définie dans votre fichier .env.

Erreurs de compilation : Vérifiez que le répertoire lingo/ est inclus dans votre système de contrôle de version.

HMR ne fonctionne pas : Redémarrez le serveur de développement après avoir ajouté du nouveau contenu traduisible.

Prochaines étapes