|Labs
预约演示平台
React(Lingo Compiler)
Alpha
React (MCP)React(i18n)旧版 CLI(v0)
已废弃

Lingo.dev Compiler

  • 工作方式
  • 快速开始
  • Compiler 快速上手

框架

  • Next.js 集成
  • Vite + React

指南

  • 语言切换
  • 自动复数处理
  • 手动覆盖
  • 构建模式
  • 项目结构
  • 翻译服务提供商
  • 自定义 locale 解析器
  • 开发工具

参考

  • 最佳实践
  • 配置参考
  • 故障排查
  • 迁移指南
  • 优化
  • 输出格式

项目结构

Alpha

Lingo.dev Compiler 目前仍处于 alpha 阶段。功能尚不稳定,不建议用于生产环境,且 API 可能会在不同版本之间发生变动。

Lingo.dev Compiler 会在项目根目录下创建并维护一个 .lingo/ 目录,用于存放翻译元数据和缓存。理解这个目录结构,有助于你在版本控制中管理翻译、排查缺失翻译,并优化构建性能。

.lingo/ 目录#

编译器会在首次构建时自动创建该目录,其中包含构建流程所需的全部翻译元数据:

text
.lingo/
  metadata.json              # Translation cache and content hashes
  locale-resolver.server.ts  # Optional: custom server-side locale resolver
  locale-resolver.client.ts  # Optional: custom client-side locale resolver

metadata.json#

这是 .lingo/ 目录中的核心文件,存储内容包括:

  • 内容哈希 - 每条可翻译字符串对应的稳定哈希标识符
  • 缓存翻译 - 为每个语言环境组合生成的翻译结果
  • 源文本快照 - 翻译生成时的源文本,用于检测变更

编译器会在每次构建开始时读取该文件。哈希匹配的字符串会直接复用缓存翻译;哈希已变更或缺失的字符串,则会发送给已配置的翻译提供方。

提交到版本控制

请务必将 .lingo/metadata.json 提交到代码仓库。生产构建在 cache-only 模式下只会从该文件读取翻译;如果没有提交,生产构建将直接失败。

.gitignore 注意事项#

不要把 .lingo/ 加入 .gitignore。这个目录应该纳入版本控制。以下是使用该编译器的项目中常见的 .gitignore 配置:

gitignore
# Do NOT ignore .lingo/ - it contains translation cache
node_modules/
dist/
.env

sourceRoot#

sourceRoot 选项用于指定编译器扫描哪个目录,以查找可翻译的 React 组件:

ts
{
  sourceRoot: "./app",  // Next.js App Router
  // or
  sourceRoot: "src",    // Vite + React
}

编译器会递归扫描 sourceRoot 下所有 .tsx、.ts、.jsx 和 .js 文件,提取其中可翻译的 JSX 内容。该目录之外的文件不会被处理。

sourceRoot 值扫描范围
"./app"扫描 app/ 目录下的所有文件(Next.js 约定)
"src"扫描 src/ 目录下的所有文件(Vite 约定)
"."扫描项目根目录下的所有文件(适用于带共享包的 monorepo)

更大的 sourceRoot 范围意味着要扫描更多文件,也会拉长构建时间。因此应尽量收窄范围。如果只有部分文件需要翻译,请改用 useDirective 选项。

使用“use i18n”的按需启用模式#

默认情况下,编译器会翻译 sourceRoot 中的所有 JSX 文本。若要切换为按需启用模式,请设置 useDirective: true:

ts
{
  useDirective: true,
}

在按需启用模式下,只有以 'use i18n' 指令开头的文件才会被处理:

tsx
'use i18n';

export function Welcome() {
  return <h1>Welcome to our app</h1>;
  // This text IS translated
}

未包含该指令的文件会被跳过:

tsx
export function InternalAdmin() {
  return <h1>Admin Dashboard</h1>;
  // This text is NOT translated
}

何时使用按需启用模式#

场景推荐模式
所有内容都需要翻译的小型应用默认(useDirective: false)
只有部分用户页面需要翻译的大型代码库按需启用(useDirective: true)
同时包含内部与外部共享组件的 monorepo按需启用(useDirective: true)
渐进式接入——为现有应用添加 i18n按需启用(useDirective: true)

lingoDir#

lingoDir 选项可用于更改元数据目录的位置:

ts
{
  lingoDir: ".lingo",  // Default
  // or
  lingoDir: ".translations",  // Custom location
}

如果 .lingo/ 与项目中已有目录发生冲突,这个选项会很有帮助。

下一步#

构建模式
了解 metadata.json 在各模式中的作用
自定义语言环境解析器
向 .lingo/ 中添加解析器文件
配置参考
sourceRoot、lingoDir 与 useDirective 选项
最佳实践
版本控制与项目配置建议

这个页面对你有帮助吗?

Max PrilutskiyMax Prilutskiy·已更新 4 个月前·1 分钟阅读