?

本文根據(jù)神策數(shù)據(jù)資深前端研發(fā)工程師陳寧《前端國(guó)際化》的直播整理而成，主要包含以下內(nèi)容：
· 國(guó)際化概述
· 國(guó)際化技術(shù)需求
· 國(guó)際化技術(shù)模型
· 國(guó)際化技術(shù)模型實(shí)現(xiàn)

一、國(guó)際化概述

國(guó)際化是做框架，幫助快速實(shí)施本地化。框架的設(shè)計(jì)實(shí)現(xiàn)決定了進(jìn)行本地化的效率與質(zhì)量。那什么是本地化？本地化就是在特定語(yǔ)言文化下，使產(chǎn)品能服務(wù)當(dāng)?shù)乜蛻舻氖褂昧?xí)慣。
在很多有海外業(yè)務(wù)的公司里，會(huì)有一個(gè)專門(mén)的國(guó)際化部門(mén)，或者在當(dāng)?shù)赜幸粋€(gè)團(tuán)隊(duì)來(lái)維護(hù)公司產(chǎn)品服務(wù)的海外推廣和海外交付，海外推廣需要打磨產(chǎn)品的國(guó)際化質(zhì)量，在海外客戶訪問(wèn)產(chǎn)品時(shí)，能給他們提供符合客戶語(yǔ)言文化背景的服務(wù)；海外交付除了提供優(yōu)質(zhì)的服務(wù)，還需要在有相關(guān)本地化問(wèn)題的時(shí)候，進(jìn)行快速優(yōu)化交付。
國(guó)際化本質(zhì)的需求就是效率和質(zhì)量。效率是橫向支持本地化的效率，質(zhì)量是實(shí)施本地化的質(zhì)量。
國(guó)際化在歷史中是如何演進(jìn)的呢？
人力階段：早期，IT 產(chǎn)品形態(tài)不復(fù)雜，較少海外需求，國(guó)際化往往都是研發(fā)人員自己通過(guò)修改代碼來(lái)維護(hù)本地化資源。
工具階段：隨著全球化持續(xù)推進(jìn)，隨著IT 發(fā)展產(chǎn)品形態(tài)愈發(fā)復(fù)雜，幾乎所有產(chǎn)品都需要做國(guó)際化，為了提高效率，研發(fā)會(huì)使用腳本來(lái)進(jìn)行批量處理本地化資源，并約定好和產(chǎn)品、外部翻譯的工作流程。
平臺(tái)階段：在業(yè)務(wù)規(guī)模體量較大的公司，有多個(gè)產(chǎn)品需要國(guó)際化，此時(shí)設(shè)計(jì)開(kāi)發(fā)出符合公司業(yè)務(wù)的國(guó)際化平臺(tái)來(lái)負(fù)責(zé)國(guó)際化資源的生產(chǎn)維護(hù)，負(fù)責(zé)產(chǎn)品、外部翻譯、測(cè)試的工作流程，以平臺(tái)來(lái)統(tǒng)一國(guó)際化能力。

二、國(guó)際化技術(shù)需求

國(guó)際化框架的核心是對(duì)國(guó)際化資源的處理，包括：編寫(xiě)、采集、存儲(chǔ)、維護(hù)。通過(guò)框架提高這些行為的效率。

1.編寫(xiě)國(guó)際化資源

這里主要解決兩個(gè)問(wèn)題：如何標(biāo)識(shí)？如何模塊化？
標(biāo)識(shí)是基本要求，有了標(biāo)識(shí)才能處理，而模塊化就是為了能對(duì)標(biāo)識(shí)進(jìn)行分類，提供業(yè)務(wù)意義，提供批量處理的載體。
我們給每一個(gè)資源一個(gè)單獨(dú)的 ID 進(jìn)行標(biāo)識(shí)，那這 ID 怎么設(shè)計(jì)呢?
神策早期的方案是通過(guò)注釋來(lái)標(biāo)識(shí)，如：“測(cè)試”。此時(shí)的 ID 不是顯示指定的，而是通過(guò)特定的編寫(xiě)格式來(lái)標(biāo)明。之后通過(guò)代碼掃描工具，來(lái)實(shí)現(xiàn)對(duì)文件的批量收集和批量寫(xiě)入。這是一套可行的技術(shù)實(shí)現(xiàn)，但是效率上并不好，任何變動(dòng)都需要修改代碼進(jìn)行發(fā)版，文案的標(biāo)識(shí)沒(méi)有進(jìn)行模塊化，不好管理。
技術(shù)社區(qū)里針對(duì)主流 UI 庫(kù)，提供的對(duì)應(yīng)的國(guó)際化工具：vue-il18n、react-intl。它們通過(guò)聲明式的 ID 來(lái)標(biāo)識(shí)資源，比如“intl(‘test’)”,通過(guò)代碼掃描工具，來(lái)實(shí)現(xiàn)資源的收集和匯總。這些方案已經(jīng)很實(shí)用了，但是依然有一些問(wèn)題不能解決：英文 ID 不夠直觀，對(duì)于前端而言，視圖中的中文文案有利于快速看明白代碼結(jié)構(gòu)；沒(méi)有直接提供模塊化。
以上兩種代表了兩類編寫(xiě)方式：結(jié)構(gòu)式標(biāo)識(shí)、聲明式 ID 標(biāo)識(shí)，可以明顯的看出，聲明式的 ID 會(huì)更好一些。在這個(gè)基礎(chǔ)上，還需要解決：文案直觀、模塊化的問(wèn)題。既然中文更直觀，能不能直接用中文呢？最好不要，中文會(huì)有一詞多譯的問(wèn)題。可以用聲明式的簡(jiǎn)短字符 ID+ 中文注釋來(lái)標(biāo)識(shí)，兼容聲明式 ID 和結(jié)構(gòu)式的優(yōu)點(diǎn)。注釋的部分可以通過(guò)腳本來(lái)實(shí)時(shí)更新為最新的中文。

