javascript程序

by Anastasia

由Anastasia

如何选择用于翻译JavaScript应用程序的库 (How to choose a library for translating your JavaScript apps)

In the previous articles, we have seen how to perform localization on the back-end. Specifically, we’ve covered Rails and Phoenix frameworks. Today, however, we are going to talk about libraries for translating JavaScript apps and briefly see them in action.

在前面的文章中，我们已经看到了如何在后端执行本地化。 具体来说，我们已经介绍了Rails和Phoenix框架。 但是，今天，我们将讨论用于翻译JavaScript应用程序的库，并简要地介绍它们的实际作用。

It appears that there are quite a lot of available solutions, so you may ask: “Which one should I use?”. The most obvious (and perhaps the sanest) answer would be: “It depends”. Ideally, you should check each library and then decide which one you prefer.

似乎有很多可用的解决方案，因此您可能会问：“我应该使用哪个？”。 最明显(也许最明智)的答案是：“取决于”。 理想情况下，您应该检查每个库，然后决定要使用哪个库。

Therefore, in this article I will give you a general introduction to the following solutions:

因此，在本文中，我将为您提供以下解决方案的一般介绍：

• Globalize
  全球化
• I18next
  I18next
• jQuery.I18n
  jQuery.I18n
• Polyglot.js
  Polyglot.js

Note that we will be talking about localizing vanilla JS apps, not about some specific client-side framework. Also, we won’t dive deep into each library because the article would become much, much longer. I’ll only give you a gentle introduction to each tool. Then we’ll try to compare them and come to some general conclusion.

请注意，我们将谈论的是本地化JS应用的本地化，而不是某些特定的客户端框架。 另外，我们不会深入研究每个库，因为这篇文章将变得越来越长。 我只会为您简要介绍每种工具。 然后，我们将尝试比较它们并得出一些一般性结论。

Shall we start?

我们可以开始了吗？

全球化 (Globalize)

Globalize is a complex translation and localization JS library initially introduced by jQuery team. This library utilizes Unicode common locale data repository (CLDR) and has lots of features including:

Globalize是一个复杂的翻译和本地化JS库，最初由jQuery团队引入。 该库利用Unicode公共区域数据存储库 (CLDR)，并具有许多功能，包括：

• Message formatting
  讯息格式
• Date/time parsing and the ability to work with relative time
  日期/时间解析以及使用相对时间的能力
• Pluralization support
  多元化支持
• Numbers parsing and currency formatting
  数字解析和货币格式
• Ability to work with units (days, minutes, seconds, miles per hour etc)
  能够处理单位(天，分钟，秒，每小时英里等)

Globalize works consistently in browser and NodeJS, has a modular code and allows to require as little modules as needed. While relying on CLDR data, it does not host or hardcode it directly. Developers may choose which data to load. This also means that you can update CLDR data yourself, without waiting for a new version of Globalize to be released. You may read a bit more about Globalize’s features here.

Globalize在浏览器和NodeJS中可始终如一地工作，具有模块化代码，并允许只需要很少的模块。 在依靠CLDR数据时，它不会直接托管或对其进行硬编码。 开发人员可以选择要加载的数据。 这也意味着您可以自己更新CLDR数据，而无需等待发布新版本的Globalize。 您可以在这里阅读更多有关Globalize功能的信息。

Now let’s see this library in action. There is a Getting started guide that explains how to install all the required modules on your machine using a package manager. However, we’ll choose a more complex way of loading everything manually.

现在，让我们看看这个库的运行情况。 有一个入门指南 ，介绍了如何使用程序包管理器在计算机上安装所有必需的模块。 但是，我们将选择一种更复杂的方式来手动加载所有内容。

获取CLDR数据 (Getting CLDR Data)

CLDR is really huge and so there is no reason to download all its content. Luckily, Globalize documentation summarizes what you have to load when using specific modules. Also, there is an online tool where you just pick the modules that will be used and then see what JSON files you need to load. In this demo, I’ll only use “core”, “message”, and “plural” modules, therefore, we require the following files:

