今天，我们来介绍Lingo.dev 编译器：一个 npm 包，可以帮助你构建多语言的 React 应用，而无需修改现有的 React 代码。
它不需要提取 i18n 关键字，也不用把文本用标签包裹起来。
完全免费和开源。
它是这样工作的，
如何在不改动源代码的情况下适配和翻译 React 组件？
传统的国际化需要重写整个代码库——将字符串提取到 JSON 文件中，用翻译标签包裹组件，并维护单独的词典。
我们心想：“如果那其实并不必要呢？”
AST于是我们想出了一个办法，在构建时处理前端应用的抽象语法树，并在构建时进行本地化处理。
但是棘手的部分在于：我们必须解决如何把需要一起翻译的项目确定性地分组。
例如，这段内容会被作为一个整体来处理翻译。
你觉得这幅图片怎么样？
这不是三个孤立起来就没有意义的片段。这样做可以避免翻译错误，并保持大型语言模型需要的语义关系。
HMR最大的技术不确定性在于热模块替换的兼容性。
我们很幸运这次解决了问题，且解决得很快。想象一下这样的场景：你在用英文编写代码，却发现需要立刻看到你的用户界面在西班牙语或日语下的显示效果。文本的扩展或收缩可能会以你意想不到的方式影响布局。
我们重新设计了处理器，让它能够与该技术HMR完美配合，这样就不用重复构建来查看翻译了。
性能大型代码库，包括我们自己的，不能容忍慢吞吞的增量构建，因此性能就成了另一个大问题。我们这里说的是一次处理成千上万的组件，每个组件可能会有一堆可翻译的字符串。
我们的解决方案：通过积极的缓存机制在不同运行之间存储AST分析结果，并且高度并行化的LLM调用过程。还包括Groq。只有更改的组件会被重新处理，其他部分则直接命中缓存。
顺便说一句有意思的是，在大型语言模型（LLM）出现之前，这种方法在技术上是可行的，但实际上几乎没什么用处。你仍然需要熟悉你产品领域的翻译人员来进行精确翻译。AST处理只是昂贵的前期准备，最终还是得靠人来做。
然而现在，借助上下文感知模型，我们可以自动生成高质量的翻译。这就是为什么在编译过程中，AI驱动的本地化不仅成为可能，而且正成为现代用户界面中最实用的方案。
我们预测这种方法会在编译时成为标准。想一想：为什么开发者要维护单独的翻译文件，而编译器可以直接生成这些文件呢？
主要的i18n库将会采用类似的基于AST的模型。像 Next.js 和 Remix 这样的框架最终会直接将这内置到它们的核心中。传统的提取-包装-维护循环正在变得过时，这种做法正在被淘汰。
框架体系这就是我们处理框架集成的方式：
// Next.js
export default lingoCompiler.next({
sourceLocale: "en", // 源语言
targetLocales: ["es", "fr", "de"], // 目标语言列表
models: { "*:*": "groq:mistral-saba-24b" } // 模型配置
})(nextConfig); // next配置切换到全屏 退出全屏
与 Next.js App Router、React Router、Remix 和 Vite 兼容。无需担心运行时开销，所有的翻译都会被预编译到优化的包中。
编译器工具使用MD5指纹技术来创建带有版本的字典。
// 在 lingo/ 目录下生成的
{
"content": "欢迎来到我们这里!",
"fingerprint": "a1b2c3d4e5f6",
"translations": {
"es": "¡Bienvenido a nuestra plataforma!",
"fr": "Bienvenue sur notre plateforme!"
}
}
点击这里切换到全屏模式，点击这里退出全屏
仅在内容改变时才重新翻译。Git集成用于跟踪翻译历史。差异处理有助于降低成本。
奖金还有一个我没提到的功能：编译器也能优雅地应对动态的 React 模式或样式：
// 编译器优雅地处理动态内容
function UserGreeting({ name, count }) {
return (
<div>
欢迎回来，{name}！您有 {count} 条信息。
</div>
);
}
// 在保持 React 行为的同时翻译静态文本
// "Welcome back" + "You have" + "messages" 被翻译
// {name} 和 {count} 保持动态不变进入全屏，退出全屏
我们做到了两全其美，不用改代码，还能完全兼容React。
工作流程开发流程非常简单：
-
用自然语言文本编写 React 组件
-
启动开发服务器 - 编译器提取并翻译内容，使用你的 API 密钥
3。将翻译文件加入版本控制系统。
- 部署时带有多语言支持
无需管理配置文件。无需手动提取文本字符串。只需构建即可打包。
下一步试试看，感受一下，告诉我们你的感受！
下面是如何开始：
运行此命令来安装 lingo.dev:
npm i lingo.dev
文档链接: https://lingo.dev/compiler
GitHub: https://github.com/lingodotdev/lingo.dev （GitHub 页面）
你可以在这里看视频: https://www.youtube.com/watch?v=sSo2ERxAvB4
Discord频道：https://lingo.dev/go/discord（加入我们）
我们正在解决自己的痛点，非常兴奋能与开发社区分享这一成果！
我们刚在HackerNews上线，来看看我们吧，点个赞，回个复吧 😅
这是一个新闻聚合网站：https://news.ycombinator.com
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
