一文帶你全方位深入國際化開發(fā)

國際化簡(jiǎn)介

國際化概念

• 國際化 internationalization(I18n)

在設(shè)計(jì)軟件，將軟件與特定語言及地區(qū)脫鉤的過程, 應(yīng)用程序的功能和代碼設(shè)計(jì)考慮在不同地區(qū)運(yùn)行的需要，簡(jiǎn)化不同地區(qū)版本的生產(chǎn)

• 本地化 localization (I10n)

移植軟件時(shí)，加上特定區(qū)域信息和翻譯文件的過程。如：布局順序、圖片、貨幣、日期格式...

• 全球化 globalization(g11n)

國際化 + 本地化 = 全球化

國際化對(duì)象

網(wǎng)站或者 App 需要進(jìn)行國際化，大部分需要圍繞顯示文案、動(dòng)態(tài)文案、代碼注釋、圖片多媒體等四個(gè)方面的進(jìn)行改造：

1. 顯示文案（2 種情況）

• 靜態(tài)文案

能夠在研發(fā)開發(fā)的時(shí)候規(guī)定死的，或者通過某一些規(guī)定來推斷出的文案

研發(fā)依次將這些文案收集起來，通過直接上傳到 Starling，或者利用 excel 等中轉(zhuǎn)文件方式后上傳到 Starling 平臺(tái), 等待翻譯完成后下載或者 Starling 接口下發(fā)文案注入到代碼中。

• 動(dòng)態(tài)文案

無法通過規(guī)律來確定具體的文案(多為用戶創(chuàng)造的文案，例如: 評(píng)論文案、商品名等)

研發(fā)無法在開發(fā)時(shí)介入對(duì)這類文案的改造，可通過機(jī)器翻譯或者將此類文案在運(yùn)行時(shí)收集起來當(dāng)做靜態(tài)文案處理。

2. 代碼注釋

如果開發(fā)代碼，涉及到多個(gè)語種的研發(fā)，方便理解代碼 or 某些合規(guī)需求，那么嵌入到代碼注釋文案也需納入改造范圍

研發(fā)在編碼階段就需要將注釋文案處理完成，或者后期排查注釋文案，統(tǒng)一進(jìn)行處理。

3. 相關(guān)文檔

對(duì)網(wǎng)站 or App 相關(guān)文檔(例如使用手冊(cè)、相關(guān)協(xié)議等)中的文案

若需求中涉及到文檔的翻譯改造，那么就需要找專業(yè)的翻譯員或者將該文檔提交 Starling 文檔翻譯工單。

4. 接入圖片,多媒體音頻,字體等

對(duì)改造網(wǎng)站 or App 相關(guān)多媒體資源中出現(xiàn)的文案

若需求中涉及到相關(guān)圖片等的翻譯改造，那么就需要找專業(yè)的翻譯員或者 Staring 官方平臺(tái)。

國際化流程

理論上，只需要一個(gè)可支持 I18n 框架即可。

框架的另外一個(gè)含義就是標(biāo)準(zhǔn)，如果沒有框架，確實(shí)可以自己造一個(gè)翻譯地區(qū)映射機(jī)制, 但是無法達(dá)到統(tǒng)一，明面上實(shí)現(xiàn)了國際化，卻無法實(shí)現(xiàn)本土化(各個(gè)國家的單復(fù)數(shù)，數(shù)字，貨幣等等不同類型的本地化文案)。

可以嘗試打開瀏覽器控制臺(tái)，輸入 Intl 就會(huì)出現(xiàn)一個(gè)全局 Intl 對(duì)象。

國際化發(fā)展

該部分發(fā)展史主要涉及的國際化文案為 靜態(tài)顯示文案。

人力階段

研發(fā)需要將項(xiàng)目需求中涉及的文案挨個(gè)人工提取以文件形式記錄下來(通常為 excel)，上傳到 starling 平臺(tái)或者將文件發(fā)送給翻譯員，由翻譯員上傳翻譯，最后研發(fā)拿到最后的翻譯結(jié)果文件，以可讀取形式(json 等)放入代碼倉庫。

此階段涉及到每個(gè)需求都要人工介入收集、溝通、等待翻譯結(jié)果、回填到項(xiàng)目中。如果后期有文案變動(dòng)需要一次文案變動(dòng)導(dǎo)致的代碼上線。

