设置

用法

npx gtx-cli setup

概述

gtx-cli setup 命令会自动设置您的项目，使其可以使用 gt-next 或 gt-react 进行翻译。它通过解析项目的文件树并使用 babel 将 <T> 组件包裹在静态内容周围来实现这一点。任何动态内容将自动用 <Var> 组件包裹。

此命令应该只运行一次，即在您首次国际化您的项目时。对于后续更改，您应该使用 scan 命令来更新您的项目。

有关更多详细信息，请参阅 scan 命令。

src/app/Home.js

import { T, Var } from 'gt-next';  
 
export default function Home({ user }) {
  return (
    <div>
      <T id="app.home.0">
        Hello, World! My name is <Var>{ user.name }</Var>
      </T>
    </div>
  );
}

如果您的项目使用的是 Next.js App Router，设置命令将在适当的 layout.jsx 文件中添加一个 <GTProvider> 组件。

参数

参数	描述	类型	可选	默认值
`--src <path>`	要扫描的源目录	`string`	`true`	`./src && ./app && ./pages && ./components`
`--config <path>`	GT 配置文件的路径	`string`	`true`	`"gt.config.json"`

行为

配置文件

首次运行 CLI 工具时，它将尝试在项目根目录中创建一个 gt.config.json 文件。该文件包含用于翻译内容的项目元数据。

阅读更多关于 gt.config.json 文件的信息这里。

`id` 属性

设置命令提供了为 <T> 组件自动生成唯一 ID 的选项。这对于使用大量 <T> 组件并希望避免手动为每个组件分配唯一 ID 的项目非常有用。

这个 id 对于在翻译编辑器和控制台中引用特定翻译很有用。

`<T>` 注入行为

基本情况

CLI 将在尽可能高的级别包裹 JSX 元素。这意味着如果组件尚未被包裹，它将在整个组件外部包裹一个 <T> 组件。

<div>Hello, World!</div> -> <T id="SOME_ID"><div>Hello, World!</div></T>

有关 <T> 组件如何包裹的更多详细信息，请参阅参考。

`<GTProvider>` 行为

对于 Next.js App Router，设置命令将自动在适当的 layout.jsx 文件中将 <T> 组件包裹在 <GTProvider> 组件中。

此外，它还会在 next.config.js 文件中为您设置 withGTConfig Next.js 插件。

自动格式化

设置命令将根据您项目的配置，使用 Prettier、Biome 或 ESLint 自动格式化对代码库所做的更改。

设置

在本页面