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配置如下
perl
{
"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 技术，进一步释放其在业务创新与效率提升方面的巨大潜力。