動(dòng)態(tài)下發(fā)

此時(shí)期研發(fā)依舊需要挨個(gè)提取文案，然后上傳到 Starling 平臺(tái)，但是平臺(tái)側(cè)提供了動(dòng)態(tài)下發(fā)文案功能，研發(fā)可以在代碼里邊通過 sdk 的方式動(dòng)態(tài)拉取下來翻譯后的文案。此時(shí)研發(fā)和翻譯的動(dòng)作就開始解耦。

此階段涉及到每個(gè)需求都要人工介入收集、手動(dòng)上傳等機(jī)械重復(fù)勞動(dòng)過程。

工具開花

此階段，產(chǎn)生了豐富的效率工具鏈生態(tài)，研發(fā)無需手動(dòng)收集，也無需手動(dòng)上傳，重復(fù)的勞動(dòng)得到了 Cli 命令化，此外 Starling 平臺(tái)動(dòng)態(tài)下發(fā)能力具備了監(jiān)控報(bào)警功能，也同時(shí)提供了瀏覽器插件 In-Context 設(shè)計(jì)走查工具、Starling vscode 研發(fā)遍歷工具。

到達(dá)此階段，基本已經(jīng)實(shí)現(xiàn)了整個(gè)流程的自動(dòng)化操作，但也面臨不滿意完全自動(dòng)化結(jié)果、工具自動(dòng)化流程不明確等問題。

有質(zhì)有效

在I18nOps 標(biāo)準(zhǔn)化中提及

此階段將 Starling 發(fā)展時(shí)期的工具鏈做了一層平臺(tái)化的收攏聚合，可視化的展示出整個(gè)自動(dòng)化流程，支持上對(duì)自動(dòng)化結(jié)果不滿意的二次修改，一次國際化需求流程得到的了標(biāo)準(zhǔn)化，同時(shí)實(shí)現(xiàn)技術(shù)無感化，無論是否有國際化代碼開發(fā)背景，均可以保證國際化開發(fā)質(zhì)量。

此階段，完全實(shí)現(xiàn)了整個(gè)流程的標(biāo)準(zhǔn)化、自動(dòng)化、可視化，并提供了對(duì)整個(gè)項(xiàng)目文案的健康管控。

Starling 平臺(tái)

首先為自己的項(xiàng)目在 Starling 平臺(tái)上創(chuàng)建項(xiàng)目， 然后一定需要的是為項(xiàng)目建立空間，空間是之后研發(fā)拉取文案的集合。

如果需要以產(chǎn)品需求迭代維度管理文案，請(qǐng)建立任務(wù)，并為任務(wù)匹配對(duì)應(yīng)的同步空間。之后在任務(wù)進(jìn)行的修改/新增/刪除文案等操作都會(huì)同步到空間中。但是注意的是，空間下直接的修改不會(huì)反向同步到任務(wù)中。

在任務(wù)和空間的頁面中就可以進(jìn)行文案本地化相關(guān)的翻譯工作。填寫/導(dǎo)入不同語種下的翻譯文案、截圖、注釋、最長(zhǎng)字符數(shù)等信息。

文案編輯正確，并完成審校等工作后，可進(jìn)行文案的發(fā)布：選取發(fā)布文案范圍，依照自動(dòng)生成/手動(dòng)輸入的版本號(hào)進(jìn)行發(fā)布。發(fā)布后研發(fā)可拉取本次發(fā)布語種的最新文案集合。

非研發(fā)關(guān)注

PM/UI/QA/

• 產(chǎn)品&運(yùn)營

關(guān)注國際化文案是否符合本地化要求，文案是否全量符合需求節(jié)點(diǎn)所要求的狀態(tài)(如翻譯進(jìn)度、是否上線)...

• 設(shè)計(jì)

關(guān)注不同的國際化文案對(duì)于同一份 UI 的不同語種下的展示效果(如長(zhǎng)度適配顯示)，多語言文案是否可以和翻譯平臺(tái)進(jìn)行打通...

• 測(cè)試

關(guān)注在不同語種作用下，是否達(dá)到會(huì)顯示對(duì)應(yīng)不同語種，會(huì)不會(huì)出現(xiàn)語種錯(cuò)亂的原因...

效率提升

• Starling Figma

為設(shè)計(jì)稿量身定制 UI 多語種，幫助設(shè)計(jì)師能夠直觀感受到一份 UI 在不同語種下的顯示，并且為文案本地化前置流程提供可能。

