告别手动搬砖： JoyCode + i18n-mcp 实现前端项目多语言自动化

1. 背景与痛点：存量代码的“多语言噩梦”

在前端开发中，将一个成熟的中文存量项目进行国际化多语言（i18n）改造，往往面临着以下困境：

•工作量巨大： 项目包含数百个 .vue/.js/.ts 等文件，散落着成千上万个硬编码的中文字符串。

•人工易错： 手动提取容易遗漏，且极其枯燥，极易产生 Copy/Paste 错误。

•命名困难： 为每一个中文词条想一个语义化的英文 Key（如 homePageTitle）不仅耗时，而且难以保证团队风格统一。

•维护成本高： 翻译文件（zh.ts/en.ts）的维护和代码中的替换需要同步进行，稍有不慎就会导致报错。

如果按照传统的人工查找替换方式，预计需要耗费数周的人力。为了打破这一僵局，我决定利用 JoyCode 结合我开发的 i18n-mcp 工具，打造一套自动化的国际化多语言解决方案。


 

2. 解决方案：JoyCode + i18n-mcp

我基于 MCP (Model Context Protocol) 开发了一个工具 i18n-mcp，通过 JoyCode 的 AI 能力来调度和执行以下三个核心步骤，实现了从“提取”到“替换”的全链路自动化。

流程图

以下是i18n-mcp的流程图（由JoyCode生成）


 


 

核心流程拆解

第一步：智能提取中文与去重

i18n-mcp 自动扫描所有源文件。利用正则或 AST（抽象语法树）精准识别代码中的中文字符串（包括 Template、Script 和 JSX 部分）。

•全量扫描（full-project-scan工具）： 文件过多的时候，全量扫描会有问题。可以通过指定文件夹的方式，扫描该文件夹下面的文件。

•增量扫描（git-change工具）：针对git变更的文件，进行扫描。精准定位变更文件，仅处理本次变更涉及的代码，大幅提升效率。

•智能去重： 对提取出的文本进行去重，确保相同的中文文案（如“确认”、“取消”）只生成一个 Key，避免冗余。

第二步：AI 辅助翻译与文件生成

•翻译缓存： 优先查询 数据存储层 中的 Translation Cache，已翻译过的文案直接复用，显著降低 Token 消耗并加速流程。

•自动化翻译： 提取的中文列表没有在缓存中或zh文件中的，被发送给 LLM，自动翻译成英文。

•语义化 Key 生成： 区别于传统 Hash 值，LLM 根据代码上下文（Context）自动生成符合语义的 Key（如将“请输入密码”生成为 pleaseInputPassword），提升代码可读性。

•文件落地： 自动在 lang 文件夹下生成标准的 zh.ts 和 en.ts 文件。


 

生成示例： zh.ts: { "pleaseSelect": "请选择" } en.ts: { "pleaseSelect": "Please Select" }


 


 

第三步：一键代码替换

•变更预览 (Preview)： 在实际修改前，可调用 preview-changes 工具展示即将变更的代码对比，确保修改符合预期。

•AST 节点替换： 使用 extract-and-replace 工具，将源代码中的硬编码字符串精准替换为国际化方法（如 $t('pleaseSelect')）。

•无损格式保持： 基于 AST 的替换策略能够完美保留原代码的缩进、换行和注释，修改后的代码无需二次 Lint 即可直接提交。


 


 

3. 成果与收益：从“数周”到“数小时”

通过引入 JoyCode + i18n-mcp 的实践，我在项目的国际化改造中取得了显著的成效：

审核编辑 黄宇