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.

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 vite.config.ts :

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
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

Créez un compte gratuit sur groq.com et ajoutez votre clé API :


# .env

GROQ_API_KEY=gsk_...

É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. Analyser 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 build

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

  • Le fractionnement du code inclut les bundles de traduction
  • L'optimisation des ressources gère efficacement les fichiers de traduction
  • L'élimination de code inutilisé supprime les traductions non utilisé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. Construisez 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 du 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 build : Assurez-vous 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