本地翻译存储

什么是本地翻译？

本地翻译存放在应用的 bundle 中，而不是在运行时从 CDN（内容分发网络）获取。将 gtx-cli translate 命令加入构建流程后，会生成 JSON 格式的翻译。最后一步是把这些翻译注入到你的应用中以便使用。

有两种方式可以实现：

在应用的 bundle 中（本地）：生成后将翻译保存到应用的 bundle 中
在 CDN 中（默认）：在运行时从 CDN 拉取翻译

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

**默认行为：**GT 默认使用 CDN 存储。仅在确有需要其特定优势时再切换为本地存储。

权衡取舍

本地翻译的优势

加载更快：本地翻译由应用直接提供，较通过 CDN（内容分发网络）分发的翻译加载更迅速
不依赖外部服务：应用加载翻译不受 CDN 可用性的影响；若某个 locale 未找到翻译，应用会自动回退到默认语言
离线可用：翻译与应用一同打包

本地翻译的缺点

更大的 bundle 体积：本地翻译会增大应用的 bundle 体积，可能导致首次加载变慢
内容管理：每次修改翻译都需要重新部署应用以包含更新内容

设置

步骤 1：创建加载函数

在 ./src 目录下添加一个名为 loadTranslations.[js|ts] 的文件，内容如下：

src/loadTranslations.ts

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

步骤 2：配置 GTProvider

将 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>
  );
}

步骤 3：配置命令行界面（CLI）

运行配置命令并选择本地存储：

npx gtx-cli configure

When prompted:

保存到 CDN（内容分发网络）？ 选择“否”
翻译目录： CLI（命令行界面）将自动使用 ./src/_gt

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

步骤 4：生成翻译

现在，当你运行 translate 命令时，翻译会自动下载并纳入你的代码库：

npx gtx-cli translate

译文将存放于 src/_gt/，并随您的应用一同打包。

构建集成流程

React 构建流程

在你的构建脚本中加入翻译生成步骤：

{
  "scripts": {
    "build": "npx gtx-cli translate && <...你的构建命令...>"
  }
}

CI/CD 管道

# .github/workflows/deploy.yml
- name: 生成翻译
  run: npx gtx-cli translate
  
- name: 构建应用程序  
  run: npm run build

常见问题

缺少翻译文件

请在构建前先生成翻译：

# ❌ 未生成翻译就构建
<...YOUR_BUILD_COMMAND...>

# ✅ 请先生成翻译
npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>

导入路径错误

请在 load 函数中对齐你的目录结构：

// ❌ 路径不正确
const t = await import(`../translations/${locale}.json`);

// ✅ src/_gt 的正确路径
const t = await import(`./_gt/${locale}.json`);

Bundle 体积过大

对于支持多语言的应用，建议进行代码分割：

// 仅在需要时加载翻译
export default async function loadTranslations(locale: string) {
  // 仅在该 locale 处于激活状态时加载
  if (locale === getCurrentLocale()) {
    const translations = await import(`./_gt/${locale}.json`);
    return translations.default;
  }
  return {};
}

对于翻译较为稳定且无需频繁更新的应用，本地存储效果最佳。

下一步

语言指南 - 配置支持的语言

什么是本地翻译？

有两种方式可以实现：

在应用的 bundle 中（本地）：生成后将翻译保存到应用的 bundle 中
在 CDN 中（默认）：在运行时从 CDN 拉取翻译

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

**默认行为：**GT 默认使用 CDN 存储。仅在确有需要其特定优势时再切换为本地存储。

权衡取舍

本地翻译的优势

加载更快：本地翻译由应用直接提供，较通过 CDN（内容分发网络）分发的翻译加载更迅速
不依赖外部服务：应用加载翻译不受 CDN 可用性的影响；若某个 locale 未找到翻译，应用会自动回退到默认语言
离线可用：翻译与应用一同打包

本地翻译的缺点

更大的 bundle 体积：本地翻译会增大应用的 bundle 体积，可能导致首次加载变慢
内容管理：每次修改翻译都需要重新部署应用以包含更新内容

设置

步骤 1：创建加载函数

在 ./src 目录下添加一个名为 loadTranslations.[js|ts] 的文件，内容如下：

src/loadTranslations.ts

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

步骤 2：配置 GTProvider

将 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>
  );
}

步骤 3：配置命令行界面（CLI）

运行配置命令并选择本地存储：

npx gtx-cli configure

When prompted:

保存到 CDN（内容分发网络）？ 选择“否”
翻译目录： CLI（命令行界面）将自动使用 ./src/_gt

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

步骤 4：生成翻译

