告别手动搬砖： 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 的实践，我在项目的国际化改造中取得了显著的成效：

📊 定量收益

维度	传统人工方式	JoyCode + i18n-mcp	提升幅度
单页面改造耗时	约 10-30 分钟	< 1 分钟	效率提升 90%+
词条遗漏率	高	低	质量显著提升
变量命名耗时	需人工构思	AI 秒级生成	完全自动化

💡 定性收益

1.解放生产力：从枯燥的“搬运工”工作中解脱出来，可以专注于业务逻辑和核心功能的开发。

2.代码规范统一： AI 生成的 Key 风格高度统一（全驼峰），避免了“千人千面”的命名混乱。

3.可维护性增强：建立了自动化的语言包管理机制，后续新增词条只需运行脚本即可。

4. i18n-mcp开发

i18n-mcp是我首次开发MCP，整体难度相对较低。对于前端部分，基于github模板进行开发，随后发布至公司NPM私服即可。

核心代码主要由JoyCode的编码功能协助完成。按照上述核心流程步骤通过问答交互的方式，引导JoyCode完成核心代码的开发工作。

整个i18n-mcp架构图如下所示（架构图亦由JoyCode生成）。

MCP配置如下

{
  "mcpServers": {
    "i18n-mcp": {
      "autoApprove": [],
      "disabled": true,
      "timeout": 180,
      "command": "npx",
      "type": "stdio",
      "transportType": "stdio",
      "args": [
        "-y",
        "@jd/i18n-mcp@latest"
      ],
      "env": {}
    }
  }
}

效果

配置之后，输入prompt “调用i18n-mcp的auto-i18n-process方法”

效果如下：

5. 总结

尽管目前 i18n-mcp 仍存在一些不足，例如在全面扫描大量文件时可能出现连接错误、翻译和替换结果不够准确等问题，仍需人工进行二次校验，但其在短时间内辅助开发的价值依然显著。在本次实践过程中，我主要通过 JoyCode 的交互式问答完成开发工作。JoyCode 不仅在代码补全方面发挥了重要作用，更凭借其强大的智能调度和自动化执行能力，成为高效处理复杂任务的核心中枢。结合 i18n-mcp 的开发，AI技术的深度赋能得以充分体现，大幅提升了开发的效率。

后续，我将持续研究 AI 在前端开发中的落地场景，充分发挥 AI 辅助开发的强大能力。通过深入探索和应用 AI 技术，进一步释放其在业务创新与效率提升方面的巨大潜力。

posted @ 2026-01-19 17:42 京东云开发者阅读(0) 评论(0) 收藏举报

刷新页面返回顶部