本地翻译

什么是本地翻译？

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

假设你已经在 CD 流程中添加了 gtx-cli translate 命令。这将为你的应用生成 JSON 格式的翻译文件。最后一步是将这些翻译从我们的 API 导出到你的应用中，这样它们才能被使用。

有两种方式可以实现这一点：

在你的应用包中： 翻译生成后，将其保存到你的应用包中。
在 CDN（默认）： 在运行时从 CDN 获取翻译内容。

默认情况下，gt-react 会从 General Translation CDN 获取翻译内容，并且当你使用我们的 API 翻译应用时，翻译内容会自动保存到我们的 CDN。

在 React 中，我们特别推荐使用 CDN 选项。使用 CDN 可以最大程度地减小你的应用包体积。

概述

本指南将向你展示如何将翻译内容存储在你的 React 应用程序包中，而不是使用像我们这样的外部 CDN。这意味着翻译内容将包含在你的应用程序包内，避免依赖外部基础设施。

在本指南中，我们将为你介绍：

使用本地翻译的权衡。

如何为你的 React 应用设置本地翻译。

权衡

有哪些好处？

更快的加载速度： 本地翻译直接从你的应用中提供，这意味着它们的加载速度会比通过 CDN 提供的翻译更快。
不依赖外部服务： 你的应用加载翻译的能力不依赖于 CDN 的可用性。使用 gt-react 时，如果找不到某个语言环境的翻译，应用会自动回退到默认语言并显示原始内容。

有哪些缺点？

包体积增加： 本地翻译会增加你的应用包体积，因为它们会和你的应用一起被提供。这意味着你的应用在客户端的加载时间可能会变长。
内容管理： 如果你想编辑某个翻译（例如，你不喜欢内容在另一种语言中的表达方式），每次修改后都必须重新部署你的应用以包含新的翻译。

设置

前置条件

请确保你已经使用 GT 设置好了你的 React 应用。如果还没有，请先完成快速入门指南或项目设置。

步骤

在 ./src 下添加一个名为 loadTranslations.[js|ts] 的文件，并填入以下内容：

src/loadTranslations.ts

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

src/loadTranslations.js

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

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

src/App.tsx

import { GTProvider } from 'gt-react';
import loadTranslations from './loadTranslations'; 

export default function App() {
  return (
    <GTProvider loadTranslations={loadTranslations} locales={['es', 'fr']}>
      <YourApp />
    </GTProvider>
  );
}

运行以下命令，当被询问是否要将翻译保存到 GT CDN 时，选择“No”选项。

npx gtx-cli configure

或者，你也可以手动配置 gt.config.json 文件以使用本地翻译。更多信息请参见 CLI 配置文档。

现在，当你运行翻译命令时，翻译内容会被自动下载并包含到你的代码库中。

npx gtx-cli translate

然后，loadTranslations 函数会被用来将这些翻译加载到你的应用中。

根据你所使用的具体框架，翻译 JSON 文件可能不会被自动包含在最终的构建包中。请参考你所用框架的文档，确保这些 JSON 文件被正确包含。

就是这样！你的应用现在只会从本地文件加载翻译内容。

注意事项

本地翻译是一种替代从 CDN 获取翻译的方法。
使用本地翻译有其优缺点，相关内容在权衡部分进行了讨论。

后续步骤

查看 loadTranslations() 以获取有关编写自定义翻译加载器的更多信息。