??

模塊化需要額外來(lái)支持，在 ID 中帶有模塊是一種方法，但是維護(hù)起來(lái)會(huì)容易出錯(cuò)，難以排查。可以通過(guò)配置文件，從腳本收集層面來(lái)后置的加入模塊

2.采集國(guó)際化資源

在代碼里編寫(xiě)好之后，國(guó)際化資源信息的流轉(zhuǎn)不能僅以分散的代碼形式存在，需要有另一個(gè)靈活的載體。因此需要將資源從代碼里采集出來(lái)，獲得上下文信息。
如何采集資源呢？人工維護(hù)肯定不行，量大、效率低，需要通過(guò)一些工具腳本來(lái)采集，通過(guò)增加代碼掃描工具從代碼里收集文案。一個(gè)比較好的思路是，通過(guò)構(gòu)建過(guò)程來(lái)收集依賴，構(gòu)建過(guò)程會(huì)遍歷到所有有效的代碼，通過(guò) babel 這樣的 ast 處理能力，可以拿到資源標(biāo)識(shí)的上下文。另外也可以自己編寫(xiě)解析器來(lái)實(shí)現(xiàn)，簡(jiǎn)單的比如正則。

3.資源國(guó)際化存儲(chǔ)

我們采集到資源以后，在腳本運(yùn)行時(shí)，資源信息以內(nèi)存的形式存在，內(nèi)存輸出后，可以以文件的形式存在。如果以文件為載體，可以很好在研發(fā)、測(cè)試、翻譯之間進(jìn)行信息傳遞，但是會(huì)有傳遞的效率和操作成本，文件需要通過(guò)聊天工具轉(zhuǎn)發(fā)，存在于聊天工具的聊天記錄里，文件的內(nèi)容生效，需要被寫(xiě)回到代碼里。這些都是成本，降低成本才能帶來(lái)效率。
相比于文件，一個(gè)固定的中轉(zhuǎn)點(diǎn)會(huì)是效率更高的事情，如果要這個(gè)中轉(zhuǎn)節(jié)點(diǎn)的使用成本低，那一個(gè)國(guó)際化資源維護(hù)功能的 Web 項(xiàng)目就是必須的，資源從代碼進(jìn)入到資源維護(hù)服務(wù)，資源也從維護(hù)服務(wù)注入到代碼的運(yùn)行時(shí)。這中間通過(guò)固定 API 來(lái)完成交互。

4.資源國(guó)際化維護(hù)

維護(hù)是基于存儲(chǔ)的，在使用資源服務(wù)存儲(chǔ)國(guó)際化資源以后，也會(huì)提升對(duì)應(yīng)的維護(hù)效率，維護(hù)的地點(diǎn)是固定的，相比于文件是更優(yōu)解。
維護(hù)的過(guò)程包括：增加一門(mén)語(yǔ)言、批量翻譯、單點(diǎn)翻譯、更改文案等。這中間，資源的翻譯是重點(diǎn)，提高資源的翻譯效率能進(jìn)一步提高國(guó)際化效率。資源的翻譯效率取決于翻譯官的能力，但我們也可以提供一些額外信息輔助翻譯，比如：機(jī)器翻譯、專業(yè)詞庫(kù)、翻譯記憶、交叉翻譯、翻譯確認(rèn)等。

三、國(guó)際化技術(shù)模型

針對(duì)上一章的分解內(nèi)容，可以直接給出國(guó)際化的技術(shù)模型。?

1.運(yùn)行時(shí)

對(duì)前端而言，運(yùn)行時(shí)會(huì)是一個(gè)前端模塊，模塊會(huì)導(dǎo)出一些能力，這些能力匯總為兩類：標(biāo)識(shí)資源、完成語(yǔ)言切換。?

2.標(biāo)識(shí)資源

