简介
react-intl-webpack-plugin 是一个用于国际化 React 应用程序的 Webpack 插件。它可以自动提取项目中所有的本地化信息，生成对应的语言包，并将这些语言包与你的打包文件一起发布。使用该插件可以大幅简化前端项目的国际化开发流程。
安装
使用 npm 安装 react-intl-webpack-plugin：
--- ------- ---------- -------------------------
配置
在 Webpack 的配置文件中添加以下内容：
----- --------------- - -------------------------------------
----- ----------------- - ----------------------- ------------
-------------- - -
-- ---
-------- -
--- -----------------
------------------
---
--
--其中 messagesDirectory 是存放本地化信息的目录路径，通常为 src/messages。
使用
提取本地化信息
在你的 React 组件中使用 FormattedMessage 组件来标记需要本地化的文本。
------ - ---------------- - ---- -------------
-------- --------------- -
------ -
-----
----------------- ------------- ---------------------- ------- --
------
--
-上述代码表示需要本地化的文本是 Hello, World!，在语言包中对应的键名为 greeting。
执行以下命令来提取所有需要本地化的文本：
--- --- ----------------
该命令会在 messagesDirectory 目录下生成一个名为 en.json 的语言包文件，其中包含了项目中所有需要本地化的文本。
添加新的语言
假设你想要添加中文语言支持。首先，在 messagesDirectory 目录下新增一个名为 zh.json 的文件，然后在其中添加对应的翻译。
- ----------- -------- -
然后在你的 React 应用程序中加载中文语言包：
------ - -------------- ------------ - ---- -------------
------ -- ---- ----------------------------
------ ---------- ---- ---------------------
------------------
-------- ---------- -
------ -
------------- ----------- ----------------------
--- --- ---
---------------
--
-上述代码表示使用中文语言包来渲染组件。
示例代码
以下是一个完整的示例代码，我们假设你的项目目录结构如下：
--------
----
-----------
------------
---------
-------
-----------------Webpack 配置
----- ---- - ----------------
----- --------------- - -------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- -----------------
------------------ ----------------------- ----------------
---
--
------- -
------ -
-
----- ----------
-------- ---------------
---- -
------- ---------------
--
--
--
--
--组件代码
------ ----- ---- --------
------ - ---------------- - ---- -------------
-------- --------------- -
------ -
-----
----------------- ------------- ---------------------- ------- --
------
--
-
------ ------- ---------语言包文件
en.json
- ----------- ------- ------- -
zh.json
- ----------- -------- -
应用程序代码
------ ----- ---- -------- ------ -------- ---- ------------ ------ - -------------- ------------ - ---- ------------- ------ -- ---- ---------------------------- ------ -- ---- - - ----------------------------------------------------------- -------- ---------------------------------------------------------------------------------------