如果你正在构建一个多语言的 Web 应用程序，那么你可能需要使用一些工具来帮助你管理多语言翻译。在这种情况下，@mojang/i18n-scripts 可以是一个很好的/npm 包选择。
在本篇文章中，我们将会介绍如何使用 @mojang/i18n-scripts 来为你的 React 应用程序提供多语言支持。 我们将覆盖以下内容：
- 了解@mojang/i18n-scripts
- 安装和配置@mojang/i18n-scripts
- 如何使用@mojang/i18n-scripts进行多语言翻译
- 结论和总结
1. 了解 @mojang/i18n-scripts
@mojang/i18n-scripts 是一个管理多语言翻译的工具，它基于 i18next 库实现，通过生成现代的i18n bundles来编译翻译。
@mojang/i18n-scripts 为你提供了一个命令行程序来处理翻译文件。在这些文件中，你可以定义你的应用程序所需的多语言文本。 它还提供了一个工具来在应用程序中使用这些翻译。
2. 安装和配置@mojang/i18n-scripts
首先，在你的项目中安装@mojang/i18n-scripts 。要安装它，你可以在终端运行以下命令：
npm install --save-dev @mojang/i18n-scripts
完成安装后，你需要在你的项目包的运行脚本中添加以下内容：
{
"scripts": {
"start": "i18n-scripts start",
"build": "i18n-scripts build",
"extract": "i18n-scripts extract",
}
}这些命令将被用来启动应用程序，构建应用程序和提取文本。
现在，你需要在你的项目中创建一个翻译文件夹。 这个文件夹可以包含多种语言的翻译文件。 翻译文件的格式很重要，你需要在你的项目中遵循一定的翻译文件格式来使它能够被@mojang/i18n-scripts正确识别。下面是一个翻译文件的例子：
-- -------------------- ---- -------
-
----- -
-------- --------
---------------- ------- --------
--
----- -
-------- -----
---------------- ------
-
-这是一个非常简单的例子，它将 login 和 createAccount 的翻译分别定义为 Login 和 Create account 。你可以使用这种方式来添加你需要的文本。
3. 如何使用@mojang/i18n-scripts进行多语言翻译
现在，你已经完成了@mojang/i18n-scripts的安装和配置。接下来，我们将讨论如何使用它来提供多语言支持。
首先，我们需要在我们的应用程序中创建 react-i18next 插件实例，如下所示：
-- -------------------- ---- -------
------ ---- ---- ----------
------ ------------------ ---- ----------------
------ ------------- ---- ---------------------------------- -- --- ----- ----------
------ ------------- ---- ----------------------------------
----
----------------------
-------
---------- -
--- -
------------ -------------
--
--- -
------------ -------------
-
--
---- -----
------------ -----
-------------- -
------------ -----
-
---在这个示例中，我们将从我们的翻译文件中加载英文和中文的翻译。 我们通过 calling i18n.use 来初始化 i18next，并通过调用 i18n.init 来启动它。我们使用 initReactI18next 将它集成到 React 应用程序中，并将 i18next 对象的资源设置为我们加载的翻译。 我们还定义了 lng 和 fallbackLng ，并配置了 interpolation 选项。
现在，我们可以在我们的应用程序中使用我们的翻译了。在下面的示例中，我们将使用翻译来处理我们的登录和创建账户按钮。
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------- ---- ----------------
-------- ----- -
----- --- - -----------------
------ -
-----
-----------------------------
-------------------------------------
------
--
-
------ ------- ----在这个示例中，我们从 react-i18next 导入 useTranslation Hook。 我们然后调用 useTranslation() 来获取 i18n 对象的翻译函数 t 。 我们将在按钮中使用它来呈现我们的翻译文本。每当用户在应用程序中更改语言时，t 函数将自动使用正确的翻译。
我们现在已经完成了使用@mojang/i18n-scripts提供多语言支持的操作。现在你可以添加尽可能多的语言翻译来扩展你的应用程序的国际化。
4. 结论和总结
在本文中，我们介绍了如何使用@mojang/i18n-scripts作为多语言应用程序的翻译管理工具。我们首先了解了@mojang/i18n-scripts和它的工作原理和依赖关系，然后我们看到了如何安装和配置它。我们还展示了如何使用 i18next 和 react-i18next 在 React 应用程序中使用我们的翻译资源。
如果你的项目需要使用多种语言翻译，那么 @mojang/i18n-scripts 可以是一个很好的选择。 通过遵循这篇文章中说明的步骤，你可以轻松地为你的应用程序提供多语言支持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/155660