Alpha
Der Lingo.dev Compiler befindet sich in der Alpha-Phase. Er ist instabil, nicht für den Einsatz in Produktion empfohlen, und APIs können sich zwischen Releases ändern.
Der Lingo.dev Compiler enthält Entwicklungstools, mit denen Sie mehrsprachige UIs schnell weiterentwickeln können, ohne externe APIs aufzurufen. So prüfen Sie, ob sämtlicher Text übersetzbar ist, testen Layouts mit unterschiedlich langen Texten und debuggen Übersetzungsprobleme direkt während der Entwicklung.
Pseudotranslator#
Der Pseudotranslator erzeugt sofortige Fake-Übersetzungen, indem er Ausgangstext mit visuellen Markierungen umschließt. Es ist kein API-Schlüssel erforderlich, es werden keine Netzwerkaufrufe ausgeführt und die Ergebnisse sind sofort da.
Aktivieren Sie ihn in Ihrer Compiler-Konfiguration:
{
dev: {
usePseudotranslator: true,
},
}Was er erzeugt#
| Ausgangstext | Pseudoübersetzung |
|---|---|
Welcome | [!!! Welcome !!!] |
Sign in to your account | [!!! Sign in to your account !!!] |
Items: {count} | [!!! Items: {count} !!!] |
Die Markierungen ([!!! ... !!!]) heben übersetzten Text visuell von nicht übersetztem Text ab. Wenn in der UI trotz aktiviertem Pseudotranslator unbearbeiteter englischer Text erscheint, wird dieser Text nicht vom Compiler verarbeitet.
Anwendungsfälle#
Nicht übersetzte Strings erkennen
Führen Sie Ihre App mit aktiviertem Pseudotranslator aus. Jeder Text, der ohne die Markierungen [!!! ... !!!] erscheint, wird vom Compiler nicht erkannt. Das passiert, wenn Text in Variablen außerhalb von JSX gespeichert ist oder sich eine Komponente außerhalb des Verzeichnisses sourceRoot befindet.
Layouts mit längerem Text testen
Pseudoübersetzungen sind länger als der Ausgangstext (wegen der Markierungszeichen). Das simuliert Sprachen wie Deutsch oder Französisch, die in der Regel 20–30 % längere Texte als Englisch erzeugen, und deckt Layout-Überläufe frühzeitig auf.
Interpolation prüfen
Platzhalter wie {count} und {name} sollten innerhalb der Markierungen der Pseudoübersetzung erscheinen. Wenn ein Platzhalter außerhalb der Markierungen auftaucht oder fehlt, wird er vom Compiler möglicherweise nicht korrekt beibehalten.
Der Pseudotranslator durchläuft dieselbe Übersetzungspipeline wie echte Anbieter – mit denselben Schritten für AST-Analyse und Code-Injection. Der einzige Unterschied liegt in der Übersetzungserzeugung: Dort ersetzen Markierungen den LLM-Aufruf.
Übersetzungsserver#
Während der Entwicklung betreibt der Compiler einen lokalen Übersetzungsserver, der Übersetzungsanfragen bei Bedarf verarbeitet. Der Server startet automatisch, wenn Sie npm run dev ausführen.
So funktioniert's#
Der Übersetzungsserver lauscht auf einem lokalen Port und verarbeitet Übersetzungsanfragen aus der Dev-Build-Pipeline. Wenn eine neue oder geänderte Zeichenfolge erkannt wird, sendet der Compiler sie an den Server, der sie an den konfigurierten Übersetzungsanbieter (oder den Pseudotranslator) weiterleitet.
Port-Konfiguration#
Der Server sucht automatisch einen verfügbaren Port in einem konfigurierbaren Bereich:
{
dev: {
translationServerStartPort: 60000,
},
}| Option | Standard | Beschreibung |
|---|---|---|
translationServerStartPort | 60000 | Portnummer, bei der gestartet wird. Der Server versucht die Ports der Reihe nach (60000, 60001, ..., 60099), bis er einen freien findet. |
translationServerUrl | automatisch erkannt | Überschreibt die Server-URL vollständig. Praktisch, wenn Sie eine Verbindung zu einem entfernten Übersetzungsserver oder einem benutzerdefinierten Proxy herstellen möchten. |
Wenn alle Ports im Bereich 60000–60099 belegt sind, startet der Server nicht. Unter Fehlerbehebung erfahren Sie, wie Sie Portkonflikte lösen.
Dev-Widget (demnächst)#
Ein Übersetzungseditor im Browser, mit dem Sie Übersetzungen in Echtzeit anzeigen und bearbeiten können, während Sie durch Ihre App navigieren. Das Widget legt sich über Ihre UI und zeigt Übersetzungsdetails für jedes Textelement an.
Geplante Funktionen:
- Klicken Sie auf ein beliebiges Textelement, um Ausgangstext, Übersetzungen und Metadaten anzuzeigen
- Übersetzungen direkt im Browser bearbeiten
- Änderungen werden sofort in
.lingo/metadata.jsongespeichert - Zwischen Sprachen wechseln, ohne neu zu laden
Status
Das Dev-Widget befindet sich derzeit in Entwicklung und ist noch nicht verfügbar. Folgen Sie dem Changelog für Release-Updates.
Empfohlene Dev-Konfiguration#
Für die schnellste Entwicklung kombinieren Sie den Pseudotranslator mit den Standard-Einstellungen des Übersetzungsservers:
{
dev: {
usePseudotranslator: true,
translationServerStartPort: 60000,
},
}Wenn Sie bereit sind, echte Übersetzungen in der Vorschau zu sehen, deaktivieren Sie den Pseudotranslator und starten Sie den Dev-Server neu:
{
dev: {
usePseudotranslator: false,
},
}Der Compiler erzeugt dann echte Übersetzungen für neue oder geänderte Zeichenfolgen mithilfe Ihres konfigurierten translation provider.