CLDR确实非常庞大，因此没有理由下载其所有内容。 幸运的是，Globalize文档总结了使用特定模块时必须加载的内容 。 此外，还有一个在线工具 ，您可以在其中选择将要使用的模块，然后查看需要加载哪些JSON文件。 在此演示中，我将仅使用“核心”，“消息”和“多个”模块，因此，我们需要以下文件：

To learn more about how CLDR is organized, refer to this doc. It may seem complex at first but in reality, things are quite simple: you just cherry-pick the required files, download them and use in your project.

要了解有关CLDR的组织方式的更多信息， 请参阅此文档 。 乍一看似乎很复杂，但实际上，事情很简单：您只需要挑选所需的文件，下载并在项目中使用即可。

I’ve placed the files mentioned above to the cldr/supplemental folder of my project but you may organize them differently of course.

我已经将上面提到的文件放置到项目的cldr/supplemental文件夹中，但是您当然可以对它们进行不同的组织。

The next question is: how do we actually load this data? Well, there are two alternatives: by embedding it inside the Globalize.load function or by using an asynchronous $.get() method. The second option is much more robust, so let’s create a new JS file with the following content:

下一个问题是：我们如何实际加载此数据？ 嗯， 有两种选择 ：通过将其嵌入Globalize.load函数中或使用异步$.get()方法 。 第二个选项更加健壮，因此让我们创建一个具有以下内容的新JS文件：

// i18n.js $.when( $.get("cldr/supplemental/likelySubtags.json"), $.get("cldr/supplemental/ordinals.json"), $.get("cldr/supplemental/plurals.json"), ).then(function() { // Normalize $.get results, we only need the JSON, not the request statuses. return [].slice.apply(arguments, [0]).map(function(result) { return result[0]; }); }).then(Globalize.load).then(function() { // your Globalize code here });

In this example, we’re loading JSON data and feed it to Globalize. We’re using promises, so the custom code should be placed into the second then and will be executed as soon as everything is loaded successfully. Feel free to refactor this code without using jQuery.

在此示例中，我们正在加载JSON数据并将其提供给Globalize。 我们使用的承诺，因此自定义代码应该放到第二then和一切都加载成功会立即执行。 无需使用jQuery即可随意重构此代码。

加载其他文件 (Loading Other Files)

After loading CLDR JSON files, you require a bunch of other scripts:

加载CLDR JSON文件后，您需要使用其他脚本 ：

• jQuery (note by the way that Globalize itself is not jQuery-based)
  jQuery(顺便说一下，Globalize本身不是基于jQuery的)

• CLDR JS

  CLDR JS

• Globalize JS core module
  全球化JS核心模块
• Any other modules that you wish to use in your app
  您希望在应用程序中使用的任何其他模块

jQuery and Cldr.js are external dependencies and you may load them from a CDN (for example, from cdnjs.com).

jQuery和Cldr.js是外部依赖项，您可以从CDN加载它们(例如，从cdnjs.com )。

Then download Globalize from the Releases section. Open the dist folder. Pick all the files that you require and place them under the globalize directory.

然后从“发行”部分下载“全球化”。 打开dist文件夹。 选择所需的所有文件，并将它们放在globalize目录下。

After that load all the scripts in the proper order:

之后，以正确的顺序加载所有脚本：

<!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.1/cldr.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.1/cldr/event.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.1/cldr/supplemental.min.js"></script> <script src="globalize/globalize.js"></script> <script src="globalize/plural.js"></script> <script src="globalize/message.js"></script> <script src="i18n.js"></script> </body> </html>

All in all, this is it. Now you may refer to the API section of the Globalize docs and see what functions you may utilize.

总而言之，就是这样。 现在，您可以参考Globalize文档的API部分 ，并查看可以使用的功能。

使用它 (Using It)

You can provide translation messages with the help of loadMessages function:

您可以借助loadMessages 函数提供翻译消息：

