在这四部分教程中的第二部分中，了解如何选择具有传统HTML模板组件的现代反应Web应用程序的正确工具。
查看本系列的第1部分这里。
遗留应用程序，遗留工具
对现有的Codebase技术状态的认识是挑选本地化产品的正确工具时的重要考虑因素。188bet金宝搏官网Okcupid是一个17岁的CodeBase，但令人耳目一新，这些天大多数应用程序都在一个单一的回归应用程序中。尽管如此，我们仍然有一些顽固的挥之不去的遗留遗留页面和我们支持的旧休息端点。因此，我们真的需要将适合我们所需应用程序的模具的工具。
对于我们更旧的基于模板的Web文件，REST API，由移动应用程序加载的Web视图以及一些旧的vanilla javascript文件，我们最终使用了自定义实现GetText.，一个成熟的GNU库，包括一套简单且强大的本地化实用程序，如关键字的搜索文件，并将其提取为目录格式文件类型中的消息便携式对象或po文件。从本质上讲，我们将更新这些旧文件要使用GetText.关键词，并将它们提取到PO目录，以提交转换员。
PO文件非常适合此目的，因为它们不仅支持翻译所需的典型键值对，还支持大量的可选元数据字段，如可以填充的注释，以帮助将翻译器更高的保真图片提供给给定的字符串的方式正在使用或应该被解释。它也值得注意的是一支球队Mozilla.已发布初始版本流利是一份非常灵活的信息语法，即我认为肯定需要考虑一些似乎有多少国际化问题似乎已经占据了蝙蝠。当它成熟时，我们肯定会留意它。
React App，React Tools
对于大量用户面向用户的前端Web代码，我们的单页React应用程序，我们最终决定了一个名为的工具lingui js.，一个小型香草javascript库，具有一些非常有趣的反应和babel绑定。它具有像可变插值，复数规则，与语法性别，日期/时间/数字格式化等的常规工具包，如可变插值，转换，以及更多。很高兴Lingui可以在反应和普通的OLE JavaScript的背景下使用，因为它意味着我们有灵活地利用Lingui，无论我们是否处于严格的反应上下文。但是，我们决定选择此工具的主要原因之一是其API和自动化功能如何靠近下降解决方案，因为我们将在当时提供我们的Codebase的状态。它还允许各种配置，其中一个配置包括使用具有编码中的消息的PO文件ICU消息格式，向我们提供PO文件的简单性和元数据以及ICU消息格式的添加功能，如语法性别和JSX类似的标记。
我们可以在我们本地化应用程序时执行一些重构以使用Lingui，然后利用lingui cli将所有面向用户的邮件提取到我们的PO目录文件中所以他们可以发送给翻译。让我们来看看我们所看到的旧自定义代码的一个简单的例子，然后重构一点并分解Lingui如何帮助我们实现我们的目标：
国际化这一组成部分有一些主要问题。首先，这是H2'内容使用自定义格式组件，它将将复杂值插入良好的字符串，但它不考虑多元化规则或语法性别规则。在第一句话中，{username}喜欢你！，有意大利人有类似的语言，其中句子的其余部分取决于性别用户名。在第二个例子中，我们总是展示这些词其他用户无论的价值如何Numberoflikes.。在英语中，这不会是正确的，因为值可能是1，然后消息应该是其他用户。那很好，只需检查价值Numberoflikes === 1然后展示不同的消息，对吗？嗯，没有......许多其他语言都有不同的多个规则，其中单词或短语基于是对象的值是否等于1，或2，或者5，或21 ......你得到了这个想法是每种语言的具体规则（以及关于语言具体规则属性， 如第一的那第二那第三， 等等）。
在那之上，vars.这里的定义是一个tad笨重，需要依赖于不是原生的占位符格式，这意味着想要使用它的开发人员需要了解它是如何专门的工作。让我们看看我们如何用Lingui处理这个问题：
这看起来更好，所以现在让我们来看看这些消息将在他们的目录中提取到他们的目录时。在这里，这msgid.是消息的id（在我们的案例中，源英语字符串），以及MSGSTR.是翻译版本（在这种情况下，它是英语，但如果这是翻译的，那将是文本的翻译版本）：
我们可以看到我们的选择和复数被释放到ICU消息格式的各个语法中，允许我们将这些字符串发送到转换器并允许它们正确地填充它们以不同的值，包括MSGSTR.包括翻译ICU复数沙选择s。但如果其他语言有不同的复数规则，那么MSGSTR.鉴于这些规则是否会改变？
这是正确的，并且为了示范的目的，有一个稍微不同的分量略微不同。当我们将消息发送到波兰语中的消息时会发生这样的东西：
这就是出古美的美丽。我们只需仅使用我们的源语言所需的复数形式来定义我们的组件，而Lingui的宏组件将处理其余部分。这些宏杠杆Babel Macros.钩住Babel以运行代码的编译时间转换。当我们提取消息时，宏将用于告诉Lingui，即应删除消息以及它应该包括的元数据。当我们编译时，宏将替换引用@ lingui /宏参考文献@ lingui /反应包装，其设有“真实”反应组件。这些是context.Consumer.Lingui的sI18NProvider.并且可以从活动目录中读取特定于区域设置的多个数据，并确切地了解如何对翻译或显而易举的消息。
有他们的文档中概述了许多其他伟大的特征那but there are far too many for me to cover entirely in this post, so I’ll leave the discussion of Lingui with the comment that it has been fairly ergonomic and has easily fit itself in many different situations in our ever-evolving React codebase, so it’s definitely worth consideration.
查看本系列的第3部分这里。
