# General Translation Changelog: compiler 1.3.0: 构建时自动为内容添加 `<T>` 包装
URL: https://generaltranslation.com/zh/blog/compiler_v1_3_0.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 
Authors: Ernest McCarter
Published: 2026-04-06

## 概述

GT 编译器 现已支持面向客户端 React SPA 的**自动 JSX 注入**。它会在构建阶段自动将可翻译的 JSX 文本包装进 [`<T>`](/docs/react/reference/components/t) 组件中，因此你无需手动处理。

此前，每个可翻译的字符串都需要手动用 [`<T>`](/docs/react/reference/components/t) 包装。启用 `enableAutoJsxInjection` 后，编译器会替你处理这些。你只需编写普通 JSX，剩下的交给编译器即可。

| 软件包                            | 版本      |
| ------------------------------ | ------- |
| `@generaltranslation/compiler` | 1.3.0   |
| `gt-react`                     | 10.17.0 |
| `gt-next`                      | 6.15.2  |

## 设置

自动 JSX 注入建立在随 [`t()`](/docs/react/reference/functions/t-function) 函数一同引入的[基于 bootstrap 的 SPA 架构](/devlog/gt-react_v10_12_0)之上。你需要先设置 bootstrap 入口点，然后再添加编译器 plugin。

### 1. bootstrap 入口点

创建一个 `bootstrap.tsx`，在应用开始 render 之前加载译文：

```tsx
// bootstrap.tsx（新入口点）
import gtConfig from '../gt.config.json';
import { bootstrap } from 'gt-react/browser';

async function loadTranslations(locale: string) {
  return (await import(`./_gt/${locale}.json`)).default;
}

await bootstrap({
  ...gtConfig,
  loadTranslations,
});

await import('./main.tsx');
```

将 `index.html` 更新为指向 `bootstrap.tsx`，而不是 `main.tsx`。


### 2. 安装编译器

```bash
npm install @generaltranslation/compiler
```


### 3. Vite

```js
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import gtConfig from './gt.config.json'
import { vite as gtCompiler } from '@generaltranslation/compiler'

export default defineConfig({
  plugins: [react(), gtCompiler({gtConfig})],
})
```


### 4. gt.config.json

在配置文件中启用自动 JSX 注入：

```json
{
  "files": {
    "gt": {
      "output": "public/_gt/[locale].json",
      "parsingFlags": {
        "enableAutoJsxInjection": true
      }
    }
  }
}
```


## 它的功能

此前——你必须手动包裹每个可翻译的字符串：

```jsx
import { T } from "gt-react/browser";

export default function Hero() {
  return (
    <T>
      <h1>Welcome to our app</h1>
    </T>
  );
}
```

之后——直接编写 JSX：

```jsx
export default function Hero() {
  return <h1>Welcome to our app</h1>;
}
```

编译器会在构建阶段注入 [`<T>`](/docs/react/reference/components/t) 包装组件。无需导入、无需 ID、无需样板代码。

### 变量注入

动态表达式也会被自动包裹在 [`<Var>`](/docs/react/reference/components/var) 中：

```jsx
// 你写的：
export default function Greeting({ name }) {
  return <p>Hello, {name}!</p>;
}

// 编译器生成：
import { T, Var } from "gt-react/browser";

export default function Greeting({ name }) {
  return (
    <T>
      <p>Hello, <Var>{name}</Var>!</p>
    </T>
  );
}
```

## 链接

* [编译器概念](/docs/react/reference/config)
* [编译器 v1.0.0 开发日志](/devlog/compiler_v1_0_0_gt-next_v6_7_0) — React 编译器的首次发布
* [PR #1158](https://github.com/generaltranslation/gt/pull/1158)

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.