npm 包 babel-plugin-react-intl 使用教程-JavaScript中文网-JavaScript教程资源分享门户

babel-plugin-react-intl 是一个用于国际化 React 应用的 Babel 插件。它可以帮助你在编译阶段将应用中的文本提取出来并生成对应语言的翻译文件，方便开发多语言版本的应用。

安装

可以通过 npm 进行安装：

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

配置

在项目根目录下创建 .babelrc 文件，添加以下配置：

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

其中 messagesDir 是生成翻译文件的目录，enforceDescriptions 表示是否强制要求每个消息都有一个描述信息。

使用

在需要国际化的组件上加上 FormattedMessage 组件，例如：

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

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

其中 id 是用来标识这个文本的唯一字符串，defaultMessage 是默认的文本内容，values 是传入的变量值。

然后执行 npm run extract-messages 命令，会在 messagesDir 目录下生成对应语言的翻译文件，例如：

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

在应用中通过 <IntlProvider> 组件来设置语言和翻译文件路径：

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

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

这样就可以在应用中正确显示对应语言的文本了。

总结

babel-plugin-react-intl 可以很方便地帮助我们进行 React 应用的国际化处理。通过以上的配置和使用方法，可以快速上手并实现多语言版本的应用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/51857