工作原理

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

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

1. AST 分析

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

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

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

2. 内容提取

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

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

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

3. 指纹和版本管理

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

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

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

4. AI 翻译

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

  • AI 模型集成 通过 Lingo.dev 引擎或支持的 LLM 提供商 提供快速、高质量的翻译
  • 上下文边界 帮助 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 编译器 可以使用 Lingo.dev 引擎 作为您的 AI 翻译引擎。

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

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

bash npx lingo.dev@latest login


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

```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:mistral-saba-24b", // 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);

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


# .env

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

我们希望支持更多的 LLM - 联系我们 或 向我们发送拉取请求！

下一步