npm 包 r2i18n 使用教程

阅读时长 4 分钟读完

介绍

r2i18n 是一个 JavaScript 库,用于国际化(i18n)前端应用程序。它支持从不同数据源中读取翻译、动态更改当前语言、自动翻译文本等功能。

r2i18n 基于 React 和 Redux 构建,但也可以与其他框架和库一起使用。

安装

使用 npm 进行安装:

使用方法

初始化

在应用程序的入口文件中导入 r2i18n 时,需要传入一些参数来初始化:

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

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

这里的参数详细说明如下:

  • defaultLanguage:默认语言。如果没有指定当前语言,则会使用默认语言。
  • supportedLanguages:支持的语言列表。
  • translationsSource:翻译数据源。支持 localremote,分别表示从本地和远程获取翻译数据。
  • translations:翻译数据。如果使用本地数据源,则需要传入一个对象,其中每个属性都表示一种语言,对应的值是一个包含所有翻译文本的对象。如果使用远程数据源,则需要传入一个 URL,该 URL 返回一个包含所有翻译文本的对象。

获取翻译文本

要获取翻译文本,只需使用 getText 方法:

如果当前的语言是英语,则返回的结果是 'Hello, World!'

更改当前语言

要更改当前语言,可以使用 setLanguage 方法:

然后再使用 getText 方法获取文本时,返回的是德语翻译文本。

监听语言变化

r2i18n 会在 Redux store 中保存当前语言。可以使用 subscribe 方法监听语言变化:

在应用程序的某个位置调用 unsubscribe,取消监听。

自动翻译文本

r2i18n 还支持自动翻译文本,即在浏览器中检测用户的语言,并尝试自动翻译文本。

如果当前浏览器的语言是德语,则返回的结果是 'Hallo, Welt!'

示例

下面是一个完整的示例:

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

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

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

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

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

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

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

总结

r2i18n 是一个方便的国际化库,支持配置文件,自动翻译和语言变化监听等功能。如果你需要在前端应用程序中实现 i18n,r2i18n 可以提供很好的帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600566b481e8991b448e3004

纠错
反馈