js-lingui

Question

我需要使用ReactJS构建多语言应用程序。该应用程序需要不同语言的自定义词典以及日期/时间，数字和货币的自动格式。

从我所看到的有两个非常受欢迎的图书馆：

reac-intl 和 react-i18next

彼此之间的优势是什么？什么是最受支持和最受欢迎的？

支持多种语言的ReactJS应用程序的一般选择是什么？

Answer 1

js-lingui

我想提供一个我开发的替代i18n库。

适用于Vanilla JS（lingui-i18n）和React（lingui-react）
lingui-react是唯一完全支持内联组件和丰富格式化的库（见下文）
构建于ICU MessageFormat之上
还包括用于构建消息目录的CLI（lingui-cli）
它在编译时使用Flow类型和大量验证来捕获MessageFormat中的明显错误

语法

ICU MessageFormat非常灵活，因为它支持变量，复数，序数，选项，数字/日期格式，并且也是可扩展的。但是，复杂的消息有点难以写入。

lingui-i18n使用ES6标记的模板文字提供方便的语法，而lingui-react使用React组件提供类似的语法

Vanilla 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

中的更多示例

阵营

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主要文档的一部分。

内联组件和丰富的格式

我开始编写这个lib，因为我想要a）更简单的语法和b）完全支持内联组件。

react-intl和react-i18next对富文本和内联组件的支持非常有限。您可以在组件（This is <strong>bold</strong> text.）中使用基本的html标记，也可以将组件作为变量注入（This is {el} text.，其中el = <strong>bold</strong>）。

第一种方法的问题是您无法使用自定义React组件。第二种方法的问题是翻译器使用2条消息而不是一条消息（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或react-intl中的插值进行比较。

要求

lingui-i18n和lingui-react都需要预设才能使一切正常。如果要将其与Create React App一起使用，则需要弹出或分叉react-scripts，这是一个问题。

Answer 2

一般选择是react-intl，它比react-i18next更受欢迎。它目前在github上有4.5k vs react-i18next的300颗星。它是React中本地化的首选解决方案。

这是一个入门教程： https://medium.freecodecamp.com/internationalization-in-react-7264738274a0

Answer 3

尝试由阿里巴巴集团开发的https://github.com/alibaba/react-intl-universal。 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文件中使用。

react-intl vs react-i18next用于ReactJS国际化（i18n）

3 个答案:

js-lingui

语法

Vanilla JS

阵营

内联组件和丰富的格式

要求