近幾年，隨著業務的不斷髮展與市場的快速推廣，產品面向的使用者越來越多樣化，其中不乏很多海外使用者，越來越多的產品國際化需求給前端團隊帶來了新的挑戰。

在進行產品國際化開發的過程中，我們團隊遇到了一些問題，比如，繁瑣重複的開發內容降低了開發效率；國際化框架的書寫格式影響了程式碼的可讀性；各種文案相關的問題難以排查最佳化等。

為此，我們調研對比了現有的工具和方案，最終找到了適合我們專案的 vscode 外掛，並在此基礎上，自主研發了一個 Vue 國際化開發的命令列工具 yidun-i18n-cli。

本文將分析前端國際化開發過程中可能存在的困擾，並介紹相關工具的調研結果，及 yidun-i18n-cli 的設計思路、實現方案和未來規劃，希望可以給大家帶來幫助與啟發。

一、前端國際化的困擾

對於前端國際化，很多成熟的框架都有與之匹配的現成國際化外掛，比如 React 的 React-intl 、Vue 的 Vue I18n，按照外掛規範進行程式碼改造就可以將專案引入國際化，整個流程並不複雜，但專案重構和後續迭代開發過程中卻出現了很多新的問題（因為部門專案大多基於 Vue 開發，下面基於 Vue I18n 進行說明）。

1.文案提取、文案 key 命名、語法轉換過程繁瑣低效

基於 Vue I18n 的規範，為了支援國際化，必須將程式碼中所有的中文文案按照如下方式進行改造，對於每一條文案都要重複進行提取、key 值命名、語法轉換的步驟，這個過程如果完全手動，是十分耗時的。

2.各種文案問題難以排查最佳化，包括重複定義的文案、失效文案、未提取的中文、錯誤引用

• 重複定義的文案：不同 key 對應的文案完全相同。引入的場景：提取文案時未注意到文案已定義，又重新定義了一份；多需求並行開發時，不同的開發可能同時提取了同份文案，但是定義的文案 key 值又不同。

  
  

• 失效文案：未被引用的文案。引入場景：迭代開發過程中，當部分中文需要被被刪除或是修改時，開發只調整了引用處。

  
  

• 未提取的中文：未按照 Vue I18n 的規範進行程式碼轉換，造成外語頁面展示異常。引入場景：開發提取文案遺漏。

  
  

• 錯誤引用：引用的 key 值不存在。引入場景：開發 key 值寫錯，或是刪除了 key 但是未修改引用處。

3. UI 除錯受阻：在產品經理交付翻譯結果之前，無法進行外語頁面展示效果的除錯

4. 翻譯結果交付較慢，影響提測進度：大部分產品經理翻譯文案會先利用翻譯工具得到參考的翻譯結果，然後再進行微調，當文案較多時，翻譯過程比較耗時。

5. 程式碼可讀性變差：中文改成 Vue I18n 語法之後，無法直接確認程式碼中的中文內容

二、相關工具和解決方案調研

為了解決上述問題，我們對現有前端國際化的相關工具和解決方案進行了調研。

因為部門專案使用的都是 Vue I18n，因此首先調研了 Vue I18n 相關的 vscode 外掛和命令列工具，對比結果彙總如下：

在上述 vscode 外掛中，下載量最多的是 i18n-ally，它功能豐富、互動友好，且支援多種國際化外掛；而命令列工具中，vue-i18n-cli 支援專案級別的文案批次操作，但是功能實現上存在的問題較多，不是很可靠，vue-i18n-extract 功能比較單一，只支援文案檢查。

其次，我們還調研了阿里開源的一套國際化解決方案 kiwi，它整合國際化框架 kiwi-intl、vscode 外掛 kiwi-linter、命令列工具 kiwi-cli 為一體，功能比較完整，基本解決了國際化開發中存在的大多痛點，但它並不適用於 Vue 專案。

經過調研，我們發現可以透過引入 i18n-ally 外掛解決程式碼可讀性變差的問題，但因為它不能支援專案級別的程式碼批次處理和分析，無法用於解決其他問題。借鑑阿里的 kiwi 的思路，我們最終決定自主研發一個適合於 Vue 專案的前端國際化命令列工具。

三、yidun-i18n-cli 的設計與實現

【功能設計】

下圖描繪的是一個迭代開發週期的工作流：首先，前端根據產品的需求文件進行功能開發，對 vue、js 等檔案的修改。完成功能開發後，再根據 Vue I18n 規範進行程式碼轉換，並更新 en.json、cn.json 等語言資訊檔案。最後，將需要翻譯的文案整理成文件交付產品經理，待產品經理完成翻譯後，再匯入翻譯結果，進行最終的除錯檢查後提交程式碼。至此，一個開發週期就完成了。

上述過程中，國際化相關的大部分工作是可以透過工具自動化完成的，包括文案提取、語法轉換、文案匯入匯出、文案檢查與修正，其中文案檢查具體來說包括中文、重複文案、未使用文案、錯誤引用的檢測。

除此之外，在迭代開發過程中我們又為工具新增了一些功能：

1. 翻譯：交付產品經理的文案文件，附上對應的翻譯參考，輔助產品經理快速進行翻譯工作，也便於開發提早進行外語頁面的除錯

2. 語言目錄的構建或重構：工具對語言目錄有結構和命名要求，該功能可以方便進行目錄構建

3. 增量模式：解決全模式耗時的問題，在增量模式下，只對修改的程式碼進行檢測和處理，同時也可以與 lint-staged 結合，在提交程式碼之前進行自動轉換

4. 忽略程式碼塊：對於不需要進行提取和翻譯的中文可以透過註釋的方式進行忽略

5. 深匯出：滿足按需翻譯文案的需求，支援對檔案以及其所依賴的模組進行檢測，然後只匯出相關的文案進行翻譯

【關鍵功能實現思路】

1.文案提取

2.中文查詢：使用 vue-eslint-parser 提取程式碼 AST，過濾節點，透過正則匹配進行中文識別

3.文案變數命名：拼音 (10)_md5(5)

4.語法轉換

如下，將需要轉換的文案分為 5 種情況，分別按照不同語法進行調整。對於模板字串、vue 模板字串，自動將文字和表示式進行組合轉換，以保證提取文案儘可能完整。

• vue 屬性

• vue 模板字串

• 字面量

• 模板字串

• JSX 屬性

• 文案翻譯：呼叫 google 翻譯 api

• 匯入匯出：檔案格式為 tsv，採用 d3-dsv 進行檔案的讀寫；深匯入需要定位依賴檔案，使用 enhanced-resolve 解析路徑

• 忽略程式碼塊：借鑑 eslint 忽略註釋思路，使用 i18n-cli-disable-next-line ，i18n-cli-disable 和 i18n-cli-enable 標記需要註釋的程式碼區域

【功能演示】

• 程式碼自動轉換

• 文案匯出、匯入

目前，yidun-i18n-cli已投入使用，為部門國際化的開發工作提供了極大的便利，之後將會持續改善仍舊存在的一些不足。