i18next

自动翻译你的 i18next 项目(不到 5 分钟)

概述

本教程将向你展示如何在使用 i18next 时,自动管理你的项目翻译文件。

我们将按照以下四个步骤进行操作:

添加你的环境变量

安装 gtx-cli

创建一个 gt.config.json 文件

提示: 使用 <T> 组件 可以避免处理翻译文件的麻烦。


步骤 1:添加你的环境变量

将你的生产 API 密钥和项目 ID 添加到环境变量中。 这是使用 gtx-cli 工具所必需的。 你可以在 General Translation 控制台 获取这些信息。

.env
GT_API_KEY=<your-api-key>
GT_PROJECT_ID=<your-project-id>

步骤 2:安装 gtx-cli

在你的项目中安装 gtx-cli 工具。

npm i --save-dev gtx-cli
yarn add --dev gtx-cli
bun add --dev gtx-cli
pnpm add --save-dev gtx-cli

步骤 3:创建一个 gt.config.json 文件

在你的项目根目录下创建一个 gt.config.json 文件。

gt.config.json
{
  "defaultLocale": "en",
  "locales": ["zh", "es", "ja"],
  "files": {
    "json": {
      "include": ["messages/[locale]/*.json"]
    },
  },
}

你可以根据需要自定义 gt.config.json 文件。更多信息请参阅 配置 文档。

请更新 json 文件格式,使 include 路径与你的项目结构相匹配。

翻译将保留原始字符串语法。

步骤 4:将 gtx-cli translate 命令添加到你的构建流程中

在构建或 CI 流程中,在构建命令之前添加 gtx-cli translate 命令,以便自动为你的项目添加翻译。

package.json
{
  "scripts": {
    "translate": "npx gtx-cli translate",
    "build": "npm run translate && <your build command>"
  }
}

这将为你所有的语言环境生成翻译,并将其保存到你的项目中。 如果你希望将这些文件提交到你的仓库,可以在提交之前运行此命令。

你已经完成了!现在,每当你的项目发生变化时,所有的翻译 JSON 文件都会自动更新。


注意事项

  • 你可以使用 gtx-cli translate 命令自动为你的项目添加翻译。
  • 如果你想提交你的翻译文件,也可以在提交前运行 gtx-cli translate 命令。
  • 要配置翻译输出路径,请参阅 配置 文档。

后续步骤

这份指南怎么样?