前端开发过程中,国际化是一个非常重要的挑战。在写代码的时候,我们要考虑如何让这些语言可以被翻译成多种语言,在不同地区被使用。@lingui/macro 是一个可以帮助我们进行国际化的 NPM 包,可以避免我们使用传统的翻译方式,如字符串模板和手动切换需要翻译的语言等。
什么是 @lingui/macro
@lingui/macro 是一个运行于 Babel 编译时的国际化方案。它基于编译时检测和提取翻译文本,自动为我们进行翻译。这意味着,在代码写好后,我们仅需要简单地启动一个构建任务,并且 @lingui/macro 就会自动扫描代码,提取翻译文本并编译成我们需要的格式。
如何使用 @lingui/macro
安装
通过 NPM 安装 @lingui/macro
npm install --save-dev @lingui/macro
定义翻译文本
在需要进行国际化的文本外面打上 lingui 这个 macro 即可,如下所示:
import { Trans } from '@lingui/macro'; function Greeting({ name }) { return <Trans>Hello {name}!</Trans>; }
这里我们可以看到,在使用上 @lingui/macro 是非常简单的。我们仅需要把翻译内容用 <Trans>
包裹即可。
提取翻译内容
在你的 build 脚本中执行 extract
命令即可把翻译文本提取出来。
yarn lingui-extract
这里我们使用了 Lingui CLI 来提取文本。如果你没有使用过 Lingui CLI,可以通过以下命令来安装:
npm install --save-dev lingui-cli
编译翻译文本
编译的工作由 lingui 工具自动完成。当我们执行 lingui-compile
命令时,它会将你的翻译文本编译成一个包含所有翻译的哈希表。
yarn lingui-compile
应用编译后的翻译文本
最后,我们只需要在应用中引入 Lingui,并提供一个 I18nProvider(这个提供了你的翻译内容),并使用 Trans 组件来引用翻译文本。下面是一个简单的例子:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------------- ----- - ---- ---------------- ------ - ------- - ---- ------------ ------ -------- ---- --------------------- -------- ----- - ------ - ------------- ------------- -------------------- ------------ -------------- --------------- -- - ------ ------- ----展开代码
在本例中,我们将 catalogs
作为 props 传递给 I18nProvider
,我们的翻译文本就是在此生成的。
总结
国际化是前端开发中必不可少的一部分。@lingui/macro 可以帮助我们轻松地实现国际化,让我们的应用程序可以轻松地适应多语言环境。这样我们就可以更加专注于编写代码本身,而不是关注翻译等方面的问题。希望这篇文章可以帮助你快速地上手使用 @lingui/macro,我们希望更多人能够加入到国际化开发的行列中。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/lingui-macro