迁移

概述

本指南将介绍将已经使用i18n库的项目迁移到gt-react所需的步骤。

我们还将提供一些技巧和建议，以使迁移过程尽可能顺利。

前提条件

一个当前正在使用其他i18n库的项目。
对gt-react库的基本了解。

为什么要迁移？

有很多理由可能促使您将项目迁移到gt-react。

以下只是其中几个原因：

不再需要JSON文件： 再也不用在JSON文件中管理翻译。所有内容都与代码内联存放，正好位于它们应该在的地方。
自动翻译： 使用我们的CLI工具生成高质量、上下文感知的翻译。您再也不必等待翻译了。
在开发环境中试验： 通过翻译热重载，在开发过程中轻松尝试不同的翻译。

安装设置

安装 gt-react 和 gtx-cli 命令行工具。

npm i gt-react
npm i --save-dev gtx-cli

yarn add gt-react
yarn add --dev gtx-cli

bun add gt-react
bun add --dev gtx-cli

pnpm add gt-react
pnpm add --save-dev gtx-cli

在你的项目根目录下创建一个 gt.config.json 文件，包含一个 defaultLocale 属性和一个 locales 数组。

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["en", "fr", "es"]
}

在你的应用根组件中添加 <GTProvider> 组件，并将 config 对象作为 props 传入。

import { GTProvider } from 'gt-react'
import config from './gt.config.json'

<GTProvider {...config}>
  <App />
</GTProvider>

如需更详细的步骤，请参阅项目快速入门指南。

此时，你有 3 个选项：

完全将你的整个项目迁移到 gt-react，并移除旧的 i18n 库。
完全迁移项目，但继续使用旧 i18n 库中的字典。
目前继续使用旧的 i18n 库，仅将部分项目迁移到 gt-react。

有关每个选项的更多细节，请参阅迁移策略部分。

迁移策略

选项 1：完全迁移整个项目

这个选项是最直接的，但也需要一次性进行最多的代码更改。

在设置好项目后，你需要搜索旧 i18n 库的所有实例，并将它们替换为 gt-react。

如果你的应用使用了 React hooks，比如 useTranslation，请在代码库中搜索所有 useTranslation 实例并将它们替换为 useGT。

然后，你需要将所有字符串键替换为它们的实际字符串值。

例如，如果你的旧代码是这样的：

dictionary.json

{
  "hello": {
    "description": "Hello, world!"
  }
}

export default function MyComponent() {
  const { t } = useTranslation()
  return <div>{t('hello.description')}</div>
}

你需要将其替换为：

export default function MyComponent() {
  const { t } = useGT()
  return <div>{t('Hello, world!')}</div>
}
// 或者
export default function MyComponent() {
  return <T>Hello, world!</T>
}

对旧 i18n 库的所有实例都执行此操作。

选项 2：完全迁移项目，但继续使用旧 i18n 库的字典

假设你想将项目迁移到 gt-react，但想继续使用旧 i18n 库的字典，并且只对新内容使用 GT 内联功能。

在这种情况下，你可以做类似选项 1 的事情：

找到旧 i18n 库的所有实例，比如 useTranslation hooks，并将它们替换为 useTranslations hooks。

useTranslations hook 的行为与 useTranslation hooks 非常相似，你可以以相同的方式使用它。

import { useTranslation } from 'react-i18next'
export default function MyComponent() {
  const { t } = useTranslation()
  return <div>{t('hello.description')}</div>
}

import { useTranslations } from 'gt-react'
export default function MyComponent() {
  const t = useTranslations()
  return <div>{t('hello.description')}</div>
}

在配置方面，你需要在项目根目录或 src 目录中创建一个 dictionary.[js|ts|json] 文件。将旧字典文件的内容复制到这个新文件中，然后将其传递给 GTProvider 组件。

import { GTProvider } from 'gt-react'
import dictionary from './dictionary.json'
import config from './gt.config.json'

<GTProvider {...config} dictionary={dictionary}>
  <App />
</GTProvider>