NPM 包 @lingui/macro 使用教程

阅读时长 3 分钟读完

前端开发过程中,国际化是一个非常重要的挑战。在写代码的时候,我们要考虑如何让这些语言可以被翻译成多种语言,在不同地区被使用。@lingui/macro 是一个可以帮助我们进行国际化的 NPM 包,可以避免我们使用传统的翻译方式,如字符串模板和手动切换需要翻译的语言等。

什么是 @lingui/macro

@lingui/macro 是一个运行于 Babel 编译时的国际化方案。它基于编译时检测和提取翻译文本,自动为我们进行翻译。这意味着,在代码写好后,我们仅需要简单地启动一个构建任务,并且 @lingui/macro 就会自动扫描代码,提取翻译文本并编译成我们需要的格式。

如何使用 @lingui/macro

安装

通过 NPM 安装 @lingui/macro

定义翻译文本

在需要进行国际化的文本外面打上 lingui 这个 macro 即可,如下所示:

这里我们可以看到,在使用上 @lingui/macro 是非常简单的。我们仅需要把翻译内容用 <Trans> 包裹即可。

提取翻译内容

在你的 build 脚本中执行 extract 命令即可把翻译文本提取出来。

这里我们使用了 Lingui CLI 来提取文本。如果你没有使用过 Lingui CLI,可以通过以下命令来安装:

编译翻译文本

编译的工作由 lingui 工具自动完成。当我们执行 lingui-compile 命令时,它会将你的翻译文本编译成一个包含所有翻译的哈希表。

应用编译后的翻译文本

最后,我们只需要在应用中引入 Lingui,并提供一个 I18nProvider(这个提供了你的翻译内容),并使用 Trans 组件来引用翻译文本。下面是一个简单的例子:

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

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

------ ------- ----
展开代码

在本例中,我们将 catalogs 作为 props 传递给 I18nProvider,我们的翻译文本就是在此生成的。

总结

国际化是前端开发中必不可少的一部分。@lingui/macro 可以帮助我们轻松地实现国际化,让我们的应用程序可以轻松地适应多语言环境。这样我们就可以更加专注于编写代码本身,而不是关注翻译等方面的问题。希望这篇文章可以帮助你快速地上手使用 @lingui/macro,我们希望更多人能够加入到国际化开发的行列中。

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