在前端开发中，国际化是一个不可忽视的问题，不同语言、不同文化的用户都希望能够使用适合自己的产品。而我们在开发过程中使用的 storybook 是一个非常好的组件开发环境，那么如何在 storybook 中进行国际化的开发呢？这时候一个叫做 storybook-addon-intl 的 npm 包就可以派上用场了。
什么是 storybook-addon-intl
storybook-addon-intl 是一个 storybook 插件，它提供了一个非常直观的界面，可以帮助我们在 storybook 中进行国际化开发。它提供了各种语言的选择和翻译内容的编辑功能，同时还支持自定义语言和内容。这个插件能够帮助我们在开发复杂的界面时更容易地进行测试和对比，可以帮助我们保证程序的正确性和可靠性。
安装和配置
- 安装依赖
首先我们需要在项目中安装 storybook-addon-intl 插件以及其依赖：
$ npm install @storybook/addon-intl react-intl -D
这里我们使用了 react-intl 作为本插件的依赖。
- 添加插件
在.storybook/addons.js 中添加以下代码：
import '@storybook/addon-intl/register';
这就是添加插件的关键代码。
- 添加配置
在.storybook/config.js 中添加以下代码：
-- -------------------- ---- -------
------ - ---------- ------------- ------------- - ---- -------------------
------ - -------------- -------- - ---- ------------------------
------ - ------ - ---- ----------------------------
------ - --------------- - ---- -----------------------
-- ---------
------ -------- ---- ---------------------------
-- ------
----- ------ - -----
-- ----------------------------------
-----------------------
-- -------
----- ----- - --------
----- --------
----------- --- -----------
--------- ----------------------
---
-- -------------
---------------
-------- ----------------
----- -
-------- ------ ----- ----- ------
-------------- -------
---------
--
-- -- --------- ---
------
---
-- ---------------
----- --- - ------------------------- ----- ------------------
-------- ------------- -
----------------------------- -- ---------------
-
---------------------- --------
-- ----------
---------------
-------- ------ ----- ----- ------
-------------- -----
------------------- -
------ -----------------
--
---
其中：
- locales 定义所支持的语言。
- defaultLocale 定义默认语言。
- messages 定义每种语言下的消息。
- theme 是定义 storybook 的主题。
现在我们已经完成了基本的配置环境。接下来我们将看到 storybook-addon-intl 具体的使用方法。
使用方法
- 定义消息
在我们开始使用 storybook-addon-intl 插件之前，我们需要先定义一些消息，这些消息会被用来作为各种文字的来源。消息通常是一个 js 对象，每个对象都代表一种语言。例如，我们的英语消息可能是这样的：
export default {
'app.greeting': 'Hello, {name}!',
'app.title': 'My amazing app',
'app.login': 'Log in',
};- 在 storybook 中使用
初始化消息后，我们需要在 storybook 中添加一个翻译器和一个语言选择器。其中，翻译器负责将我们的消息翻译成所选语言，语言选择器将用户所选语言传递给翻译器。
在.storybook/config.js 中已经完成了相关配置，我们需要定义我们自己的故事板。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------------- - ---- -------------
------ ----- ---- ----------------------
------ ------- -
------ ----------
--
------ ----- ----------- - -- -- -
-----
----------------- -------------- --
----------------- ----------------- --------- ----- ------ -- --
------ --
------
--
----------------- - -
----- --- -----------
--
这个例子的故事板定义了我们的应用程序的标题、欢迎语和登录组件。我们通过 FormattedMessage 组件传递 msgid 属性来传递要翻译的消息 ID。还可以使用 values 属性将变量传递给消息以动态生成消息。
最终效果如下：
高级用法
- 本地化日期和时间
当我们的应用程序需要支持多种语言环境时，必须将日期和时间本地化。在 react-intl 中，可以使用 FormattedDate 和 FormattedTime 组件来实现这个目的。
例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- ------------- - ---- -------------
------ ------- -------- ----------------- ---- -- -
------ -
-----
-------------- ------------ --
-- - --
-------------- ------------ --
------
--
-
- 本地化数值
同样，如果我们要在应用程序中本地化数值，可以使用 FormattedNumber 组件。此组件可以让我们将数值格式化为货币、百分比等。
例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- - ---- -------------
------ ------- -------- -------------- ----- -------- -- -
------ -
-----
----------------
------------
----------------
-------------------
-------------------------
-------------------------
--
------
--
-
这个例子将 ExchangeRate 组件渲染为针对所选货币的货币格式。最终的格式由 style 和 currency 属性定义。
总结
storybook-addon-intl 是一个非常有用的国际化开发工具，帮助我们在 storybook 中进行国际化开发。本文介绍了如何安装和配置这个 npm 包，并提供了详细的使用方法和示例代码。希望这篇文章能够帮助你更好地掌握 storybook-addon-intl 这个工具，在前端开发中更加轻松地进行国际化开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedabcdb5cbfe1ea061086c