在这四部分教程的第二部分，学习如何选择正确的工具，以支持现代React web应用与传统的HTML模板组件。

请参阅本系列的第1部分在这里．

Legacy Apps, Legacy Tools

在选择正确的本地化工具时，了解现有代码库技术的状态是一个重要的考虑因素。188bet金宝搏官网OkCupid是一个有17年历史的代码库，但令人耳目一新的是，我们的大多数应用程序现在都是一个单一的页面React应用程序。尽管如此，我们仍然支持一些顽固的遗留页面和较老的REST端点。因此，我们确实需要能够满足应用程序需求的工具。

对于我们的旧代码库，这些代码库包含了旧的基于模板的web文件、REST API、移动应用程序加载的web视图，以及一些旧的普通javascript文件，我们最终使用了自定义实现gettext，这是一个成熟的GNU库，包括一套简单而健壮的本地化实用程序，例如搜索关键字文件，并以目录格式文件类型将它们提取为消息可移植对象，或PO文件。基本上，我们将更新这些旧文件gettext关键字，并将其提取到PO目录以提交给翻译人员。

为此PO文件是伟大的,因为他们不仅支持翻译所需的典型的键-值对,但也支持大量的可选的元数据字段,如评论可以填充帮助译者更高的保真度图片如何使用给定字符串或应该被解释。同样值得注意的是，一个团队Mozilla已经发布了第一版的流利的，是一种非常灵活的本地化消息语法，考虑到它似乎能立即解决许多国际化问题，我认为这确实值得考虑。随着它的成熟，我们一定会密切关注。

React App, React Tools

对于大部分面向用户的前端网页代码，我们的React应用，我们最终决定使用一个叫做麟贵JS，一个小型的普通JavaScript库，带有一些非常有趣的React和Babel绑定。它有一个通用的国际化解决方案工具包，如变量插值、复数规则、语法性别翻译、日期/时间/数字格式等等。很高兴Lingui可以同时用于React和普通JavaScript的上下文中，因为这意味着无论我们是否处于严格的React上下文中，我们都可以灵活地利用Lingui。然而，我们决定选择这个工具的一个主要原因是，它的API和自动化能力与我们当时代码库的状态非常接近。它还允许各种配置，其中之一包括使用PO文件和编码在ICU消息格式，为我们提供了PO文件的简单性和元数据，以及来自ICU消息格式的添加功能，如语法性别和类似jsx的标记化。

我们可以在本地化应用时执行一些重构来使用Lingui，然后利用将所有面向用户的消息提取到PO目录文件中这样就可以交给翻译了。让我们看看一个简单的例子，看看我们原来的自定义代码是什么样子的，然后再进行一些重构，分析一下Lingui是如何帮助我们实现目标的:

在国际化该组件时存在几个主要问题。首先,h2的内容使用了一个自定义格式组件，它将复杂的值插入到字符串中，这很好，但它没有考虑复数规则或语法性别规则。在第一个短语中，{username}喜欢你!在美国，有些语言，比如意大利语，句子其余部分的翻译取决于性别用户名．在第二个例子中，我们总是显示单词其他用户不管价值如何numberOfLikes．在英语中，这是不正确的，因为值可以是1，而消息应该是1其他用户．很好，只要检查一下numberOfLikes = = = 1然后显示不同的消息，对吧?哦,不…许多其他语言有不同的复数规则，在这些规则中，单词或短语的变化取决于主语的值是等于1，还是2，还是5，还是21……你应该知道，每种语言中都有特定的规则(以及关于ordinality,如第一个，第二个，第三等等)。

最重要的是var这里的定义有点笨拙，需要依赖于不是React原生的占位符格式，这意味着想要使用它的开发人员需要了解它具体是如何工作的。让我们看看如何处理Lingui:

这样看起来好多了，现在让我们看看当这些消息被提取到我们的目录中时，它们将提取到什么。在这里,是否是消息的ID(在本例中是源英文字符串)，而msgstr是翻译的版本(在本例中，它是英语，但如果这是翻译，它将是文本的翻译版本):

我们可以看到选择和复数被拉出到ICU消息格式中各自的语法中，允许我们将这些字符串发送给翻译人员，并允许他们正确地用不同的值填充它们，包括msgstr包括翻译的ICU复数年代和选择但如果其他语言有不同的复数规则，则msgstr这些规则会改变吗，不会?

这是正确的，为了演示，假设有一个稍微不同的组件呈现较短的复数形式。当我们把我们的信息翻译成波兰语时，就会发生这样的事情:

这就是林桂之美发挥作用的地方。我们可以简单地使用源语言所需的复数形式定义组件，其余的由Lingui的宏组件处理。这些宏杠杆巴别塔的宏连接到Babel以运行代码的编译时转换。当我们提取消息时，这些宏用于告诉Lingui应该提取一条消息以及它应该包含哪些元数据。在编译时，宏将替换from的引用@lingui /宏引用@lingui /反应包中包含“真正的”React组件。这些都是上下文。消费者麟贵的年代I18nProvider并且可以从活动目录中读取特定于区域设置的复数数据，并确切地知道如何对已翻译的消息进行复数化或性别化。

有他们的文档中列出了Lingui的许多其他伟大特性,但是有太多对我来说完全覆盖在这篇文章中,我将离开麟贵的讨论与评论,它已经相当人体工程学,容易适应本身在许多不同的情况下在我们的不断变化的反应的代码库,这是绝对值得考虑。

请参阅本系列的第3部分在这里．