js-lingui

Я хотел бы представить альтернативные библиотеки i18n, которые я разрабатываю.

• работает как с Vanilla JS (lingui-i18n), так и с React (lingui-react)
• lingui-react — единственная библиотека, которая полностью поддерживает встроенные компоненты и расширенное форматирование (см. ниже).
• строить поверх ICU MessageFormat
• включает также интерфейс командной строки (lingui-cli) для создания каталогов сообщений
• он использует типы Flow и много проверок во время компиляции, чтобы выявить очевидные ошибки в MessageFormat.

Синтаксис

ICU MessageFormat очень гибок, так как поддерживает переменные, множественное число, порядковые номера, варианты выбора, форматирование числа/даты, а также является расширяемым. Тем не менее, сложные сообщения немного сложны для написания.

lingui-i18n обеспечивает удобный синтаксис с использованием теговых литералов шаблонов ES6, а lingui-react предоставляет аналогичный синтаксис с использованием компонентов React.

Ванильный 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" })

Дополнительные примеры в документах lingui-i18n

Реагировать

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>
    )
  }
}

документы являются частью js-lingui основных документов.

Встроенные компоненты и расширенное форматирование

Я начал писать эту библиотеку, потому что хотел а) более простой синтаксис и б) полную поддержку встроенных компонентов.

И react-intl, и react-i18next имеют очень ограниченную поддержку расширенного текста и встроенных компонентов. Вы можете либо использовать базовые HTML-теги внутри компонентов (This is <strong>bold</strong> text.), либо вставлять компоненты как переменные (This is {el} text., где el = <strong>bold</strong>).

Проблема с первым подходом заключается в том, что вы не можете использовать пользовательские компоненты React. Проблема второго подхода в том, что переводчик работает с двумя сообщениями вместо одного (This is {el} text. и bold). На самом деле это довольно плохо, потому что вам нужно перевести все предложение целиком, чтобы сохранить контекст.

С помощью lingui-react вы можете использовать любые компоненты React внутри переводов, и сообщение извлекается как единое целое:

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

Еще одним преимуществом этого решения является то, что имя компонента и свойства скрыты в извлеченном сообщении. Я помню, как мы потратили много времени на обновление переводов только после того, как изменили class на внутреннем элементе.

Просто сравните это с интерполяцией в react-i18next или реакция-intl.

Требования

И lingui-i18n, и lingui-react требуют предварительных настроек, чтобы все работало. Это проблема, если вы хотите использовать его с приложением Create React, поскольку вам нужно либо извлечь, либо разветвить react-scripts.

Обычно выбирают react-intl, который более популярен, чем react-i18next. В настоящее время у него 4,5 тысячи звезд против 300 звезд react-i18next на github. Это идеальное решение для локализации в React.

Вот руководство для начала: https://medium.freecodecamp.com/internationalization-in-react-7264738274a0

Попробуйте https://github.com/alibaba/react-intl-universal, который разработана Alibaba Group. yahoo/react-intl можно применять только на уровне представления, таком как React.Component. Для файла Vanilla JS нет возможности интернационализировать его. Например, следующий фрагмент — это общий валидатор формы, используемый многими React.Component в наших приложениях.

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

alibaba/react-intl-universal — простой, но мощный инструмент. Это не меняет поведение компонентов. И может использоваться в JSX и обычном файле JS.