• Starling In-Context

研發(fā)關(guān)注

開發(fā)基準(zhǔn)

• 語言地區(qū)代碼

“語言地區(qū)代碼”是指對(duì)該地區(qū)的語言和文化期望。它使用 BCP 47 中定義的“區(qū)域代碼”表示。

該代碼由連字符（-）分隔的幾部分組成。第一部分是表示語言的簡(jiǎn)短字符串。第二個(gè)可選部分是表示地區(qū)的短字符串。另外，可以指定各種擴(kuò)展名和變體。

通常，Web 應(yīng)用程序常用到的格式為語言-地區(qū)。如 en 英語、en-US 說英語的美國地區(qū)、en-GB 說英語的英國地區(qū)。

更多閱讀語言碼 ISO 639 標(biāo)準(zhǔn)、 阮一峰解釋（鏈接見文末）。

• 語言映射關(guān)系

源語言：項(xiàng)目原本的語種，比方說中國地區(qū)的開發(fā)通常為中文(zh、zh-CN)。

目標(biāo) (翻譯) 語言：項(xiàng)目運(yùn)行后需用呈現(xiàn)給用的不同翻譯后的語種，比方說通常中臺(tái)產(chǎn)品會(huì)提供中/英語種。

Key: 源語言與目標(biāo)(翻譯)語言的唯一標(biāo)識(shí)，可以解決源語言一詞多義等問題。

通常研發(fā) RD 在書寫代碼時(shí)候會(huì)函數(shù)的形式調(diào)用，Key 為唯一標(biāo)識(shí)、源語言為兜底文案、目標(biāo)翻譯語言離線存放在本地或者動(dòng)態(tài)線上拉取。

• 開發(fā)規(guī)則

ICU 消息格式: 由 字符串和 {花括號(hào)}中包含的可變?cè)?strong style="color: rgb(119, 48, 152);">占位符組成，幫助準(zhǔn)確顯示本地化(性別、復(fù)數(shù)形式、數(shù)字、時(shí)間和日期方面文案)，以表達(dá)所有必要的拼寫和語法細(xì)節(jié)。

更多閱讀 ICU Formatting Messages、 ICU 在線測(cè)試。(鏈接見文末)

ECMA-402?Intl 使用規(guī)范:?ECMAScript 對(duì)象的應(yīng)用程序編程通用接口，它提供語言敏感的字符串比較、數(shù)字格式以及日期和時(shí)間格式化。

更多閱讀 MDN 解釋。(見文末)

通常，不同的編碼語言對(duì)映射語種的方案會(huì)提供不同的框架，如前端有starling_intl、react-intl。

動(dòng)態(tài)文案

實(shí)際在使用中，避免不了一些動(dòng)態(tài)文案場(chǎng)景的出現(xiàn)(如評(píng)論區(qū))，這個(gè)時(shí)候可以把這些文案節(jié)點(diǎn)打上一個(gè)動(dòng)態(tài)標(biāo)識(shí)，在運(yùn)行時(shí)調(diào)用機(jī)器翻譯。在可枚舉的動(dòng)態(tài)文案也可以由前端和后端約定翻譯平臺(tái)開放接口的使用，達(dá)到可枚舉文案能夠走精確翻譯的模式(比方說跨境電商商品名場(chǎng)景)。

效率提升

首先是 VSCode 插件，在研發(fā)編寫 code，研發(fā)在正常書寫文案代碼 or 代碼注釋，starling vscode 提供一鍵上傳文案、翻譯文案、翻譯注釋等相關(guān)國際化操作。

然后是 CLI 工具，幫助開發(fā)者以全局視角來判斷項(xiàng)目倉庫中國際化的覆蓋率，并且也提供快速提升覆蓋率的一鍵式替換等命令行操作。

文案 Key

確定文案 key 的角色會(huì)有兩類：研發(fā)、產(chǎn)品（此處是產(chǎn)品 PM/UX/本地化 PM 的集合）。具體的 key 生成者是由團(tuán)隊(duì)本地化與研發(fā)節(jié)奏合作決定的。

• 研發(fā)確定

由研發(fā)確定 key 會(huì)相對(duì)來說比較符合產(chǎn)品開發(fā)的節(jié)奏以及 key 本身的需求使用習(xí)慣。

