工作原理

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

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

1. AST 分析

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

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

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

2. 内容提取

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

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

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

3. 指纹识别与版本管理

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

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

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

4. AI 翻译

翻译通过具有上下文理解能力的 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 友好 - 正确的语言特定渲染
  • 一致的用户体验 - 专业的翻译质量

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

LLM 提供商

选项 1. Lingo.dev 引擎

Lingo.dev Compiler 可以使用 Lingo.dev Engine 作为您的 AI 翻译引擎。

它提供动态模型选择、针对每种语言对的自动路由、自动模型回退、考虑过去翻译的翻译记忆，以及支持项目领域特定术语的术语表功能。提供免费和付费选项，免费 Hobby 计划对于大多数项目来说已经足够。

要进行身份验证，请运行：

npx lingo.dev@latest login

将 Lingo.dev Engine 配置为您的提供商，例如用于 Next.js：

lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: "lingo.dev",
})(nextConfig);

重要细节。 如果您使用的是 Brave 浏览器，或者您的浏览器扩展阻止了身份验证流程，您可以通过将 LINGODOTDEV_API_KEY 环境变量手动添加到 .env 文件中来进行手动身份验证：

LINGODOTDEV_API_KEY=...

选项 2. 替代 LLM 提供商

编译器支持以下 LLM 提供商：

您需要创建一个账户并从您选择的 LLM 提供商处获取 API 密钥以进行配置。

注意： 确保激活您在 LLM 提供商的账户并接受其服务条款后再在编译器中使用。LLM 提供商可能会在您完成所有步骤之前阻止您使用其平台。每个 LLM 提供商的步骤可能有所不同。

配置您选择的 LLM 提供商，例如在 Next.js 应用中使用 Groq：

lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: {
    "*:*": "groq:qwen/qwen3-32b", // GROQ
    // "*:*": "google:gemini-2.0-flash", // Google AI
    // "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // OpenRouter
    // "*:*": "ollama:mistral-small3.1", // Ollama
    // "*:*": "mistral:mistral-small-latest", // Mistral
  },
})(nextConfig);

将您的 API 密钥添加到环境中以配置您的 LLM 提供商：


# .env

GROQ_API_KEY=gsk_...
GOOGLE_API_KEY=...
OPENROUTER_API_KEY=...
MISTRAL_API_KEY=...

我们希望支持更多的 LLMs —— 联系我们 或 发送 Pull Request！

下一步