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.

O explora el proyecto de demostración de Vite para probar el Compiler en acción.

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-swc";
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

Lingo.dev Compiler envía tu contenido a motores de traducción de IA para la localización, por lo que necesitas autenticarte primero.

Opción 1. Motor de Lingo.dev

Lingo.dev Compiler puede utilizar el Motor de Lingo.dev como tu motor de traducción de IA. Proporciona selección dinámica de modelos, enrutamiento automático, memoria de traducción y soporte de glosario. Hay opciones gratuitas y de pago disponibles.

Para autenticarte, ejecuta:

npx lingo.dev@latest login

Si tienes problemas con el flujo del navegador, puedes añadir manualmente un LINGODOTDEV_API_KEY a tu .env:


# .env

LINGODOTDEV_API_KEY=...

Encontrarás el token en la Configuración de Proyecto de Lingo.dev Engine.

Opción 2. Proveedor LLM alternativo

Alternativamente, puedes utilizar modelos de proveedores LLM compatibles:

Añade tu(s) clave(s) API a tu .env:


# .env

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

Nota: Asegúrese de activar su cuenta con el proveedor de LLM y aceptar sus Términos de servicio antes de utilizarlo en Compiler.

Paso 4. Añadir proveedor

Importe el proveedor en su 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

Cree un componente selector de idioma en su 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

Inicie su servidor de desarrollo:

npm run dev

El compilador automáticamente:

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

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

Opciones de configuración

Puede 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 soporta HMR de Vite para actualizaciones de traducción:

// 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:

  • División de código incluye paquetes de traducción
  • Optimización de activos gestiona los archivos de traducción de manera eficiente
  • 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