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#
pnpm install @lingo.dev/compilerNakonfigurujte 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:
// 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#
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