Alpha
Lingo.dev Compiler 目前仍处于 alpha 阶段。产品尚不稳定，不建议在生产环境中使用，API 也可能在不同版本之间发生变化。
Lingo.dev Compiler 是一个面向 React 应用的免费开源构建时翻译系统。它能识别 JSX 中可翻译的文本，结合完整的组件上下文生成 AI 驱动的翻译，并在构建过程中将其嵌入各语言环境对应的 bundle 中。你的源代码无需改动——不用手动维护翻译 key 文件，也不用在运行时单独加载词典。
查看实际效果：X 上的实时演示
前后对比#
// Your code - unchanged
export function Welcome() {
return <h1>Welcome to our app</h1>;
}
// Renders "Bienvenido a nuestra aplicacion" in Spanish无需改动代码。翻译在编译阶段就已确定，并生成针对不同语言环境优化的 bundle。
与传统 i18n 库有何不同#
| 传统 i18n 库 | Lingo.dev Compiler | |
|---|---|---|
| 翻译管理 | 手动——需要自行创建并维护 key 文件 | 自动——Compiler 会直接从 JSX 中提取可翻译字符串 |
| 是否需要修改代码 | 每个字符串都要包裹在 t() 调用中 | 无需修改——照常编写 JSX 即可 |
| 翻译加载方式 | 运行时加载独立的词典文件 | 构建时直接嵌入各语言环境的 bundle 中 |
| 翻译来源 | 手动维护或接入外部 TMS | 结合完整组件上下文，由 AI 自动生成 |
| 词典获取 | 运行时拉取或导入翻译文件 | 无需单独拉取——翻译就是 bundle 的一部分 |
构建流程#
AST 分析
Compiler 会借助 Babel 将 React 代码解析为抽象语法树（Abstract Syntax Tree）。随后识别其中可翻译的内容，包括文本节点、字符串属性（alt、aria-label、placeholder）以及模板表达式。
内容提取
每个可翻译字符串都会生成一个稳定的哈希标识符。Compiler 会保留组件上下文、富文本结构（嵌套的 <strong>、<em>）以及插值占位符。相关元数据则存储在 .lingo/metadata.json 中。
翻译生成
在开发环境中，伪翻译器会即时生成模拟翻译（无需 API 调用）。在 CI 中，已配置的 LLM 提供方会结合完整组件上下文生成真实翻译——包括文件位置、周边元素以及插值语义。只有新增或变更的字符串才会被翻译——Compiler 会利用内容哈希跳过未变化的字符串。
代码注入
翻译查找逻辑会被注入到 JSX 中。Compiler 会为每个语言环境添加轻量级、基于哈希的查找调用，对应访问嵌入式词典。你的源代码始终不会被修改。
Bundle 优化
系统会为每个语言环境生成独立 bundle。每个组件只会包含自己实际用到的翻译。借助死代码消除和 tree-shaking，bundle 体积可保持精简。
支持的框架#
| 框架 | 集成方式 |
|---|---|
| Next.js（App Router） | withLingo() 配置包装器——支持 RSC、Webpack 和 Turbopack |
| Vite + React | lingoCompilerPlugin——提供完整 HMR 支持的 Vite 插件 |
核心特性#
- 默认自动化——除非你启用
'use i18n'指令模式，否则所有 JSX 文本都会自动翻译 - 无需拉取词典——翻译直接嵌入各语言环境的 bundle 中，无需额外加载文件
- 构建模式——开发环境使用伪翻译器，CI 使用真实翻译，生产环境仅使用缓存
- 手动覆盖——通过
data-lingo-override属性实现精细控制 - 自定义语言环境解析器——可自行实现语言环境检测与持久化逻辑
- 自动复数处理——支持 ICU MessageFormat 复数形式
- 开发工具——包括伪翻译器和浏览器内翻译编辑器
