返回

gt-react@10.19.0

Ernest McCarter avatarErnest McCarter
gt-react浏览器热重载开发体验i18n

概览

gt-react/browser 现在支持开发环境下的译文热重载。此前，每次你在浏览器端 GT 应用中修改代码后，都必须重新运行翻译命令才能看到更新后的译文。在此版本中，译文会在开发期间于 runtime 预先计算——不再需要手动重新翻译。

这让 gt-react/browser 与标准 gt-react 的翻译工作流保持一致。请注意，gt-react/browser 仅适用于单页应用 (SPA) ——如果你使用的是服务器端渲染框架，请使用 gt-react (不要使用 gt-react/browser) 。此功能也仅限开发环境——生产环境 build 仍会像以前一样使用预先计算的译文。

工作原理

编译器插件 会在模块级别注入 runtime 翻译调用。在这些调用解析完成之前，rendering 会被挂起。

启用 devHotReload 后，编译器会添加 GtInternalRuntimeTranslateString 和 GtInternalRuntimeTranslateJsx 调用，在模块加载时预热翻译缓存。对于 JSX，译文也可以通过 <T> 组件自身内部的 Suspense 调用来解析，而不是在模块级别加载。

由于译文是在 runtime 获取的，因此只有用户实际访问的语言才会被翻译——不同于 build-time 方案，后者即使你从未查看过，也必须在每次开发 build 时为每个已配置的语言生成译文。

在 runtime 获取的译文会缓存在 localStorage 中，因此刷新页面后仍会保留。

配置

1. 添加编译器插件

开发环境的热重载需要 GT 编译器插件。如果你还没添加，请将它加入 bundler 配置中——例如 Vite plugin：

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

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

其他 bundler 的相关信息，请参阅 gt-react setup docs。

2. 在 gt.config.json 中启用开发环境热重载

{
  "files": {
    "gt": {
      "parsingFlags": {
        "devHotReload": true
      }
    }
  }
}

默认情况下，devHotReload: true 会为字符串启用热重载，但不会为 JSX 启用。之所以默认关闭 JSX，是因为 <T> 组件已经会通过 Suspense 在 runtime 处理 JSX 的翻译，因此无需阻塞模块加载来等待它们完成解析。如有需要，你也可以分别对它们进行设置：

{
  "files": {
    "gt": {
      "parsingFlags": {
        "devHotReload": {
          "strings": true,
          "jsx": false
        }
      }
    }
  }
}

3. 将凭据传给 bootstrap()

你还需要将项目 ID、开发用 API 密钥以及 loadTranslations 函数直接传给 bootstrap() 调用。这是当前实现的一个小限制，我们计划在未来的版本中将其简化。

await bootstrap({
  ...gtConfig,
  loadTranslations,
  projectId: import.meta.env.VITE_GT_PROJECT_ID,
  devApiKey: import.meta.env.VITE_GT_DEV_API_KEY
})

相关链接