国际化和本地化您的应用程序,第2部分:Web Tooling

拍摄者费伦茨AlmasiUnsplash

在这一四部分教程中的第二部分中,了解如何选择具有传统HTML模板组件的现代Rept Web应用程序的正确工具。

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

Legacy Apps, Legacy Tools

意识到现有的Codebase技术的状态是挑选本地化产品的正确工具时的重要考虑因素。188bet金宝搏官网Okcupid是一个17岁的CodeBase,但令人耳目一新,这些天大多数应用程序都在一个页面的反应应用程序中。尽管如此,我们仍有一些顽固的挥之不去的遗产页面和我们支持的旧休息端点。因此,我们真的需要适合我们所需应用程序的模具的工具。

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

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

React App, React Tools

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

我们可以在本地化应用时执行一些重构来使用Lingui,然后利用将所有面向用户的消息提取到PO目录文件中所以他们可以发送给翻译。让我们来看看我们所看到的旧自定义代码的一个简单的例子,然后重构一下并分解Lingui如何帮助我们实现我们的目标:

旧代码需要一个好的ole'重构

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

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

lingui例!

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

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

这是正确的,并且为了示范的目的,有一个稍微不同的分量呈现较短的复数。当我们将消息发送到波兰语中的消息时,就会发生这种情况:

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

在他们的文档中概述了Lingui的许多其他巨大功能,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部分这里

188bet金宝搏官网OkCupid科技博客

从每天连接数百万人的工程团队阅读故事