# gt-react: General Translation React SDK: SPA 开发环境翻译
URL: https://generaltranslation.com/zh/docs/react/tutorials/spa-development-translations.mdx
---
title: SPA 开发环境翻译
description: 在开发单页 React 应用时实时查看翻译更新
---

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

**先决条件：**

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

## 第 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` 插件。请导入与你所用打包工具对应的插件。

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

## 第 3 步：添加开发凭据

前往 [dash.generaltranslation.com](https://dash.generaltranslation.com/signup) 获取开发 API Key，或运行：

```bash
npx gt auth
```

然后，将你的项目 ID 和开发 API Key 添加到 `.env.local`：

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

`gt-react` 会在初始化时自动读取这些值。

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

## 第 4 步：开始开发

启动开发服务器，并切换到非默认区域设置。当你编辑可翻译内容时，编译器会记录这一变更，`gt-react` 则会请求更新后的开发环境翻译。

## 下一步

* [SPA Quickstart](/docs/react/tutorials/quickstart-spa) - 查看完整的 SPA 配置
* [Compiler](/docs/react/concepts/compiler) - 了解编译器校验和自动 JSX 注入
* [Production vs Development](/docs/react/concepts/environments) - 了解翻译行为会如何随环境变化