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

2021-09-11 10:06:56 字數 2379 閱讀 8216

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

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

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

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

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 國際化文案判斷

判斷是否存在映象 public static boolean isrtl 判斷字串開頭是不是映象語言字元 public static boolean stringstartisrtlcharacter string string char charac string.charat 0 charact...