前端国际化是现代 Web 应用的重要组成部分，但处理多语言选项通常需要编写许多复杂的代码。为了简化这个过程，npm 包 fang-intl 提供了一种简单的解决方案。
简介
fang-intl 是一个基于 React 的国际化解决方案，它使用简单的 JSON 文件来管理多语言选项。fang-intl 支持国际化字符串和数字格式化，并支持 React 组件和纯 JavaScript 项目。
安装
使用 npm 安装 fang-intl：
npm install fang-intl --save
在你的代码中导入 fang-intl：
import { IntlProvider, useIntl } from "fang-intl";示例
fang-intl 非常容易使用。只需为支持的语言创建一个 JSON 文件，然后将其传递给 IntlProvider 组件。
基本用法
假设我们有一个英语和法语的应用，同时也支持默认语言（英语）。首先，我们创建两个 JSON 文件：en.json 和 fr.json。
en.json:
{
"greeting": "Hello, {name}!",
"button": "Click me",
"items": "{count} items"
}fr.json:
{
"greeting": "Bonjour, {name}!",
"button": "Cliquez ici",
"items": "{count} objets"
}接下来，我们将创建一个 React 组件，并将 IntlProvider 组件包装在该组件中。在此示例中，我们只需要一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- ------- - ---- ------------
------ -- ---- ------------ -- -----
------ -- ---- ------------ -- -----
----- --- - -- -- -
----- - -------------- ------------ - - ----------
----- ---- - -------
----- ----- - --
------ -
-----
-------------------- --- ---------- -- - ---- --------
------------------------ --- -------- ------------
------------------- --- ------- -- - ------ ------------------- -------
------
--
--
----- -------- - -
---
--
--
----- ---- - -- -- -
------------- ----------- --------------------
---- --
---------------
--
------ ------- -----上述代码只是一个基本的示例，它演示了 fang-intl 如何在 React 组件中使用。要注意的是，在使用 formatMessage 方法时，可以使用已经注册的变量，即可以使用 {name} 和 {count} 代替具体变量的值。
所有的语言包都应该放在一个对象中，并传递给 IntlProvider 组件的 messages 属性。在这个例子中，我们将这个对象称为 messages，它包含了 en 和 fr 的语言包。
高级用法
除了基本用法之外，fang-intl 还有更多高级的用法。比如可以使用 createFormattedMessage 和 createFormatNumber 创建自定义的快捷方式。这使得在其它组件中使用这些快捷方式更加容易。以下是一个使用 createFormattedMessage 自定义快捷方式的示例：
-- -------------------- ---- -------
------ - ---------------------- - ---- ------------
----- ------ - ------------------------
--------------- ------- ---------
--- -----------
---
----- --- - -- -- -
----- - ------------- - - ----------
------ -
-----
------------- ----- ------ --------
------------------------ --- -------- -------------
------
--
--
------ ------- ----输出的方式与基本示例完全相同，只是 format 已经被设定成一个可重用的快捷方式，这使得格式化消息更加容易。
总结
fang-intl 是一个非常实用的国际化解决方案，它使用简单的 JSON 文件来管理多语言选项，并提供了一些可重用的快捷方式来简化代码。使用该库，会使得开发国际化支持变得更加简单和容易。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e581e8991b448e0841