# General Translation React SDKs (gt-react, gt-next): 使用 SPA 翻译进行开发
URL: https://generaltranslation.com/zh/docs/react/guides/developing-spa-translations.mdx
---

title: 使用 SPA 翻译进行开发
description: 介绍如何在开发单页 React 应用时预览 General Translation 的翻译。
related:
  links:
    - /docs/react/guides/storing-translations
    - /docs/react/guides/configuring
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/managing-locales

---

# 使用 SPA 翻译进行开发

开发翻译可让你在编辑 SPA 时预览翻译后的内容。使用此功能需要 GT 编译器 和开发 API 密钥。

**前提条件：**

* 一个已按 [SPA Quickstart](/docs/react/react-spa-quickstart) 配置好的单页 React 应用
* 一个以 `gtx-dev-` 开头的开发 API 密钥

## 设置 [#setup]

### 1. 安装编译器

将 `@generaltranslation/compiler` 作为开发依赖安装：

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm i -D @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add --dev @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add --dev @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add --save-dev @generaltranslation/compiler
    ```
  </Tab>
</Tabs>

### 2. 添加编译器插件

为你的打包工具添加相应的插件。以 Vite 为例：

```ts title="vite.config.ts"
import react from '@vitejs/plugin-react';
import { vite as gtCompiler } from '@generaltranslation/compiler'; // [!code highlight]
import { defineConfig } from 'vite';
import gtConfig from './gt.config.json'; // [!code highlight]

export default defineConfig({
  plugins: [gtCompiler({ ...gtConfig }), react()], // [!code highlight]
});
```

<Accordions>
  <Accordion title="不使用 Vite？">
    `@generaltranslation/compiler` 还导出了 `webpack`、`rollup` 和 `esbuild` 插件。导入与你使用的 bundler 对应的插件。

    ```ts
    import { webpack as gtCompiler } from '@generaltranslation/compiler';
    ```
  </Accordion>
</Accordions>

### 3. 添加开发凭据

在 [dash.generaltranslation.com](https://dash.generaltranslation.com/signup) 获取开发 API 密钥，或运行：

```bash
npx gt auth
```

然后将你的 project ID 和开发 API 密钥添加到 `.env.local` 中：

```bash title=".env.local"
VITE_GT_PROJECT_ID="your-project-id"
VITE_GT_DEV_API_KEY="your-dev-api-key"
```

然后，将这些参数传给初始化函数：

```ts
await initializeGTSPA({
  ...gtConfig,
  projectId: import.meta.env.VITE_GT_PROJECT_ID,
  devApiKey: import.meta.env.VITE_GT_DEV_API_KEY,
  loadTranslations,
});
```

<Callout type="warn">
  **仅限开发环境：** 请使用以 `gtx-dev-` 开头的键。切勿在浏览器代码中暴露以 `gtx-api-` 开头的生产环境键。
</Callout>

### 4. 开始开发

启动开发服务器，并切换到非默认区域设置。编辑可翻译内容时，编译器会记录这些更改，`gt-react` 会请求更新后的开发翻译。
## Next steps

- /docs/react/guides/storing-translations
- /docs/react/guides/configuring
- /docs/react/guides/translating-jsx
- /docs/react/guides/managing-locales