npm 包 react-intl-webpack-plugin 使用教程

简介

react-intl-webpack-plugin 是一个用于国际化 React 应用程序的 Webpack 插件。它可以自动提取项目中所有的本地化信息，生成对应的语言包，并将这些语言包与你的打包文件一起发布。使用该插件可以大幅简化前端项目的国际化开发流程。

安装

使用 npm 安装 react-intl-webpack-plugin：

npm install --save-dev react-intl-webpack-plugin

配置

在 Webpack 的配置文件中添加以下内容：

-- -------------------- ---- -------
----- --------------- - -------------------------------------
----- ----------------- - ----------------------- ------------

-------------- - -
  -- ---
  -------- -
    --- -----------------
      ------------------
    ---
  --
--

其中 messagesDirectory 是存放本地化信息的目录路径，通常为 src/messages。

使用

提取本地化信息

在你的 React 组件中使用 FormattedMessage 组件来标记需要本地化的文本。

-- -------------------- ---- -------
------ - ---------------- - ---- -------------

-------- --------------- -
  ------ -
    -----
      ----------------- ------------- ---------------------- ------- --
    ------
  --
-

上述代码表示需要本地化的文本是 Hello, World!，在语言包中对应的键名为 greeting。

执行以下命令来提取所有需要本地化的文本：

npm run extract-messages

该命令会在 messagesDirectory 目录下生成一个名为 en.json 的语言包文件，其中包含了项目中所有需要本地化的文本。

添加新的语言

假设你想要添加中文语言支持。首先，在 messagesDirectory 目录下新增一个名为 zh.json 的文件，然后在其中添加对应的翻译。

{
  "greeting": "你好，世界！"
}

然后在你的 React 应用程序中加载中文语言包：

-- -------------------- ---- -------
------ - -------------- ------------ - ---- -------------
------ -- ---- ----------------------------
------ ---------- ---- ---------------------

------------------

-------- ---------- -
  ------ -
    ------------- ----------- ----------------------
      --- --- ---
    ---------------
  --
-

上述代码表示使用中文语言包来渲染组件。

示例代码

以下是一个完整的示例代码，我们假设你的项目目录结构如下：

project/
  src/
    components/
      Greeting.jsx
    messages/
      en.json
  webpack.config.js

Webpack 配置

-- -------------------- ---- -------
----- ---- - ----------------
----- --------------- - -------------------------------------

-------------- - -
  ------ -----------------
  ------- -
    --------- ------------
    ----- ----------------------- --------
  --
  -------- -
    --- -----------------
      ------------------ ----------------------- ----------------
    ---
  --
  ------- -
    ------ -
      -
        ----- ----------
        -------- ---------------
        ---- -
          ------- ---------------
        --
      --
    --
  --
--

组件代码

-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------------- - ---- -------------

-------- --------------- -
  ------ -
    -----
      ----------------- ------------- ---------------------- ------- --
    ------
  --
-

------ ------- ---------

语言包文件

en.json

{
  "greeting": "Hello, World!"
}

zh.json

{
  "greeting": "你好，世界！"
}

应用程序代码

import React from 'react';
import ReactDOM from 'react-dom';
import { addLocaleData, IntlProvider } from 'react-intl';
import en from 'react-intl/locale-data/en';
import zh from '

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/51790) ，转载请注明来源
[https://www.javascriptcn.com/post/51790](https://www.javascriptcn.com/post/51790)