国际化

国际化是一个复杂的问题。Qwik 不会直接解决国际化问题,而是只提供低级 API,允许其他库来解决它。

运行时与编译时翻译

从高层次来看,解决翻译问题有两种方法

  • 运行时:加载翻译映射并在运行时查找翻译。
  • 编译时:有一个编译步骤将翻译内联到输出字符串中。

以上两种方法都有各自的权衡,需要考虑。

运行时方法的优点是

  • 简单。不需要额外的构建步骤。

运行时方法的缺点是

  • 每个字符串都以三倍的形式存在
    1. 一次作为代码中的原始字符串。
    2. 一次作为翻译映射中的键。
    3. 一次作为翻译映射中的翻译值。
  • 当前的工具缺乏拆分翻译映射的能力。整个翻译映射必须在应用程序启动时急切加载。这并非理想情况,因为它违背了 Qwik 将代码库拆分和延迟加载的努力。此外,由于翻译映射没有被拆分,浏览器将下载不必要的翻译。例如,对于永远不会在客户端重新渲染的静态组件的翻译。
  • 翻译查找存在运行时成本。

编译时方法的优点是

  • Qwik 的代码延迟加载现在扩展到翻译字符串的延迟加载。(不会加载不必要的翻译文本)
  • 没有运行时翻译映射意味着字符串不会以三倍的形式存在。

编译时方法的缺点是

  • 额外的构建步骤。
  • 更改语言需要页面重新加载。

建议

考虑到以上因素,Qwik 建议您使用最适合您约束的工具。为了帮助您做出决定,有三个不同的考虑因素:浏览器、服务器和开发。

浏览器

Qwik 的目标是提供最佳的用户体验。它通过将代码的加载推迟到以后来实现这一点,这样初始启动性能就不会被压垮。由于运行时方法需要急切加载所有翻译,因此我们不推荐这种方法。我们认为编译时方法最适合浏览器。

服务器

服务器没有延迟加载的约束。因此,服务器可以使用运行时或编译时方法。编译时方法在服务器上的缺点是我们需要为每个翻译提供单独的部署。这会使部署过程复杂化,并对服务器数量提出更高的要求。因此,我们认为运行时方法在服务器上更可取。

开发

在开发过程中,更少的构建步骤将导致更快的周转时间。因此,运行时翻译应该会带来更简单的开发工作流程。

我们的建议

我们的建议是使用一个工具,它可以在服务器上提供运行时方法,并在客户端提供运行时或编译时方法,具体取决于我们是在开发环境还是生产环境中。这样,就可以提供最佳的用户体验和开发体验,并使用最少的服务器资源。

国际化库

$localize

$localize 翻译系统基于来自 Angular 的 $localize 系统。翻译可以以 xmb、xlf、xlif、xliff、xlf2、xlif2、xliff2 和 json 格式提取。

注意:$localize 系统是一个编译时翻译系统,它完全从最终输出中删除。$localize 是 Angular 的一个子项目,包含它的使用并不意味着 Angular 用于应用程序的渲染。

将 $localize 添加到 Qwik 的最简单方法是使用 pnpm qwik add localize 命令。这将安装所需的依赖项并创建一个新的公共路由 /src/routes/[locale],展示 i18n $localize 集成。

npm run qwik add localize

有关更多参考,请查看此 示例仓库

提取翻译

完成更改后,可以使用 npm run i18n-extract 从代码中提取翻译。这将更新您在 package.json 中看到的文件。

使用 deepl 自动翻译 $localize

对于自动翻译,您可以使用 deepl-localize 包。它将使用 deepl.com API 自动翻译您的字符串。

使用 deepl-localize 命令通过 npx 翻译您的字符串

npx deepl-localize translate -b src/locales/message.en.json -l de-DE fr-FR -a "YOUR-DEEPL-API-KEY"

或者,您可以在脚本部分使用 deepl-localize 命令来翻译您的字符串

{
  "scripts":{
    "translate":"deepl-localize translate -b src/locales/message.en.json -l de-DE fr-FR -a 'your-deepl-api-key'"
  }
}

qwik-speak

qwik-speak 用于在 Qwik 应用程序中翻译文本、日期和数字的库。

将 qwik-speak 添加到 Qwik 的最简单方法是按照官方 指南 进行操作。

贡献者

感谢所有帮助改进本文档的贡献者!

  • mhevery
  • manucorporat
  • gioboa
  • tzdesign
  • Benny-Nottonson
  • mrhoodz