简介
在前端开发中，我们通常会使用 React 来构建用户界面，而国际化是一个非常重要的功能。React 社区有一个很流行的国际化库 react-intl，它可以根据不同的语言动态加载相应的语言包。但是，手动管理和更新语言包是一件非常困难的事情，特别是在多语言环境下。因此，使用 babel-plugin-react-intl-messages-generator 插件生成翻译消息非常方便。
babel-plugin-react-intl-messages-generator 是一个适用于 babel 的 React 国际化消息生成器插件。它可以帮助你自动提取你的 React 组件中的翻译消息，并将其写入到一个 JSON 文件中。此外，它还提供了一些特性，如多语言、变量、注释等。这个插件会大幅度简化你在国际化上的开发流程，特别是在多语言及大规模开发的情况下。
使用步骤
在使用 babel-plugin-react-intl-messages-generator 之前，我们需要先安装它及其依赖包，在终端中执行以下命令：
--- ------- ---------- ------------------------------------------ ------------------ ----------------
注意：该插件依赖 babel-preset-react 和 babel-preset-env 转码插件。
使用 babel-plugin-react-intl-messages-generator 的主要步骤如下：
1. 在 .babelrc 文件配置插件
在 .babelrc 文件中，配置 babel-plugin-react-intl-messages-generator 插件。举个例子，如下：
- ---------- ------- --------- ---------- --------------------------------- -
这就表示使用 babel-preset-env 和 babel-preset-react，并启用 react-intl-messages-generator 插件。该插件将自动提取组件中的翻译消息。在该配置中，还可以设置以下参数：
-
---------- -
-
--------------------------------
-
-- --------------------------
------- -----------------
-- -------------------------
--------------- ---------------------------------------------------
-- -------------
------------------ -----
-- ---------------- ------
------------------ -----
-- ----
-------- -
------------- -----------
--
-- ----
---------- -
-
------- ----------
------- -
------ ----
----- ---
-
-
--
-- ---------------
----------- --------------- - ---------- ---------- --------- --------------------------
-
-
-
-2. 注入 intl 消息
安装和配置完成后，我们就可以在组件中使用 FormattedMessage 组件了。这个组件可以根据当前语言动态加载相应的消息。
------ ------ - --------- - ---- --------
------ - ---------------- - ---- -------------
----- -------- ------- --------- -
-------- -
------ -
-----
----------------- --------------- ---------------------- ------- --
------
--
-
-
------ ------- ---------这里需要注意的是，在组件中需要添加注释以匹配 id（如本例中的 helloWorld）。否则，该插件无法识别该消息。
3. 运行 gulp 任务生成翻译文本
接下来，我们需要在 gulp 或者其他构建工具中创建一个任务，将代码中的翻译消息提取到指定的文件中。在这里，我们使用 gulp 来生成 JSON 文件。首先，安装 gulp 及插件：
--- ------- ---------- ---- ---------- -----------
然后，在项目根目录下创建一个 gulpfile.js 文件，并添加以下代码：
----- ---- - ----------------
----- ----- - ----------------------
----- ------ - -----------------------
----------------- -- -- -
------ ---------------------------
--------------------- ------------------------------------
----------------------- -------
--------------------------------
---上面的代码会将 ./src/**/*.js 下的文件识别为需要转换的文件，利用 react-intl-messages-generator 插件抽取其中的翻译消息，并写入到 ./dist/lang/en.json 文件中。
4. 加载翻译数据
在项目中将 ./dist/lang/en.json 加载到应用中。在 React 中一般可以使用 react-intl 库中的 addLocaleData 方法来将翻译数据注册到框架中。
------ ------------ ---- ----------------------------
------ ---------- ---- -----------------
----------------------------
----------------
------------- ----------- ----------------------
---- --
---------------
- --------------------------------最后，切换语言即可。使用 react-intl 库中的 IntlProvider 组件，将指定语言的翻译数据传入即可。
插件高级用法
匹配消息的正则表达式
在上面的例子中，我们使用的是 id='(.*?)' 表达式来提取消息。如果你的消息不是这种形式，你可以使用 extractRegex 参数来指定一个正则表达式，例如：
-
---------- -
-
--------------------------------
-
--------------- ------------------ -----------
-
-
-
-默认语言
在配置文件中，可以设置 defaultLanguage 参数来指定默认语言。例如：
-
---------- -
-
--------------------------------
-
------------------ --------
-
-
-
-添加注释和消息别名
在组件中可以添加注释来描述消息的含义。这个插件可以识别这些注释，并将它们添加到生成的 JSON 文件中。例如：
------ ------ - --------- - ---- --------
------ - ---------------- - ---- -------------
----- -------- ------- --------- -
-------- -
------ -
-----
--- ----- ---
----------------- --------------- ---------------------- ------- --
------
--
-
-
------ ------- ---------在配置文件中，可以设置 withDescription 参数为 true，开启这个功能：
-
---------- -
-
--------------------------------
-
------------------ -----
-
-
-
-另外，如果你想为翻译消息指定别名，你可以使用 alias 参数：
-
---------- -
-
--------------------------------
-
-------- -
------------- --------
--
-
-
-
-使用枚举
在一些情况下，消息中需要包含一些可变的文本。例如，一个屏幕可以展示列表或者一个空页面。这个时候，你可以使用枚举类型来解决这个问题。在这个插件中，你可以使用如下的方式定义。
------ ------ - --------- - ---- --------
------ - ---------------- - ---- -------------
----- ---- ------- --------- -
-------- -
------ -
-----------------
------------
----------------------- ------ -------
---- ------
----- -------
--
---------
----- ----------------
--
--
--
-
-
------ ------- -----在这个例子中，我们使用了 select 关键字来定义枚举，然后在 values 中指定该值。在翻译数据中，我们可以使用 enum 来定义枚举值：
- ---------- --- ------ --------- ---- ------ ----- -------- -
枚举值需要在 enum 中中定义。
-
---------- -
-
------- ----------
------- -
------ ----
----- ----
--
--
-
------- -------
------- -
------- -----
-------- -----
--
--
-
-在 enum 数组中定义具体的枚举值。在翻译时，我们将使用该值替换 enum 字符串，从而得到实际的翻译内容。
自定义代码模板
如果你不希望使用插件默认的代码模板，你可以在配置文件中使用 template 参数自定义代码模板。它支持以下模板语法：
{{#each messages}}循环遍历每一个消息。{{@key}}当前循环中的键名。{{this}}当前循环中的值。
例如：
-
---------- -
-
--------------------------------
-
----------- ------- ------- ---------- ---------- --------- --------------------------
-
-
-
-总结
babel-plugin-react-intl-messages-generator 插件提供了一种简单而方便的方式来生成翻译消息。在项目过程中，我们不需要手动管理翻译消息，这将大幅度简化我们的工作流程，并且便于后期的开发和维护。同时，它还支持多语言、变量、注释、枚举等特性，为我们提供了更加灵活和自由的开发选项。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005539881e8991b448d0ce9