1. 背景與痛點(diǎn)：存量代碼的“多語(yǔ)言噩夢(mèng)”

在前端開發(fā)中，將一個(gè)成熟的中文存量項(xiàng)目進(jìn)行國(guó)際化多語(yǔ)言（i18n）改造，往往面臨著以下困境：

?工作量巨大： 項(xiàng)目包含數(shù)百個(gè) .vue/.js/.ts 等文件，散落著成千上萬(wàn)個(gè)硬編碼的中文字符串。

?人工易錯(cuò)： 手動(dòng)提取容易遺漏，且極其枯燥，極易產(chǎn)生 Copy/Paste 錯(cuò)誤。

?命名困難： 為每一個(gè)中文詞條想一個(gè)語(yǔ)義化的英文 Key（如 homePageTitle）不僅耗時(shí)，而且難以保證團(tuán)隊(duì)風(fēng)格統(tǒng)一。

?維護(hù)成本高： 翻譯文件（zh.ts/en.ts）的維護(hù)和代碼中的替換需要同步進(jìn)行，稍有不慎就會(huì)導(dǎo)致報(bào)錯(cuò)。

如果按照傳統(tǒng)的人工查找替換方式，預(yù)計(jì)需要耗費(fèi)數(shù)周的人力。為了打破這一僵局，我決定利用 JoyCode 結(jié)合我開發(fā)的 i18n-mcp 工具，打造一套自動(dòng)化的國(guó)際化多語(yǔ)言解決方案。

?

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

我基于 MCP (Model Context Protocol) 開發(fā)了一個(gè)工具 i18n-mcp，通過 JoyCode 的 AI 能力來(lái)調(diào)度和執(zhí)行以下三個(gè)核心步驟，實(shí)現(xiàn)了從“提取”到“替換”的全鏈路自動(dòng)化。

流程圖

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

?

?

核心流程拆解

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

i18n-mcp 自動(dòng)掃描所有源文件。利用正則或 AST（抽象語(yǔ)法樹）精準(zhǔn)識(shí)別代碼中的中文字符串（包括 Template、Script 和 JSX 部分）。

?全量掃描（full-project-scan工具）： 文件過多的時(shí)候，全量掃描會(huì)有問題?？梢酝ㄟ^指定文件夾的方式，掃描該文件夾下面的文件。

?增量掃描（git-change工具）：針對(duì)git變更的文件，進(jìn)行掃描。精準(zhǔn)定位變更文件，僅處理本次變更涉及的代碼，大幅提升效率。

?智能去重： 對(duì)提取出的文本進(jìn)行去重，確保相同的中文文案（如“確認(rèn)”、“取消”）只生成一個(gè) Key，避免冗余。

第二步：AI 輔助翻譯與文件生成

?翻譯緩存： 優(yōu)先查詢 數(shù)據(jù)存儲(chǔ)層 中的 Translation Cache，已翻譯過的文案直接復(fù)用，顯著降低 Token 消耗并加速流程。

?自動(dòng)化翻譯： 提取的中文列表沒有在緩存中或zh文件中的，被發(fā)送給 LLM，自動(dòng)翻譯成英文。

?語(yǔ)義化 Key 生成： 區(qū)別于傳統(tǒng) Hash 值，LLM 根據(jù)代碼上下文（Context）自動(dòng)生成符合語(yǔ)義的 Key（如將“請(qǐng)輸入密碼”生成為 pleaseInputPassword），提升代碼可讀性。

?文件落地： 自動(dòng)在 lang 文件夾下生成標(biāo)準(zhǔn)的 zh.ts 和 en.ts 文件。

?

生成示例： zh.ts: { "pleaseSelect": "請(qǐng)選擇" } en.ts: { "pleaseSelect": "Please Select" }

?

?

第三步：一鍵代碼替換

?變更預(yù)覽 (Preview)： 在實(shí)際修改前，可調(diào)用 preview-changes 工具展示即將變更的代碼對(duì)比，確保修改符合預(yù)期。

?AST 節(jié)點(diǎn)替換： 使用 extract-and-replace 工具，將源代碼中的硬編碼字符串精準(zhǔn)替換為國(guó)際化方法（如 $t('pleaseSelect')）。

?無(wú)損格式保持： 基于 AST 的替換策略能夠完美保留原代碼的縮進(jìn)、換行和注釋，修改后的代碼無(wú)需二次 Lint 即可直接提交。

?

?

3. 成果與收益：從“數(shù)周”到“數(shù)小時(shí)”

通過引入 JoyCode + i18n-mcp 的實(shí)踐，我在項(xiàng)目的國(guó)際化改造中取得了顯著的成效：

審核編輯 黃宇