web-dev-qa-db-ja.com

ReactJS国際化対応のreact-intlとreact-i18next（i18n）

ReactJSを使用して多言語アプリケーションを構築する必要があります。アプリケーションには、さまざまな言語のカスタム辞書と、日付/時刻、数字、通貨の自動フォーマットが必要です。

私が見たすべてから、2つの非常に人気のあるライブラリがあります：

reac-intlおよびreact-i18next

相互の利点は何でしょうか？最もサポートされ人気のあるものは何ですか？

複数の言語をサポートするReactJSアプリケーションの一般的な選択は何ですか？

javascriptreactjsinternationalizationreact-intlreact-i18next
27
Mendes

@whypの応答は考慮されていません。react-i18nextはi18nextの一部であり、追加の2100スターがあります（背後に巨大な会社はありません）。

react-intlはかなり混乱する可能性があります（個人的な意見）。 i18nextは確かに統合が簡単で、より多くの機能（リソースのロード、ユーザー言語の検出）を提供します

i18nextは反応するだけではありません-どこでも使用できます（ https://www.i18next.com/supported-frameworks.html ）

i18nextにはサービスレイヤーとして追加機能があります。 http://locize.com/ 国際化（i18n）のほかにローカライズプロセスを解決します。

23
jamuhl

js-lingui

私が開発した代替i18nライブラリを提示したいと思います。

  • vanilla JS（_lingui-i18n_）とReact（_lingui-react_）の両方で動作します
  • _lingui-react_は、インラインコンポーネントと豊富な書式設定を完全にサポートする唯一のライブラリです（以下を参照）
  • ICU MessageFormatの上に構築
  • メッセージカタログを作成するためのCLI（_lingui-cli_）も含まれています
  • コンパイル時にフロータイプと多くの検証を使用して、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 docs のその他の例

React

_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 は_js-lingui_メインドキュメントの一部です。

インラインコンポーネントと豊富な書式

私はこのライブラリを書き始めました。a）より簡単な構文とb）インラインコンポーネントの完全なサポートが必要だからです。

_react-intl_と_react-i18next_の両方は、リッチテキストとインラインコンポーネントのサポートが非常に限られています。コンポーネント内で基本的なhtmlタグ（_This is <strong>bold</strong> text._）を使用するか、コンポーネントを変数として挿入する（_This is {el} text._ where _el = <strong>bold</strong>_）ことができます。

1番目のアプローチの問題は、カスタムReactコンポーネントを使用できないことです。2番目のアプローチの問題は、トランスレーターが1つではなく2つのメッセージを処理することです（_This is {el} text._およびbold）。コンテキストを維持するために文全体を翻訳する必要があるため、これは実際にはかなり悪いです。

_lingui-react_を使用すると、anyReact翻訳内のコンポーネントを使用でき、メッセージは1つの部分に抽出されます。

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

このソリューションのもう1つの利点は、抽出されたメッセージにコンポーネント名と小道具が隠れていることです。内側の要素のclassを変更した後にのみ、翻訳の更新に多くの時間を費やしたことを覚えています。

react-i18next または react-intl の補間と比較してください。

必要条件

_lingui-i18n_と_lingui-react_の両方には、すべてを機能させるためのプリセットが必要です。 _react-scripts_をイジェクトまたはフォークする必要があるため、Create React Appで使用する場合、これは問題です。

21
Tomáš Ehrlich

一般的な選択はreact-intlであり、react-i18nextよりも広く普及しています。現在、githubに4.5k対react-i18nextの300スターがあります。これは、Reactでローカライズするための重要なソリューションです。

始めるためのチュートリアルは次のとおりです。 https://medium.freecodecamp.com/internationalization-in-react-7264738274a

9
whyp

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ファイルで使用できます。

2
cwtuan