?

本文根據神策數據資深前端研發工程師陳寧《前端國際化》的直播整理而成，主要包含以下內容：
· 國際化概述
· 國際化技術需求
· 國際化技術模型
· 國際化技術模型實現

一、國際化概述

國際化是做框架，幫助快速實施本地化。框架的設計實現決定了進行本地化的效率與質量。那什么是本地化？本地化就是在特定語言文化下，使產品能服務當地客戶的使用習慣。
在很多有海外業務的公司里，會有一個專門的國際化部門，或者在當地有一個團隊來維護公司產品服務的海外推廣和海外交付，海外推廣需要打磨產品的國際化質量，在海外客戶訪問產品時，能給他們提供符合客戶語言文化背景的服務；海外交付除了提供優質的服務，還需要在有相關本地化問題的時候，進行快速優化交付。
國際化本質的需求就是效率和質量。效率是橫向支持本地化的效率，質量是實施本地化的質量。
國際化在歷史中是如何演進的呢？
人力階段：早期，IT 產品形態不復雜，較少海外需求，國際化往往都是研發人員自己通過修改代碼來維護本地化資源。
工具階段：隨著全球化持續推進，隨著IT 發展產品形態愈發復雜，幾乎所有產品都需要做國際化，為了提高效率，研發會使用腳本來進行批量處理本地化資源，并約定好和產品、外部翻譯的工作流程。
平臺階段：在業務規模體量較大的公司，有多個產品需要國際化，此時設計開發出符合公司業務的國際化平臺來負責國際化資源的生產維護，負責產品、外部翻譯、測試的工作流程，以平臺來統一國際化能力。

二、國際化技術需求

國際化框架的核心是對國際化資源的處理，包括：編寫、采集、存儲、維護。通過框架提高這些行為的效率。

1.編寫國際化資源

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

??

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

2.采集國際化資源

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

3.資源國際化存儲

我們采集到資源以后，在腳本運行時，資源信息以內存的形式存在，內存輸出后，可以以文件的形式存在。如果以文件為載體，可以很好在研發、測試、翻譯之間進行信息傳遞，但是會有傳遞的效率和操作成本，文件需要通過聊天工具轉發，存在于聊天工具的聊天記錄里，文件的內容生效，需要被寫回到代碼里。這些都是成本，降低成本才能帶來效率。
相比于文件，一個固定的中轉點會是效率更高的事情，如果要這個中轉節點的使用成本低，那一個國際化資源維護功能的 Web 項目就是必須的，資源從代碼進入到資源維護服務，資源也從維護服務注入到代碼的運行時。這中間通過固定 API 來完成交互。

4.資源國際化維護

維護是基于存儲的，在使用資源服務存儲國際化資源以后，也會提升對應的維護效率，維護的地點是固定的，相比于文件是更優解。
維護的過程包括：增加一門語言、批量翻譯、單點翻譯、更改文案等。這中間，資源的翻譯是重點，提高資源的翻譯效率能進一步提高國際化效率。資源的翻譯效率取決于翻譯官的能力，但我們也可以提供一些額外信息輔助翻譯，比如：機器翻譯、專業詞庫、翻譯記憶、交叉翻譯、翻譯確認等。

三、國際化技術模型

針對上一章的分解內容，可以直接給出國際化的技術模型。?

1.運行時

對前端而言，運行時會是一個前端模塊，模塊會導出一些能力，這些能力匯總為兩類：標識資源、完成語言切換。?

2.標識資源

通過國際化運行時模塊導出的 API，來對代碼中的資源進行標識，API 包括單個標識和批量標識，標識要支持模板字符串的寫法，可以在運行時動態生成文案 。

3.轉換資源

進行資源轉換的前提是，擁有資源，因此需要具備資源注入的 API ，通過這個 API 完成國際化資源的注入，資源可以來自于一個網絡請求。
在擁有資源后，需要具備一些轉化能力，包括基礎的字符串轉換，單位、時間、顏色轉換等。
在進行轉換時，需要知道目標語言。
上述的內存可以通過一個統一的“設置配置”API 來完成。

4.翻譯上下文環境

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

5.腳本工具集

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

6.國際化資源服務

?國際化資源服務是一個單獨的平臺，用來作為固定的操作中心，讓各個角色上來操作。
平臺的功能模塊包括：資源的 CRUD，資源的查詢（模塊、版本）、機器翻譯、專業詞庫、翻譯記憶等。
下層也提供對應的 httpAPI 來給到第三方調用。

三、國際化技術模型實現

1.神策國際化技術全景

?如上圖，神策開發了圖中的幾個功能模塊：
Intl runtime：用來做資源標識、資源轉換、渲染擴展。

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

線上服務：完成資源的管理、機器翻譯、專業詞庫能力，也具備按模塊輸出資源包的能力。
微前端框架：調用 intl runtime，加載資源、目標語言等；也負責外置國際化資源包的加載，實現無發版更新國際化。
神策因為是私有化部署，因此并沒有將自己的服務在外網部署。

2.SaaS 形式部署資源服務

對于可以訪問外網的 Web 產品，可以將自己的資源服務部署到外網，將資源的獲取做成 CDN，讓自己的產品進行訪問，如下圖：??對于 APP 的賦能，一樣通過 CDN，不過 APP 的本地緩存可以減少 CDN 請求。?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。