通過(guò)國(guó)際化運(yùn)行時(shí)模塊導(dǎo)出的 API，來(lái)對(duì)代碼中的資源進(jìn)行標(biāo)識(shí)，API 包括單個(gè)標(biāo)識(shí)和批量標(biāo)識(shí)，標(biāo)識(shí)要支持模板字符串的寫(xiě)法，可以在運(yùn)行時(shí)動(dòng)態(tài)生成文案 。

3.轉(zhuǎn)換資源

進(jìn)行資源轉(zhuǎn)換的前提是，擁有資源，因此需要具備資源注入的 API ，通過(guò)這個(gè) API 完成國(guó)際化資源的注入，資源可以來(lái)自于一個(gè)網(wǎng)絡(luò)請(qǐng)求。
在擁有資源后，需要具備一些轉(zhuǎn)化能力，包括基礎(chǔ)的字符串轉(zhuǎn)換，單位、時(shí)間、顏色轉(zhuǎn)換等。
在進(jìn)行轉(zhuǎn)換時(shí)，需要知道目標(biāo)語(yǔ)言。
上述的內(nèi)存可以通過(guò)一個(gè)統(tǒng)一的“設(shè)置配置”API 來(lái)完成。

4.翻譯上下文環(huán)境

針對(duì)資源的標(biāo)識(shí)，前端可以進(jìn)行渲染擴(kuò)展，這可以為國(guó)際化提供一個(gè)關(guān)鍵能力：在產(chǎn)品界面上完成國(guó)際化修改，這個(gè)能力對(duì)于國(guó)際化校驗(yàn)而言是必須的，實(shí)際的產(chǎn)品功能界面中可以提供完善的上下文，這對(duì)于批量翻譯不是必須的，但是對(duì)于翻譯校對(duì)非常重要，能幫助提高翻譯質(zhì)量。??那如何實(shí)現(xiàn)呢？
本質(zhì)上是面向資源標(biāo)識(shí)編寫(xiě)組件，完成擴(kuò)展，運(yùn)行時(shí)轉(zhuǎn)化的過(guò)程輸入是資源標(biāo)識(shí)，輸出是字符串，但是對(duì)于前端，可以擴(kuò)展輸出為一個(gè)前端組件，在組件內(nèi)可以完成更多的能力，就比如和資源服務(wù)器的交互。??國(guó)際化背后是配置化，添加一定的約束后，配置化可以泛化到前端界面的局部定制。

5.腳本工具集

腳本工具的能力是關(guān)聯(lián)代碼和國(guó)際化資源服務(wù)。一條操作路徑是：資源采集、模塊化、上傳到文案服務(wù)。另一條資源路徑是，本地調(diào)試，從資源服務(wù)器讀取翻譯，寫(xiě)成文件到本地，本地依賴。??腳本工具可以以 cli 的形式存在，也可以以 IDE Plugin 形式存在。

6.國(guó)際化資源服務(wù)

?國(guó)際化資源服務(wù)是一個(gè)單獨(dú)的平臺(tái)，用來(lái)作為固定的操作中心，讓各個(gè)角色上來(lái)操作。
平臺(tái)的功能模塊包括：資源的 CRUD，資源的查詢（模塊、版本）、機(jī)器翻譯、專業(yè)詞庫(kù)、翻譯記憶等。
下層也提供對(duì)應(yīng)的 httpAPI 來(lái)給到第三方調(diào)用。

三、國(guó)際化技術(shù)模型實(shí)現(xiàn)

1.神策國(guó)際化技術(shù)全景

?如上圖，神策開(kāi)發(fā)了圖中的幾個(gè)功能模塊：
Intl runtime：用來(lái)做資源標(biāo)識(shí)、資源轉(zhuǎn)換、渲染擴(kuò)展。

Vscode 插件：用來(lái)集成國(guó)際化腳本，完成資源采集、資源模塊化、資源上傳，本地翻譯同步等。

線上服務(wù)：完成資源的管理、機(jī)器翻譯、專業(yè)詞庫(kù)能力，也具備按模塊輸出資源包的能力。
微前端框架：調(diào)用 intl runtime，加載資源、目標(biāo)語(yǔ)言等；也負(fù)責(zé)外置國(guó)際化資源包的加載，實(shí)現(xiàn)無(wú)發(fā)版更新國(guó)際化。
神策因?yàn)槭撬接谢渴?#xff0c;因此并沒(méi)有將自己的服務(wù)在外網(wǎng)部署。

2.SaaS 形式部署資源服務(wù)

對(duì)于可以訪問(wèn)外網(wǎng)的 Web 產(chǎn)品，可以將自己的資源服務(wù)部署到外網(wǎng)，將資源的獲取做成 CDN，讓自己的產(chǎn)品進(jìn)行訪問(wèn)，如下圖：??對(duì)于 APP 的賦能，一樣通過(guò) CDN，不過(guò) APP 的本地緩存可以減少 CDN 請(qǐng)求。?

總結(jié)

以上是生活随笔為你收集整理的神策数据陈宁：前端国际化技术需求及模型实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。