wake-up-neo.com

react-Intl vs. React-I18Nächste für die Internationalisierung von ReactJS (I18n)

Ich muss mit ReactJS eine mehrsprachige Anwendung erstellen. Die Anwendung benötigt ein benutzerdefiniertes Wörterbuch für verschiedene Sprachen sowie eine automatische Formatierung von Datum/Uhrzeit, Zahlen und Währung.

Von allem, was ich gesehen habe, gibt es zwei sehr beliebte Bibliotheken:

reac-intl und reag-i18next

Was wären die Vorteile zwischen einander und was ist der am meisten unterstützte und beliebteste?

Was ist die allgemeine Wahl für eine ReactJS-Anwendung, die mehrere Sprachen unterstützt?

17
Mendes

@ whyps Antwort berücksichtigt nicht, dass reave-i18next Teil von i18next ist, der zusätzliche 2100 Sterne hat (ohne ein großes Unternehmen im Hintergrund).

es kann ziemlich verwirrend sein (persönliche Meinung). i18next ist sicher einfacher zu integrieren und bietet mehr Funktionen (Laden von Ressourcen, Erkennen der Benutzersprache).

i18next reagiert nicht nur - lerne einmal, nutze sie überall ( https://www.i18next.com/supported-frameworks.html )

i18next hat eine zusätzliche Serviceebene: http://locize.com/ Lösen des Lokalisierungsprozesses neben der Internationalisierung (i18n)

18
jamuhl

js-lingui

Ich möchte eine alternative i18n-Bibliothek vorstellen, die ich entwickle.

  • arbeitet sowohl mit Vanilla JS (lingui-i18n) als auch mit React (lingui-react)
  • lingui-react ist die einzige Bibliothek, die Inline-Komponenten und umfangreiche Formatierungen vollständig unterstützt (siehe unten).
  • bauen Sie auf ICU MessageFormat auf
  • enthält auch CLI (lingui-cli) zum Erstellen von Nachrichtenkatalogen
  • es verwendet Flow-Typen und viel Validierung während der Kompilierzeit, um offensichtliche Fehler in MessageFormat aufzufangen

Syntax

ICU MessageFormat ist sehr flexibel, da es Variablen, Pluralformen, Ordinalzahlen, Auswahlmöglichkeiten, Zahlen-/Datumsformatierungen unterstützt und außerdem erweiterbar ist. Komplexe Nachrichten sind jedoch etwas schwer zu schreiben.

lingui-i18n bietet eine bequeme Syntax unter Verwendung von mit ES6 gekennzeichneten Vorlagenliteralen, während lingui-react eine ähnliche Syntax unter Verwendung von React Components bietet

Vanille JS

import { i18n } from 'lingui-i18n'

i18n.t`Hello World`
i18n.t`Hello, my name is ${name}`
i18n.plural({ value: count, one: "# book", other: "# books" })

Weitere Beispiele in lingui-i18n docs

Reagieren

import React from 'react'
import { Trans, Plural } from 'lingui-react'

class App extends React.Component {
  render() {
    const name = "Fred"
    const count = 42

    return (
      <div>
      // Static text
      <Trans>January</Trans>

      // Variables
      <Trans>Hello, my name is {name}</Trans>

      // Components
      <Trans>See the <a href="/more">description</a> below.</Trans>

      // Plurals
      <Plural 
        value={count} 
        zero={<strong>No books</strong>}
        one="# book" 
        other="# books" 
      />
      </div>
    )
  }
}

docs sind Bestandteil von js-lingui-Hauptdokumenten.

Inline-Komponenten und umfangreiche Formatierung

Ich habe angefangen, diese Bibliothek zu schreiben, weil ich a) eine einfachere Syntax und b) volle Unterstützung für Inline-Komponenten wollte.

Sowohl react-intl als auch react-i18next unterstützen Rich Text und Inline-Komponenten nur eingeschränkt. Sie können entweder grundlegende HTML-Tags in Komponenten (This is <strong>bold</strong> text.) verwenden oder Komponenten als Variablen einfügen (This is {el} text., wobei el = <strong>bold</strong>).

Das Problem beim ersten Ansatz ist, dass Sie keine benutzerdefinierten React-Komponenten verwenden können. Das Problem bei der zweiten Vorgehensweise besteht darin, dass der Übersetzer mit zwei statt einer Nachricht arbeitet (This is {el} text. und bold). Das ist eigentlich ziemlich schlecht, weil Sie den ganzen Satz übersetzen müssen, um den Kontext zu erhalten.

Mit lingui-react können Sie any React-Komponenten in Übersetzungen verwenden und die Nachricht wird in einem Stück extrahiert:

<Trans>See the <Link to="/more">description</Link> below.</Trans>
// for translator: See the <0>description</0> below.

Ein weiterer Vorteil dieser Lösung besteht darin, dass Komponentenname und Requisiten in der extrahierten Nachricht verborgen sind. Ich erinnere mich, dass wir erst nach dem Ändern von class am inneren Element viel Zeit damit verbracht haben, Übersetzungen zu aktualisieren.

Vergleiche es einfach mit der Interpolation in reag-i18next oder reag-intl .

Bedarf

Sowohl lingui-i18n als auch lingui-react erfordern Voreinstellungen, damit alles funktioniert. Dies ist ein Problem, wenn Sie es mit Create React App verwenden möchten, da Sie react-scripts entweder auswerfen oder verzweigen müssen.

16
Tomáš Ehrlich

Die generelle Wahl ist React-Intl, die weitaus beliebter ist als React-I18next. Gegenwärtig gibt es 4,5 Sterne im Vergleich zu den 300 Sternen von reag-i18next auf github . Dies ist die Lösung für die Lokalisierung in React.

Hier ist ein Tutorial für den Einstieg: https://medium.freecodecamp.com/internationalization-in-react-7264738274a0

9
whyp

Versuchen Sie https://github.com/alibaba/react-intl-universal - das von der Alibaba Group entwickelt wurde Yahoo/reag-intl kann nur in Ansichtsschichten wie React.Component angewendet werden. Für die Vanilla JS-Datei gibt es keine Möglichkeit, sie zu internationalisieren. Das folgende Snippet ist beispielsweise ein allgemeiner Formularprüfer, der von vielen React.Component in unseren Apps verwendet wird.

export default const rules = {
  noSpace(value) {
    if (value.includes(' ')) {
      return 'Space is not allowed.';
    }
  }
};

alibaba/reag-intl-universal ist einfach, aber mächtig. Das Verhalten der Komponenten wird nicht geändert. Und kann in JSX und normalen JS-Dateien verwendet werden.

1
cwtuan