聊聊前端國際化文案該如何處理

最近接到乙個海外專案業務需求，專案最終會被來自不同國家的客戶所使用，期望能讓客戶有乙個良好的使用者體驗，因此前端需要適配國際化。

乍一聽，這個海外專案需求並沒有什麼特別的地方，似乎就多了乙個國際化適配。但細細一想，事情可沒這麼簡單，前端開發面臨了很多新的問題。下面梳理一下國際化開發中通常會面臨的挑戰：

頁面文案樣式處理文案樣式需要特別注意，不同語言的文字，可能會有不同的表現。例如下面兩張圖所示：

日期、數字格式處理頁面上展示日期或數量的地方，也是需要做國際化適配。

ltr／rtl 很多中東國家的語言習慣都是 rtl，可以嘗試使用 direction 和 transform 來解決。

（banner）國際化如果你想把國際化做的足夠精細，那麼國際化也是需要考慮的。

第三方 ui 元件如果使用了第三方 ui 元件，如：elementui、ant design ui 等，這些 ui 框架通常都宣稱支援國際化，但支援的國際化語言數量有限，並不一定能滿足業務需求。

前端開發工作量和後期維護成本激增大量的文案需要被提取出來，被提取出來的文案最終會被合併到乙個檔案中去，如：en-us.json。這些工作如果通過手工完成，那麼工作量會是非常巨大的。

以上列舉出了很多挑戰，但實際上「頁面文案處理」才是最主要的矛盾，因為它直接導致前端開發工作量和維護成本的激增。下面我們重點來討**案處理思路，其實從實現國際化的角度來看，jquery、vue、react 等都只是載體而已，實現思路都是相通的，因此國際化文案處理與具體的技術框架並不耦合。接下來將會丟擲幾種國際化文案處理思路，每種思路對生產力和生產關係的要求有高有低，姑且將其分別對應為石器時期、青銅時期、**時期。

傳統的國際化開發流程：前端開發到一定階段，將文案提取到資源檔案（通常為 en-us.json），然後將資源檔案傳送給翻譯團隊，翻譯團隊翻譯出各國語言版本的文案，每種語言對應乙個資源檔案，最後將這些資源檔案發回給前端開發人員，前端開發人員更新到自己本地。如下圖所示：

import react,  from
'react';
import  from
'react-intl';
import qs from
'querystring';
import logo from
'./logo.svg';
import
import default_messages from
'./i18n/en-us.json';
const default_locale = 'en-us';
class
extends
component
;  componentwillmount() .json`);
debugger;
this.setstate();
}  render()  = this.state;
return (
id="welcome"
defaultmessage=
/>
zh-cn
en-us
);  }
}複製**

複製**

前面分析了「提取文案」的過程本質上是在重複勞動，那我們看看有沒有辦法進行改進。我們可以先對比一下「無國際化需求」和「有國際化需求」時的前端開發流程。如圖所示：

可以看出右邊多了三個過程：

將文案提取為變數

為變數命名，要合乎其場景

將變數和文案資訊存到資源檔案

這裡我們提出乙個期望或願景：希望能像開發普通業務一樣去開發有國際化需求的業務！

為了達成這一願景，我們需要有乙個工具：它能夠掃瞄指定的檔案，並能識別出檔案中的字串，然後能根據字串的含義生成變數名，並用變數表示式替換掉原來的字串，最後能夠將提取出來的變數自動追加到資源檔案中。

如何實現這樣的工具？我們可以用 babel 將js檔案解析為一顆語法樹，然後遍歷並找出字串節點，接下來呼叫 google cloud translation api 將字串翻譯為英文，並以此作為變數名得到變數表示式，最後用變數表示式替換掉原來的文字即可。如下圖所示：

幸運的是，i18n-pick 已經有那麼點味道了~

有了石器時期的生產方式作為鋪墊，我們可以在此基礎上繼續做改進。既然「前端開發」和「翻譯團隊」之間依賴的太重，那我們可以在中間加乙個節點「文案配置平台」。前端將提取的文案直接上傳到「文案配置平台」，翻譯團隊直接在「文案配置平台」上進行文案翻譯，前端直接從「文案配置平台」獲取翻譯後的最新文案。

以上每種思路都有各自適用的場景，實際生產中需要從開發成本、開發體驗、後期維護、能力沉澱等多維度進行考慮。這篇文章旨在拋磚引玉開啟思路，各位看官可以將自己的思路丟擲來一起討論。

非常歡迎有激情的你加入 es2049 studio，簡歷請傳送至 caijun.hcj(at)alibaba-inc.com 。

聊聊前端國際化文案該如何處理

聊聊前端國際化文案該如何處理

聊聊前端國際化文案該如何處理

Android 國際化文案判斷

相關推薦