如果您正在开发一个国际化的前端应用程序，或者想要将您的现有应用程序本地化为多个语言版本，那么一定需要考虑使用 @formatjs/macro，这是一个 NPM 包，它能够帮助您轻松扩展 React Intl， 为您提供更好的国际化工具。
在本篇文章中，我们将介绍 @formatjs/macro 的使用方法，包括如何安装、配置和使用示例。
安装
安装最新版本的 @formatjs/macro，可以使用 npm 命令:
npm install @formatjs/macro
配置
安装完毕后，在您的项目中，您需要引入 babel-plugin-macros 并将其添加到您的 babel 配置文件中。在您的项目根目录下创建一个名为 .babelrc 的文件，并且添加以下内容：
{
"plugins": ["macros"]
}接下来，在您的项目中，您需要构建一个名为 locales 的本地化资源文件夹。在该文件夹中，您可以为多种语言版本创建不同的 JSON 文件，其中每个 JSON 文件都将具有一个唯一的语言代码，例如 en.json，zh.json，de.json 等。
例如，您创建了一个名为 en.json 的文件，文件内容如下：
{
"hello": "Hello",
"world": "World"
}使用示例
在您的 React 组件中使用 @formatjs/macro 库， 需要先将其引入
import { defineMessages } from '@formatjs/macro';接下来，您需要定义您的本地化信息。定义信息是一个最佳实践，即将所有需要本地化的字符串统一到一个文件中，并将其导出为一个定义对象。我们可以使用 defineMessages 方法来定义这些信息，如下所示：
const messages = defineMessages({
helloWorld: {
id: 'helloWorld',
defaultMessage: 'Hello, World!',
},
});上面定义的信息对象包含了两个字段，分别为 id 和 defaultMessage。id 字段是一个作为本地化翻译字符串唯一标识符的字符串，而 defaultMessage 则是未翻译的字符串。
接下来，在您的组件中使用已定义的信息，如下所示：
-- -------------------- ---- -------
------ - ------- - ---- -------------
------ - -------------- - ---- ------------------
----- -------- - ----------------
----------- -
--- -------------
--------------- ------- --------
--
---
-------- ------------- -
----- ---- - ----------
------ -
-----
------------------------------------------------
------
--
-在上面的代码中，我们将已定义的信息对象解析为 formatMessage 方法中的字符串参数，并使用 useIntl 钩子来提取国际化配置。在渲染时，formatMessage方法会将 helloWorld 模板字符串用其中的 id 值替换。
你们可以将 messages 对象当作参数传递给 FormattedMessage 或 FormattedHTMLMessage 组件来达到同样的效果
-- -------------------- ---- -------
------ - ---------------- - ---- -------------
------ - -------------- - ---- ------------------
----- -------- - ----------------
----------- -
--- -------------
--------------- ------- --------
--
---
-------- ------------- -
------ -
-----
----------------- ------------------------ --
------
--
-现在，您已经成功地使用 @formatjs/macro 库将一个字符串本地化。您可以将其他需要本地化的字符串添加到您的定义文件中，以实现完全的国际化。
总结
@formatjs/macro 库是一个强大的工具，它可以帮助您轻松地为 React Intl 库提供本地化字符串，并支持多种语言。在使用过程中我们要注意定义 strings， 至少包括：id，defaultMessage，描述文件的locale version，以确保本地化能够正常工作。最后建议，养成良好的国际化习惯，这将提高应用程序的可用性并为国际用户提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/169833