Integración con Vite

Lingo.dev Compiler se integra directamente con Vite para proporcionar localización en tiempo de compilación para aplicaciones React.

Sigue estos pasos para añadir soporte multilingüe a tu aplicación Vite + React.

Requisitos previos

  • Vite 4+
  • React 18+
  • Node.js 18 o superior

Paso 1. Instalar el paquete

Instala el paquete lingo.dev:

npm install lingo.dev

Paso 2. Configurar Vite

Importa y configura el compilador en tu vite.config.ts:

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

const viteConfig = {
  plugins: [react()],
  // Tu configuración existente de Vite
};

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

Paso 3. Configurar la autenticación

Crea una cuenta gratuita en groq.com y añade tu clave API:


# .env

GROQ_API_KEY=gsk_...

Paso 4. Añadir el proveedor

Importa el proveedor en tu archivo de entrada 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>,
);

Paso 5. Opcional: Añadir selector de idioma

Crea un componente selector de idioma en tu App o 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;

Paso 6. Compilar y probar

Inicia tu servidor de desarrollo:

npm run dev

El compilador automáticamente:

  1. Escaneará tus componentes React para encontrar contenido traducible
  2. Extraerá las claves de traducción
  3. Generará traducciones potenciadas por IA
  4. Creará archivos de traducción optimizados en el directorio lingo/

Visita http://localhost:5173 para ver tu aplicación multilingüe en acción.

Opciones de configuración

Puedes personalizar el comportamiento del compilador:

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

Características de desarrollo

Reemplazo de módulos en caliente

El compilador es compatible con el HMR de Vite para actualizaciones de traducciones:

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

Optimización de compilación

La optimización de compilación de Vite funciona perfectamente con el compilador:

  • La división de código incluye paquetes de traducción
  • La optimización de activos gestiona los archivos de traducción de manera eficiente
  • El tree shaking elimina las traducciones no utilizadas

Estructura de proyecto de ejemplo

my-vite-app/
├── src/
│   ├── components/
│   │   └── Welcome.tsx
│   ├── App.tsx
│   ├── main.tsx
│   └── lingo/           # Archivos de traducción generados
│       ├── meta.json
│       └── dictionary.js
├── vite.config.ts
├── package.json
└── .env

Despliegue en producción

  1. Compila tu aplicación:

    npm run build

  2. Confirma los archivos de traducción:

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

  3. Despliega utilizando tu plataforma preferida (Vercel, Netlify, etc.)

Tu aplicación Vite servirá contenido localizado automáticamente según las preferencias del usuario.

Solución de problemas

Problemas comunes

Las traducciones no se generan: Asegúrate de que tu GROQ_API_KEY esté configurada correctamente en tu archivo .env.

Errores de compilación: Asegúrate de que el directorio lingo/ esté incluido en tu control de versiones.

HMR no funciona: Reinicia el servidor de desarrollo después de añadir nuevo contenido traducible.

Próximos pasos