js-语言

我想介绍一个我开发的替代 i18n 库。

• 适用于 Vanilla JS ( lingui-i18n) 和 React ( lingui-react)
• lingui-react 是唯一完全支持内联组件和丰富格式的库（见下文）
• 建立在 ICU MessageFormat 之上
• 还包括lingui-cli用于构建消息目录的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 文档中的更多示例

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

文档是js-lingui主要文档的一部分。

内联组件和丰富的格式

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

双方react-intl并react-i18next已非常有限，丰富的文字和内嵌组件的支持。您可以在组件 ( This is <strong>bold</strong> text.) 中使用基本的 html 标签，也可以将组件作为变量 ( This is {el} text.where 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.

此解决方案的另一个优点是组件名称和props隐藏在提取的消息中。我记得我们是如何class在内部元素上进行更改后才花费大量时间更新翻译的。

只需将其与react-i18next或react-intl 中的插值进行比较。

要求

双方lingui-i18n并lingui-react需要预设，使一切工作。如果您想将它与 Create React App 一起使用，这是一个问题，因为您需要 exit 或 fork react-scripts。

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

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

尝试由阿里巴巴集团开发的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 文件中使用。