$.when( // ... }).then(Globalize.load).then(function() { Globalize.loadMessages({ "en": { 'welcome': 'Welcome, {name}!' } }); });

Then instantiate Globalize with the desired locale and perform the actual translations:

然后使用所需的语言环境实例化Globalize并执行实际的翻译：

// loadMessages... var globalize = new Globalize("en"); console.log(globalize.messageFormatter('welcome')({name: 'Username'}));

messageFormatter returns a formatted translation. As you can see from this example, it supports interpolation, but there is more. Want to introduce pluralization? Simple!

messageFormatter返回格式化的转换。 从该示例可以看到，它支持插值，但还有更多。 要引入多元化吗？ 简单！

Add a new message:

添加新消息：

Globalize.loadMessages({ "en": { 'welcome': 'Welcome, {name}!', 'messages': [ "You have {count, plural,", " one {one message}", " other {{count} messages}", "}" ] } });

Note that the message may span multiple lines but in this case, it should be defined as an array. Here we are utilizing pluralization and providing two forms: singular and plural. count is an interpolation.

请注意，该消息可能会跨越多行，但在这种情况下，应将其定义为数组。 在这里，我们利用复数并提供两种形式：单数和复数。 count是一个插值。

Now display this message:

现在显示此消息：

taskFormatter = globalize.messageFormatter("messages"); console.log(taskFormatter({ count: 10 }));

You may utilize other modules in pretty much the same way.

您可以以几乎相同的方式利用其他模块。

To summarize, Globalize is a great powerful solution with good documentation and nice support. It may require some time to set it up but working with it is convenient and intuitive.

总而言之，Globalize是一个功能强大的解决方案，具有良好的文档和良好的支持。 设置它可能需要一些时间，但是使用起来很方便且直观。

I18next (I18next)

I18next is a JavaScript localization framework providing all the necessary tools to translate your applications. It has loads of various features including:

I18next是一个JavaScript本地化框架，提供了翻译应用程序所需的所有必要工具。 它具有各种功能，包括：

• Support for front-end frameworks including React, Angular, Vue etc

  支持前端框架，包括React，Angular，Vue等

• Supports for various formats (including Polyglot which we’ll discuss later)
  支持多种格式(包括稍后将讨论的Polyglot)
• Message formatting
  讯息格式
• Pluralization
  多元化
• Fallbacks
  后备
• Ability to load translation data from various resources
  能够从各种资源加载翻译数据

• …and many, many other utilities and plugins

  …以及许多其他实用程序和插件

加载所需文件 (Loading Required Files)

To get started with I18next you may simply require it from CDN, for example:

要开始使用I18next，您可以简单地从CDN要求它，例如：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/14.0.1/i18next.min.js"></script> </body> </html>

Of course, it can be also installed with NPM or Yarn as explained here.

当然，它也可以与NPM或纱线安装为解释在这里 。

组态 (Configuration)

As I already mentioned above, I18next allows you to load translations from the backend. You may also provide them in the following way:

如前所述，I18next允许您从后端加载翻译。 您也可以通过以下方式提供它们：

i18next.init({ lng: 'en', resources: { en: { translation: { "hi": "Welcome" } } } }).then(function(t) { // ready to go! });

Note that I am also setting English as a default locale.

请注意，我还将英语设置为默认语言环境。

There are many other configuration options that are listed on the corresponding page.

相应页面上列出了许多其他配置选项。

使用它 (Using It)

You may perform translations in the following way:

您可以通过以下方式执行翻译：

// ... init .then(function(t) { // initialized and ready to go! console.log(i18next.t('hi')); });

t is a function to look up translation based on the provided key. It can also work with interpolation, for instance:

t 是根据提供的键查找翻译的功能 。 它也可以与插值一起使用，例如：

i18next.t('hi', {name: 'Username'});

Pluralization is supported too. To start using it, define singular and plural forms in the following way:

也支持多元化 。 要开始使用它，请按以下方式定义单数和复数形式：

{ "msg": "one message", "msg_plural": "{{count}} messages" }

Note the _plural part that has to be provided for plural forms. Some languages require multiple forms. In this case use _0, _1, and other post-fixes, for example:

注意必须为多种形式提供的_plural部分。 有些语言需要多种形式 。 在这种情况下，请使用_0 ， _1和其他_1 ，例如：

{ "key_0": "zero", "key_1": "singular", "key_2": "two", "key_3": "few", "key_4": "many", "key_5": "other" }

Then just use the t function again:

然后再次使用t函数：

i18next.t('msg', {count: 10});

I18next allows you to provide context for the translation. This is particularly important when working with gender information:

I18next允许您提供翻译的上下文 。 在处理性别信息时，这尤其重要：

{ "friend": "A friend", "friend_male": "A boyfriend", "friend_female": "A girlfriend" }

_male and _female here are contexts that you can set in the following way:

_male和_female是可以通过以下方式设置的上下文：

i18next.t('friend'); // ==> No context here, so return "A friend" i18next.t('friend', { context: 'male' }); // -> A context is present, so return "A boyfriend"

Don’t hesitate to browse other examples in the I18next’s docs on how to enable nesting in translations, work with objects, or setup fallbacks.

不要犹豫地浏览I18next文档中的其他示例，以了解如何在翻译中启用嵌套 ， 使用对象或设置备用 。

To summarize, I18next is a great framework with an array of various plugins and utilities. This framework is quite large and heavy, but you receive all the necessary localization tools that can be extended as necessary. Moreover, setting this framework up is simple and requires very little time. So, I would say this is a great candidate for complex applications!

总而言之，I18next是一个很棒的框架，其中包含各种插件和实用程序。 这个框架既庞大又沉重，但是您会收到所有必要的本地化工具，这些工具可以根据需要进行扩展。 此外，设置此框架非常简单，所需时间很少。 因此，我想说这是复杂应用程序的理想之选！

jQuery.I18n (jQuery.I18n)

jQuery.I18n is yet another popular solution presented to you by Wikimedia Engineering team allowing to translate your JavaScript applications. Wikimedia, in turn, is a company behind Wikipedia project, one of the most popular websites in the world. jQuery.I18n is used in Wikipedia internally, so you can be sure this library won’t be abandoned out of the blue. It utilizes a JSON-based localization format and supports the following features:

jQuery.I18n是Wikimedia工程团队提供给您的另一个流行的解决方案，它可以翻译您JavaScript应用程序。 反过来，Wikimedia是Wikipedia项目 (世界上最受欢迎的网站之一)的幕后公司。 jQuery.I18n在内部用于Wikipedia，因此您可以确保不会突然放弃该库。 它使用基于JSON的本地化格式，并支持以下功能 ：

• Ability to meta information and document your messages
  具备中继信息和记录信息的能力
• Supports pluralization with the help of CLDR
  在CLDR的支持下支持多元化
• Gender information
  性别资讯
• Support for grammar forms
  支持语法形式
• Fallback chains
  后备链
• Ability to customize message parser
  自定义消息解析器的能力
• Has modular code
  有模块化代码

Let’s see jQuery.I18n in action now.

让我们看看现在正在运行的jQuery.I18n。

加载所需文件 (Loading Required Files)

First of all, download the library itself and initialize its dependencies:

首先，下载库本身并初始化其依赖项：

$ git clone https://github.com/wikimedia/jquery.i18n.git $ cd jquery.i18n $ git submodule update --init

jquery.i18n/src folder contains the library’s files. Pick the modules that you need (at the very least, you’ll require the core jquery.i18n.js) and place them to your application. The idea here is similar to the one in Globalize. The languages folder contains some helpers for various locales. If you are supporting one of these, don’t forget to copy the corresponding file as well.

jquery.i18n/src文件夹包含该库的文件。 选择所需的模块(至少，您将需要核心jquery.i18n.js )并将其放置到应用程序中。 这里的想法类似于全球化中的想法。 languages文件夹包含一些针对各种语言环境的帮助程序。 如果您支持其中一种，请不要忘记也复制相应的文件。

If your application works with plural forms, then the CLDRPluralRuleParser.js file is necessary too (it can be found under the jquery.i18n\libs\CLDRPluralRuleParser\src path).

如果您的应用程序使用复数形式，那么CLDRPluralRuleParser.js文件也是必要的(可以在jquery.i18n\libs\CLDRPluralRuleParser\src路径下找到)。

After you are ready, load the files in the proper order, for example:

准备就绪后，以正确的顺序加载文件，例如：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="lib/CLDRPluralRuleParser.js"></script> <script src="lib/jquery.i18n.js"></script> <script src="lib/jquery.i18n.messagestore.js"></script> <script src="lib/jquery.i18n.fallbacks.js"></script> <script src="lib/jquery.i18n.language.js"></script> <script src="lib/jquery.i18n.parser.js"></script> <script src="lib/jquery.i18n.emitter.js"></script> <script src="lib/jquery.i18n.emitter.bidi.js"></script> </body> </html>

提供翻译 (Providing Translations)

As mentioned above, translations for the jQuery.I18n library are stored inside JSON files. You may separate translation data for different languages, or store everything in a single file. Create a i18n/i18n.json file with the following contents:

如上所述， jQuery.I18n库的翻译存储在JSON文件中。 您可以将不同语言的翻译数据分开，也可以将所有内容存储在一个文件中。 创建具有以下内容的i18n/i18n.json文件：

{ "@metadata": { "authors": [ "Ilya" ], "last-updated": "2019-01-29", "message-documentation": "qqq" }, "welcome": "Hi!" }

To load this file, use the following code (note that I am also providing a default locale):

要加载此文件 ，请使用以下代码(请注意，我还提供了默认语言环境)：

// main.js jQuery(document).ready(function() { $.i18n({locale: 'en'}).load({ en: 'i18n/i18n.json' }).done(function() { // success }) });

Include this script on your main page and you are good to go!

在您的主页上包含此脚本，您很高兴！

使用它 (Using It)

For instance, you may output a welcoming message in the following way:

例如，您可以通过以下方式输出欢迎消息：

console.log($.i18n('welcome', 'Username'));

Pluralization is performed in the following way:

多元化通过以下方式执行：

{ "msg": "You have $1 {{PLURAL:$1|message|messages}}" }

So, you have one key that lists all the available forms, both plural, and singular. $1 is a placeholder for the interpolation. You may have as many placeholders as needed, and they should be named in a sequential manner: $2, $3 etc.

因此，您有一个列出所有可用形式的键，包括复数形式和单数形式。 $1是插值的占位符 。 您可以根据需要使用任意多个占位符，并且应按顺序命名它们： $2 ， $3等。

Then just utilize this new key:

然后只需利用这个新密钥：

$.i18n('msg', 10); // $1 placeholder will have a value of 10

The context of the translation is defined in pretty much the same way. For example, you can work with gender information:

翻译的上下文几乎以相同的方式定义。 例如，您可以使用性别信息 ：

"friend": "Some text... {{GENDER:$1|A boyfriend|A girlfriend}}"

Provide the context:

提供上下文：

$.i18n('friend', 'female');

One interesting feature is the support for the data-* HTML5 attributes. You just need to add a data-i18n attribute to your tags, provide the key as the value, and then apply .i18n() function directly to those elements or their parent. For example:

一种有趣的功能是对data-* HTML5属性的支持。 您只需要向标签添加data-i18n属性，提供键作为值，然后将.i18n()函数直接应用于这些元素或其父元素。 例如：

<body> <p data-i18n="translation-key">Fallback text goes here</p> <p data-i18n="another-key">Fallback text goes here</p> </body>

Now inside your code simply say:

现在，在您的代码中只需说：

$('body').i18n();

The script is going to traverse all elements inside body and replace their contents with the messages under the provided translation keys. If the key cannot be found, the initial content will be displayed as a fallback.

该脚本将遍历body所有元素，并用提供的翻译键下的消息替换其内容。 如果找不到密钥，则初始内容将显示为后备。

jQuery.I18n is a powerful and quite easy-to-use library. Basically, you may call it a direct competitor to Globalize as these two solutions have similar functionality. To some people, Globalize may seem more favorable as it doesn’t rely on jQuery. On the other hand, many websites do requite jQuery, so that’s perhaps not a deal-breaker. If you’d like to mostly stay away from CLDR then jQuery.I18n is, of course, a better option. This library also allows to store metadata inside your translation files, supports data-* attributes API, supports so-called “magic words”, and more. So, as you see, there is really a lot of features!

jQuery.I18n是一个功能强大且易于使用的库。 基本上，您可以将其称为全球化的直接竞争对手，因为这两种解决方案具有相似的功能。 对于某些人来说，Globalize似乎更有利，因为它不依赖jQuery。 另一方面，许多网站确实需要jQuery，所以这也许不是一笔大买卖。 如果您想远离CLDR，那么jQuery.I18n当然是一个更好的选择。 该库还允许在您的翻译文件中存储元数据，支持data-* 属性API ，支持所谓的“魔术词”等。 因此，正如您所看到的，确实有很多功能！

多种语言 (Polyglot)

The last solution we’ll talk about is Polyglot.js created by Airbnb. As long as Airbnb service is worldwide, it’s essential for them to have proper localization. Polyglot, in contrast to the previously discussed libraries, is a very small solution really. It has only the following features:

我们将讨论的最后一个解决方案是由Airbnb创建的Polyglot.js 。 只要Airbnb服务在全球范围内，对他们来说，进行适当的本地化至关重要。 与前面讨论的库相比，Polyglot实际上是一个非常小的解决方案。 它仅具有以下功能：

• Basic translation features
  基本翻译功能
• Interpolation
  插补
• Pluralization
  多元化

It may become an excellent candidate for smaller and less intricate apps that do not require all the complexities of, say, Globalize. Now let’s see how to get started with Polyglot!

对于不需要全球化等所有复杂性的小型且复杂程度较低的应用程序，它可能会成为极好的选择。 现在，让我们看看如何开始使用Polyglot！

载入文件 (Loading Files)

Polyglot has no external dependencies at all, so all you need to do is hook up the main file:

Polyglot根本没有外部依赖项，因此您要做的就是连接主文件：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/polyglot.js/2.2.2/polyglot.min.js"></script> </body> </html>

提供翻译并使用它 (Providing Translations and Using It)

Now we can provide translations (aka “phrases”) and set the default locale:

现在，我们可以提供翻译(也称为“短语”)并设置默认语言环境：

var polyglot = new Polyglot({ locale: 'en', phrases: { "message_count": "%{smart_count} message |||| %{smart_count} messages" } });

In this example the default locale is English. Also, there is a message_count key that provides singular and plural forms separated with 4 pipelines (for other languages there may be more forms). Oddly enough, pluralization relies on the smart_count interpolated value, so you must provide it in the following way:

在此示例中，默认语言环境是英语。 另外，还有一个message_count键，该键提供由4个流水线分隔的单数和复数形式(对于其他语言，可能会有更多形式)。 奇怪的是， 复数依赖于smart_count插值 ，因此您必须通过以下方式提供它：

console.log(polyglot.t('message_count', {smart_count: 2}));

This is it! There is not much else to say about the translation process, as it relies only on the t function. You may find some more examples of using Polyglot in the official doc.

就是这个！ 关于翻译过程，没有什么要说的，因为它仅依赖于t函数。 您可能会在官方文档中找到更多使用Polyglot的示例。

总结一切 (Summing Everything Up)

Potentially, there is a lot of different features to compare (some may be more or less relevant for your setup), but here is a brief summary of the discussed solutions:

潜在地，有许多不同的功能需要比较(某些功能可能与您的设置或多或少相关)，但是这里是所讨论的解决方案的简要摘要：

A couple of things to note:

需要注意的几件事：

• I18next does support various formatting but it requires external dependencies like moment.js

  I18next 确实支持各种格式，但需要外部依赖，例如moment.js

• jQuery.I18n requires CLDR Parser only for pluralization
  jQuery.I18n仅需要CLDR解析器才能进行复数
• I18next provides lots of plugins to connect with the client-side framework, but other solutions can play nicely with frameworks as well (you may just need to spend more time to integrate everything)
  I18next提供了许多插件来与客户端框架连接，但是其他解决方案也可以很好地与框架配合使用(您可能只需要花费更多时间来集成所有内容)
• You may work with gender information (and, more broadly speaking, with contexts) in any library — it just may be less convenient and present more complexities
  您可以在任何图书馆中使用性别信息(更广泛地说，可以使用上下文)-只是它不那么方便，而且呈现出更多的复杂性

From my experience, I18next is a very powerful and feature-rich tool that you can easily get started with. At the same time, Globalize’s modular approach and relation on CLDR might be convenient, especially for larger and more complex applications. I have not used jQuery.I18n that much but as long as the Wikimedia team utilizes it, one can conclude that this is also a feasible tool with vast functionality. And, Polyglot is a nice tiny helper for simpler apps that also plays very nicely with server-side frameworks like Rails.

根据我的经验，I18next是一个非常强大且功能丰富的工具，可以轻松入门。 同时，Globalize在CLDR上的模块化方法和关系可能会很方便，尤其是对于大型和更复杂的应用程序。 我没有使用jQuery.I18n，但是只要Wikimedia团队使用它，就可以得出结论，这也是一种功能强大的可行工具。 而且，Polyglot是简单应用程序的不错的小帮手，它在Rails等服务器端框架中也能很好地发挥作用。

Lokalise让您的生活更轻松 (Make Your Life Easier With Lokalise)

Supporting multiple languages on a big website may become a serious pain. You must make sure that all the keys are translated for each and every locale. Luckily, there is a solution to this problem: the Lokalise platform that makes working with the localization files much simpler. Let me guide you through the initial setup which is nothing complex really.

在大型网站上支持多种语言可能会变得很痛苦。 您必须确保为每个语言环境翻译了所有键。 幸运的是，有一个解决此问题的方法：使用Lokalise平台可以更轻松地处理本地化文件 。 让我指导您完成初始设置，这实际上并不复杂。

• To get started, grab your free trial

  首先， 请免费试用

• Create a new project, give it some name, and set English as a base language
  创建一个新项目，为其命名，并将英语设置为基本语言
• Click “Upload Language Files”
  点击“上传语言文件”
• Upload translation files for all your languages
  上传所有语言的翻译文件
• Proceed to the project, and edit your translations as needed
  进入项目，并根据需要编辑翻译
• You may also contact a professional translator to do the job for you
  您也可以联系专业翻译为您完成这项工作
• Next simply download your files back
  接下来只需将文件下载回来
• Profit!
  利润！

Lokalise has many more features including support for dozens of platforms and formats, and even the possibility to upload screenshots to read texts from them. So, stick with Lokalise and make your life easier!

Lokalise具有更多功能，包括对数十种平台和格式的支持，甚至可以上传屏幕截图以从中读取文本。 因此，坚持使用Lokalise，让您的生活更轻松！

结论 (Conclusion)

In this article, we were talking about the available tools used to translate JavaScript applications. We’ve covered Globalize, I18next and jQuery.I18n (larger and more complex solutions), as well as Polyglot which appeared to be a much simpler and smaller library. We’ve compared these libraries and came up with some conclusions about them. Hopefully, now you will be able to pick an I18n solution that entirely suits you. Don’t be afraid to research, experiment, and ultimately choose the tool that works for you! After all, it will be more complicated to switch to another localization library when your application is half-finished.

在本文中，我们讨论了用于翻译JavaScript应用程序的可用工具。 我们介绍了Globalize，I18next和jQuery.I18n(更大，更复杂的解决方案)，以及Polyglot，Polyglot似乎是一个更简单，更小的库。 我们已经比较了这些库，并得出了一些关于它们的结论。 希望现在您将能够选择完全适合您的I18n解决方案。 不要害怕研究，试验并最终选择最适合您的工具！ 毕竟，当您的应用程序完成一半时，切换到另一个本地化库将更加复杂。

I thank you for staying with me, and until the next time!

感谢您与我在一起，直到下一次！

Originally published at blog.lokalise.co on January 31, 2019.

最初于2019年1月31日发布在blog.lokalise.co 。

翻译自: https://www.freecodecamp.org/news/how-to-choose-a-library-for-translating-your-javascript-apps-10f68de6a1d1/

javascript程序