本地翻译

概述

本指南将向您展示如何在您的 React 应用中存储翻译，而不是使用 CDN。这意味着翻译将存在于您的应用程序包中。这可以导致更快的加载时间，并避免对外部基础设施的依赖。

在本文档中，我们将 (1) 解释什么是本地翻译以及它们如何工作，以及 (2) 向您展示如何为您的 React 应用设置本地翻译。

什么是本地翻译？

本地翻译存储在应用程序的包中，而不是从 CDN（内容分发网络）获取。

假设您已将 gtx-cli translate 命令添加到您的 CD 过程中。这将生成包含应用程序翻译的 JSON 文件。最后一步是将这些翻译从我们的 API 中提取到您的应用程序中。

有两种方法可以做到这一点：

在应用程序的包中： 翻译生成后，将其添加到应用程序的包中。
在 CDN 中（默认）： 在运行时从 CDN 获取翻译。

注意： 如果您不使用 GT 基础设施，则需要编写自定义的 loadTranslations() 方法，以从您首选的基础设施加载翻译。

有什么好处？

更快的加载时间： 本地翻译直接从您的应用程序提供，这意味着它们的加载速度比从 CDN 提供的翻译更快。

不依赖外部服务： 您的应用程序加载翻译的能力不依赖于 CDN 的可用性。

有什么缺点？

增加的包大小： 本地翻译将增加应用程序的包大小，因为它们将与应用程序一起提供。这意味着您的应用程序在首次加载时可能会稍微慢一些。

语言环境管理： 为了添加或删除对语言环境的支持，您每次都需要重新部署应用程序。

内容管理： 就像语言环境管理一样，如果您想更改翻译（例如，您不喜欢内容在另一种语言中的措辞），您必须使用新的翻译重新部署应用程序。

设置

先决条件

确保您已按照快速入门指南设置您的 React 应用程序与 GT。

步骤

在 ./src 下添加一个 loadTranslations.js 文件，内容如下：

src/loadTranslations.js

export default async function loadTranslations(locale) {
  const t = await import(`./_gt/${locale}.json`);
  return t.default;
}

将 loadTranslations 作为一个 prop 传递给 <GTProvider> 组件。

src/App.jsx

import { GTProvider } from 'gt-react';
import loadTranslations from './loadTranslations'; 
 
export default function App() {
  return (
    <GTProvider loadTranslations={loadTranslations} locales={['es', 'fr']}> // [!code highlight]
      <YourApp />
    </GTProvider>
  );
}

运行以下命令，当被问到“您的语言文件存储在哪里？”时，选择“本地”选项。

npx gtx-cli init

然后，运行翻译命令。

npx gtx-cli translate

根据您使用的具体框架，您可能需要确保翻译 JSON 被包含在最终的包中。

就是这样！您的应用程序现在将仅从本地文件加载翻译。

注意事项

本地翻译是从 CDN 获取翻译的替代方案。
您可以自定义 loadTranslations() 以便也从其他来源加载翻译，例如您的数据库或您自己的 CDN。

下一步

查看 loadTranslations() 以获取有关编写自定义翻译加载器的更多信息。
查看示例页面以获取一些示例项目。

本地翻译

在本页面