key 對(duì)于本地化翻譯、產(chǎn)品線上顯示效果沒有直接的影響，更多是為研發(fā)服務(wù)，能夠在代碼中將文案與托管在 starling 中的文案進(jìn)行對(duì)齊。

• 產(chǎn)品確定

由產(chǎn)品側(cè)進(jìn)行 key 的制定往往是期待整體流程的縮短，能在源文案確定的同時(shí)撰寫 key，一同提交至 starling 平臺(tái)，然后讓研發(fā)與翻譯并行。并且 key 由產(chǎn)品/本地化同學(xué)書寫，能夠添加模塊/功能等信息，有利于此類角色后期在 starling 平臺(tái)進(jìn)行文案管理/檢索。

建議

看重國際化時(shí)間：由產(chǎn)品(如有)制定 key，先建立文案 key 的翻譯關(guān)系

看重key 的質(zhì)量 : 由研發(fā)同學(xué)主導(dǎo) key 的構(gòu)建，在代碼編寫時(shí)確定語義 key

翻譯模式

• 翻譯后置： 先研發(fā)，后本地化的傳統(tǒng)國際化流程，適用于國際化時(shí)間要求不高/國際化任務(wù)量不大/語種數(shù)量不過的項(xiàng)目。對(duì)于此類用戶研發(fā)可以在初期在代碼中定義 key，當(dāng)前使用 I18nOps 體系(工具+平臺(tái))可完全滿足翻譯后置的場(chǎng)景~
• 翻譯前置： 研發(fā)與本地化翻譯工作并行，縮短項(xiàng)目整體時(shí)間長(zhǎng)度，適合本地化工作體量較大、涉及語種較多的項(xiàng)目，這種項(xiàng)目往往會(huì)有較長(zhǎng)的多語言譯文返回周期，盡量提早開始會(huì)降低因語言返回時(shí)間較短帶來的上線延遲風(fēng)險(xiǎn)。

I18nOps 標(biāo)準(zhǔn)化

參與一次國際化需求中，所涉及到的不同人員可以有不同的工具來提高效率，但是會(huì)難免遇到流程不夠清晰，數(shù)據(jù)不夠直觀展示，國際化需求進(jìn)度不明顯等困擾，造成不必要的時(shí)間浪費(fèi)，以及文案事故。

在通常情況下，我們?cè)谧鲆淮涡枨缶蜁?huì)對(duì)應(yīng)一個(gè)代碼的分支，也就是會(huì)存在一個(gè)代碼倉庫，那么就可以精準(zhǔn)的關(guān)注此次需求的國際化代碼質(zhì)量以及此次需求涉及到的文案的翻譯情況。

由此產(chǎn)出 I18nops 平臺(tái)，以倉庫維度收斂文案，用戶進(jìn)行授權(quán)后，I18nOps 可對(duì)代碼進(jìn)行全面的語法分析并提取中靜態(tài)文案 key，這樣就可以得出倉庫中的國際化代碼是否書寫正確，使用到的文案是否翻譯、發(fā)布等數(shù)據(jù)。再一個(gè)利用平臺(tái)補(bǔ)充的能力，如補(bǔ)充動(dòng)態(tài)文案 key，過濾不需要國際化的文案，快速翻譯未翻譯的文案等，可以做到精準(zhǔn)的下發(fā)兜底使用的文案譯文，并且將倉庫項(xiàng)目中所有的文案記錄到人(研發(fā)認(rèn)領(lǐng)機(jī)制)。

與此同時(shí)，i18nops 提供一鍵將倉庫分支代碼進(jìn)行國際化工單模式，這對(duì)于不同國際化認(rèn)知的同學(xué)統(tǒng)一走工單模式進(jìn)行國際化需求上線很有幫助，因?yàn)檫@免去了所有國際化的細(xì)碎操作(如: 上傳、翻譯、替換...)。

結(jié)合提取的每一次的國際化數(shù)據(jù)，可以得出代碼覆蓋率、注釋覆蓋率、翻譯覆蓋率等國際化相關(guān)的數(shù)值，讓整體的國際化情況一目了然。

往期推薦

2021 TWeb 騰訊前端技術(shù)大會(huì)精彩回顧(附PPT)

面試題：說說事件循環(huán)機(jī)制(滿分答案來了)

專心工作只想搞錢的前端女程序員的2020

參考資料