返回

compiler@1.3.0

Ernest McCarter avatarErnest McCarter
compilerauto-jsx-injectiongt-reacti18n

概述

GT compiler 现已支持面向客户端 React SPA 的自动 JSX 注入。它会在 build 时自动将可翻译的 JSX 文本包装进 <T> 组件中，因此你无需手动处理。

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

这一功能建立在随 t() 函数一同引入的同一套基于 bootstrap 的 SPA setup之上——你仍然需要 bootstrap() 入口点，以及相同的客户端架构。

软件包版本
@generaltranslation/compiler1.3.0
gt-react10.17.0
gt-next6.15.2

设置

安装

npm install @generaltranslation/compiler

Vite

// 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})],
})

gt.config.json

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

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

它的功能

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

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

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

之后——直接编写 JSX：

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

编译器会在构建阶段注入 <T> 包装组件。无需导入、无需 ID、无需样板代码。

变量注入

动态表达式也会被自动包裹在 <Var> 中：

// 你写的：
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>
  );
}

链接