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-mcplatest ], env: {} } } }效果配置之后输入prompt “调用i18n-mcp的auto-i18n-process方法”效果如下5. 总结尽管目前 i18n-mcp 仍存在一些不足例如在全面扫描大量文件时可能出现连接错误、翻译和替换结果不够准确等问题仍需人工进行二次校验但其在短时间内辅助开发的价值依然显著。在本次实践过程中我主要通过 JoyCode 的交互式问答完成开发工作。JoyCode 不仅在代码补全方面发挥了重要作用更凭借其强大的智能调度和自动化执行能力成为高效处理复杂任务的核心中枢。结合 i18n-mcp 的开发AI技术的深度赋能得以充分体现大幅提升了开发的效率。后续我将持续研究 AI 在前端开发中的落地场景充分发挥 AI 辅助开发的强大能力。通过深入探索和应用 AI 技术进一步释放其在业务创新与效率提升方面的巨大潜力。
告别手动搬砖： 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-mcplatest ], env: {} } } }效果配置之后输入prompt “调用i18n-mcp的auto-i18n-process方法”效果如下5. 总结尽管目前 i18n-mcp 仍存在一些不足例如在全面扫描大量文件时可能出现连接错误、翻译和替换结果不够准确等问题仍需人工进行二次校验但其在短时间内辅助开发的价值依然显著。在本次实践过程中我主要通过 JoyCode 的交互式问答完成开发工作。JoyCode 不仅在代码补全方面发挥了重要作用更凭借其强大的智能调度和自动化执行能力成为高效处理复杂任务的核心中枢。结合 i18n-mcp 的开发AI技术的深度赋能得以充分体现大幅提升了开发的效率。后续我将持续研究 AI 在前端开发中的落地场景充分发挥 AI 辅助开发的强大能力。通过深入探索和应用 AI 技术进一步释放其在业务创新与效率提升方面的巨大潜力。
