Hallo allerseits!
Es sind nur noch wenige Tage bis zum neuen Jahr. Ich bin auf meine Liste von Fällen gestoßen, die ich 2019 bearbeiten wollte, darunter stellte sich heraus, dass ich einen Artikel über Habr schrieb. Es ist Zeit, sich in das abgehende Auto zu setzen.
Ich werde sofort eine Reservierung vornehmen, PR my bike. Wenn dir das nicht gefällt, kannst du den Artikel ohne Bedenken überspringen.
Was ist Lokalisierung?
Unter Lokalisierung wird im Folgenden der Prozess der Anpassung einer Anwendung an verschiedene Sprachen und Regionen verstanden. Bei der Lokalisierung geht es nicht nur um die Übersetzung von Text. Es ist für Benutzer angenehmer, das übliche Format von Datumsangaben, Geldwerten und sogar Trennzeichen in Zahlen zu sehen, die eine Rolle spielen können.
Motivation
Warum müssen Sie eigentlich die Anwendung lokalisieren? Die Lokalisierung der Anwendung ist die berüchtigte Erhöhung der Verfügbarkeit Ihrer Benutzeroberfläche für Benutzer, über die in letzter Zeit häufig gesprochen wurde. Die Lokalisierung erweitert die Zielgruppe, für die Ihre Anwendung bestimmt ist.
Was ich von der Lokalisierungsbibliothek wollte
- ICU Grammatikunterstützung
- Datumsformatierung
- Zahlenformatierung
Was ist passiert?
Link zu GitHub .
Die populärste Bibliothek (gemäß der Sternchenanalyse) für die Lokalisierung der Reaktion der Anwendung von React wurde als Grundlage genommen. Unter der Haube verwendet react-intl das Paket intl-messageformat-parser, das den AST-Baum erstellt. Laut Bundlephobie nimmt der Parser eine signifikante Größe an. Es wird nicht von Hand geschrieben, sondern verwendet PEG.js. Ich habe meine eigene für diese Zwecke geschrieben, die 6-mal weniger wiegt. Es ist sehr wahrscheinlich, dass ich einen Fall verpassen könnte. Ich bin dankbar, wenn mir jemand davon erzählt.
Dank der hervorragenden Unterstützung der Internationalisierungs-API durch moderne Browser wird die Formatierung von Datums- und Zahlenangaben von selbst gelöst. Alles, was benötigt wird, ist, die aktuelle Sprache des Benutzers irgendwo zu speichern, um sie auf die Formatierung anzuwenden und eine komfortablere API in Form von formatSomething(value, options) .
Somit war das Paket @ eo-locale / core, das im Allgemeinen nicht an ein Framework oder eine Bibliothek gebunden ist und recht flexibel verwendet werden kann.
Reagiere
Die React-Version ist eine Sammlung von Komponenten und Hooks.
Um eo-locale die Anwendung in Provider ein.
import { EOLocale } from 'eo-locale'; const locales = [ { language: 'en', messages: { hello: 'Hello {name}!' } }, ]; <EOLocale.Provider language="en" locales={locales}> <span> <EOLocale.Text id="hello" name="World" /> // Helo World! </span> </EOLocale.Provider>
Die Zahlenformatierung ist über die Standardeigenschaften von Intl.NumberFormat möglich
import { EOLocale } from 'eo-locale'; <EOLocale.Number value={1000} /> // 1,000 <EOLocale.Number value={1000} currency="EUR" maximumFractionDigits={2} minimumFractionDigits={2} style="currency" /> // €1,000.00
Die Formatierung von Datumsangaben ist ähnlich implementiert:
import { EOLocale } from 'eo-locale'; <EOLocale.Date value={new Date(2019, 2, 19)} /> // 3/19/2019 <EOLocale.Date value={new Date(2019, 2, 19)} day="numeric" month="long" year="numeric" weekday="long" /> // Tuesday, March 19, 2019
Alle oben genannten useTranslator können auch nicht über die Komponenten, sondern mit dem useTranslator Hook ausgeführt werden:
import { useTranslator } from 'eo-locale'; function SomeComponent() { const translator = useTranslator(); return <div>{translator.formatNumber(1000)}</div>; }
Einer der wichtigsten Vorteile gegenüber ähnlichen Bibliotheken ist die Möglichkeit, Komponenten als Requisiten zu verwenden. Sie haben beispielsweise eine stilisierte Money Komponente, die den Wert in einer Farbe und das Währungszeichen in einer anderen Farbe anzeigt, und Sie müssen einen bestimmten Betrag in das Gebietsschema eingeben:
import { EOLocale } from 'eo-locale'; import { Money } from '...somewhere'; const locales = [ { language: 'en', messages: { total: 'Total price is {price}' } }, ]; <EOLocale.Text id="total" price={<Money amount={1000} />} /> // Total price is €1,000.00
Es besteht auch die Möglichkeit, mehrere Werte anzuzeigen. Es wird mit Intl.PluralRules implementiert.
import { EOLocale } from 'eo-locale'; const locales = [ { language: 'en', messages: { items: '{count, plural, one {You have one item} other {You have {count} items}}' } }, ]; <EOLocale.Text id="items" count={3} /> // You have 3 items
Preact
Dieselben Funktionen sind für Preact im entsprechenden Paket implementiert.
Einige Funktionen
Die Bibliothek ist vollständig in Typescript geschrieben.
Vor nicht allzu langer Zeit ist das Problem aufgetreten, dass beim Lokalisieren der vom Server gesendeten Fehlercodes keine Übersetzungen auf dem Client vorhanden waren. Zu diesem Zweck wurde dem Provider die Möglichkeit hinzugefügt, auf den IDMissing-Handler zuzugreifen, mit dem Sie diese Art von Fehler protokollieren können.
Fazit
Ich hoffe wirklich, dass jemand die Bibliothek nützlich findet. Ich freue mich auf Anregungen und gesunde Kritik. Vergessen Sie nicht, dass sich diese Situation im Laufe der Zeit ändern kann, auch wenn sich Ihre Website jetzt nur auf eine Sprache konzentriert. Die Unterstützung der Mehrsprachigkeit im Voraus festzulegen, erfordert nicht viel Zeit, und alle in der Anwendung verwendeten Texte werden strukturiert.