现在，当你运行 translate 命令时，翻译会自动下载并纳入你的代码库：

npx gtx-cli translate

译文将存放于 src/_gt/，并随您的应用一同打包。

构建集成流程

React 构建流程

在你的构建脚本中加入翻译生成步骤：

{
  "scripts": {
    "build": "npx gtx-cli translate && <...你的构建命令...>"
  }
}

CI/CD 管道

# .github/workflows/deploy.yml
- name: 生成翻译
  run: npx gtx-cli translate
  
- name: 构建应用程序  
  run: npm run build

常见问题

缺少翻译文件

请在构建前先生成翻译：

# ❌ 未生成翻译就构建
<...YOUR_BUILD_COMMAND...>

# ✅ 请先生成翻译
npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>

导入路径错误

请在 load 函数中对齐你的目录结构：

// ❌ 路径不正确
const t = await import(`../translations/${locale}.json`);

// ✅ src/_gt 的正确路径
const t = await import(`./_gt/${locale}.json`);

Bundle 体积过大

对于支持多语言的应用，建议进行代码分割：

// 仅在需要时加载翻译
export default async function loadTranslations(locale: string) {
  // 仅在该 locale 处于激活状态时加载
  if (locale === getCurrentLocale()) {
    const translations = await import(`./_gt/${locale}.json`);
    return translations.default;
  }
  return {};
}

对于翻译较为稳定且无需频繁更新的应用，本地存储效果最佳。

下一步

语言指南 - 配置支持的语言

什么是本地翻译？

有两种方式可以实现：

在应用的 bundle 中（本地）：生成后将翻译保存到应用的 bundle 中
在 CDN 中（默认）：在运行时从 CDN 拉取翻译

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

**默认行为：**GT 默认使用 CDN 存储。仅在确有需要其特定优势时再切换为本地存储。

权衡取舍

本地翻译的优势

加载更快：本地翻译由应用直接提供，较通过 CDN（内容分发网络）分发的翻译加载更迅速
不依赖外部服务：应用加载翻译不受 CDN 可用性的影响；若某个 locale 未找到翻译，应用会自动回退到默认语言
离线可用：翻译与应用一同打包

本地翻译的缺点

更大的 bundle 体积：本地翻译会增大应用的 bundle 体积，可能导致首次加载变慢
内容管理：每次修改翻译都需要重新部署应用以包含更新内容

设置

步骤 1：创建加载函数

在 ./src 目录下添加一个名为 loadTranslations.[js|ts] 的文件，内容如下：

src/loadTranslations.ts

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

步骤 2：配置 GTProvider

将 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>
  );
}

步骤 3：配置命令行界面（CLI）

运行配置命令并选择本地存储：

npx gtx-cli configure

When prompted:

保存到 CDN（内容分发网络）？ 选择“否”
翻译目录： CLI（命令行界面）将自动使用 ./src/_gt

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

步骤 4：生成翻译

现在，当你运行 translate 命令时，翻译会自动下载并纳入你的代码库：

npx gtx-cli translate

译文将存放于 src/_gt/，并随您的应用一同打包。

构建集成流程

React 构建流程

在你的构建脚本中加入翻译生成步骤：

{
  "scripts": {
    "build": "npx gtx-cli translate && <...你的构建命令...>"
  }
}

CI/CD 管道

# .github/workflows/deploy.yml
- name: 生成翻译
  run: npx gtx-cli translate
  
- name: 构建应用程序  
  run: npm run build

常见问题

缺少翻译文件

请在构建前先生成翻译：

# ❌ 未生成翻译就构建
<...YOUR_BUILD_COMMAND...>

# ✅ 请先生成翻译
npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>

导入路径错误

请在 load 函数中对齐你的目录结构：

// ❌ 路径不正确
const t = await import(`../translations/${locale}.json`);

// ✅ src/_gt 的正确路径
const t = await import(`./_gt/${locale}.json`);

Bundle 体积过大

对于支持多语言的应用，建议进行代码分割：

// 仅在需要时加载翻译
export default async function loadTranslations(locale: string) {
  // 仅在该 locale 处于激活状态时加载
  if (locale === getCurrentLocale()) {
    const translations = await import(`./_gt/${locale}.json`);
    return translations.default;
  }
  return {};
}

对于翻译较为稳定且无需频繁更新的应用，本地存储效果最佳。

下一步

语言指南 - 配置支持的语言

本地翻译存储

本页目录

本地翻译存储

本页目录

本地翻译存储

本页目录

GitHub在 GitHub 上加星标

GitHub在 GitHub 上加星标

在 GitHub 上加星标

在 GitHub 上加星标