Vite + React

Alfa

Lingo.dev Compiler je ve fázi alfa. Je nestabilní, nedoporučuje se pro produkční nasazení a API se může mezi jednotlivými verzemi měnit.

Lingo.dev Compiler se s Vite integruje prostřednictvím lingoCompilerPlugin, pluginu pro Vite, který při sestavení transformuje vaše React komponenty a vkládá do nich překlady. Podporuje plný Hot Module Replacement, takže se překlady během vývoje aktualizují okamžitě.

Předpoklady#

Požadavky

Vite 5+ s React
Node.js 18+
Nainstalovaný @lingo.dev/compiler

Instalace#

bash

pnpm install @lingo.dev/compiler

Nakonfigurujte vite.config.ts#

Přidejte lingoCompilerPlugin do konfigurace Vite. Plugin musí být umístěný před pluginem react() – toto pořadí je povinné, protože compiler potřebuje transformovat JSX dřív, než ho zpracuje React plugin.

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

export default defineConfig({
  plugins: [
    lingoCompilerPlugin({
      sourceRoot: "src",
      sourceLocale: "en",
      targetLocales: ["es", "de", "fr", "ja"],
      models: "lingo.dev",
      dev: {
        usePseudotranslator: true,
      },
    }),
    react(),
  ],
});

Na pořadí pluginů záleží

Pokud lingoCompilerPlugin umístíte až za react(), React plugin zpracuje JSX jako první a compiler nedokáže rozpoznat přeložitelný text. Plugin Lingo proto vždy umístěte jako první do pole plugins.

Přidejte LingoProvider#

Ve vstupním souboru obalte kořen aplikace pomocí LingoProvider:

tsx

// src/main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { LingoProvider } from "@lingo.dev/compiler/react";
import App from "./App";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <LingoProvider>
      <App />
    </LingoProvider>
  </StrictMode>
);

LingoProvider inicializuje kontext jazyka a načte odpovídající slovník překladů pro aktivní jazyk.

Hot Module Replacement#

Plugin se napojuje na systém HMR ve Vite. Když v komponentě upravíte přeložitelný text:

Upravte zdrojový text

Změňte libovolný text v JSX – například aktualizujte nadpis z „Vítejte“ na „Vítejte zpět“.

Compiler změnu rozpozná

Plugin zachytí HMR update, identifikuje změněný řetězec a vygeneruje nový překlad (nebo pseudopřeklad ve vývojovém režimu).

Prohlížeč se aktualizuje okamžitě

Přeložená komponenta se znovu vykreslí bez úplného obnovení stránky. Metadata překladů v .lingo/metadata.json se zároveň aktualizují na disku.

Konfigurace sourceRoot#

Volba sourceRoot určuje, které soubory compiler prohledává kvůli přeložitelnému textu. Pro běžný projekt ve Vite + React platí:

{
  sourceRoot: "src",
}

Struktura projektu	Doporučený sourceRoot
Standardní (`src/`)	`"src"`
Monorepo se sdílenými balíčky	`"."` (kořen projektu)
Vlastní adresář	Cesta k adresáři s komponentami

U rozsáhlejších kódových základen pomůže užší sourceRoot zkrátit dobu sestavení. Pokud potřebujete překlady jen v konkrétních souborech, aktivujte useDirective: true a do těchto souborů přidejte 'use i18n'. Viz Struktura projektu.

Ukázková struktura projektu#

text

my-vite-app/
  src/
    main.tsx          # LingoProvider wraps <App />
    App.tsx           # Translatable components
    components/
      Header.tsx      # Automatically scanned
      Footer.tsx      # Automatically scanned
  .lingo/
    metadata.json     # Translation cache (commit this)
  vite.config.ts      # lingoCompilerPlugin configured here

Další kroky#

Nastavení

Kompletní návod na nastavení včetně ověřování

Reference konfigurace

Všechny možnosti konfigurace

Přepínání jazyků

Přidejte do aplikace přepínač jazyků

Vývojářské nástroje

Pseudopřekladač a vývojový server