工作原理

Lingo.dev 编译器通过智能代码分析和 AI 驱动的翻译，在构建时自动完成 React 应用的本地化。

当您运行构建流程时，编译器会执行以下步骤，使您的应用无需更改源代码即可支持多语言：

1. AST 分析

Lingo.dev 编译器 处理您的 React 代码的抽象语法树 (AST)，以确定性地识别可翻译内容。它会分析：

  • JSX 文本内容和属性
  • React 组件中的字符串字面量（对字符串字面量的支持即将推出。）
  • 动态内容模式

编译器理解 React 组件的边界，并保留上下文信息以确保翻译的准确性。

2. 内容提取

编译器在保留以下内容的同时提取可翻译的字符串：

  • 组件层次结构和上下文
  • React 特定模式，如 props 和 state
  • 代码结构和格式

仅提取人类可读的内容。技术标识符、代码片段和不可翻译的元素会被自动过滤掉。

3. 指纹和版本管理

内容指纹确保高效的翻译管理：

  • MD5 哈希 创建唯一的内容指纹
  • 版本化字典 跟踪 lingo/ 目录中的更改
  • Git 集成 维护翻译历史
  • 增量处理 仅翻译新增或修改的内容

这种方法最大限度地降低了翻译成本，并在构建中保持一致性。

4. AI 翻译

翻译通过具有上下文理解能力的 AI 模型完成：

  • GROQ 集成提供快速、高质量的翻译
  • 上下文边界帮助 AI 理解组件关系
  • 一致的术语贯穿整个应用程序
  • 批量处理以优化性能

编译器发送上下文信息，确保翻译自然地融入您的 UI 组件。

5. 代码注入

翻译内容在不修改源文件的情况下注入到构建中：

  • 构建时处理创建本地化版本
  • 框架集成支持 Next.js、Vite 和 React Router
  • 优化的包按语言加载字典
  • 运行时效率通过预编译翻译实现

最终结果是生产就绪的多语言 React 应用，具有最小的运行时开销。

框架集成

Next.js 应用路由器

编译器通过配置系统与 Next.js 集成：

// next.config.js
export default lingoCompiler.next(config)(nextConfig);
  • 服务器组件 在构建时处理
  • 客户端组件 接收优化的翻译包
  • 自动路由 支持基于语言环境的 URL

React Router / Remix

通过 Vite 插件架构集成：

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • 服务器端渲染 使用预加载的字典
  • 客户端状态恢复 保持翻译状态
  • 基于路由的代码分割 包括翻译包

Vite

直接的 Vite 插件集成：

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • 热模块替换 在开发过程中更新翻译
  • 构建优化 创建最小化的生产包
  • 资源管理 高效管理翻译文件

开发工作流程

  1. 编写 React 组件 使用自然语言文本
  2. 运行开发服务器 - 编译器提取并翻译内容
  3. 审查翻译 在生成的 lingo/ 目录中
  4. 提交翻译文件 到版本控制
  5. 部署 使用内置的多语言支持

生产环境优势

  • 零运行时成本 - 翻译在预编译时完成
  • 最优的包大小 - 仅包含使用的翻译
  • SEO 友好 - 正确的基于语言环境的渲染
  • 一致的用户体验 - 专业的翻译质量

编译器创建的生产应用程序为每种支持的语言提供了原生构建的体验，同时保持了原始的开发工作流程。

下一步