js-lingui

我想介绍我开发的另一个i18n库.

• 适用于香草JS(lingui-i18n)和react (lingui-react)
• lingui-react是唯一一个完全支持内联组件和丰富格式的库(见下文)
• 建立在ICU消息格式之上
• 还包括用于构建消息目录的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对富文本和内联组件的支持都非常有限.您可以在组件(This is <strong>bold</strong> text.)中使用基本html标记，也可以将组件作为变量(This is {el} text.其中el = <strong>bold</strong>)注入.

第一种方法的问题是不能使用定制的react 组件.第二种方法的问题是，译者处理的是两条消息，而不是一条(This is {el} text.和bold).这其实很糟糕，因为你需要翻译整个句子来保持上下文.

有了lingui-react，你可以在翻译中使用any个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都需要预设才能使一切正常.这是一个问题，如果你想使用它与创建react 应用程序，因为你需要要么弹出或叉react-scripts.