為什麼你在辛苦做專案國際化，而別人在喝茶？

朱亮發表於2020-03-26

前言

為什麼你在辛苦做專案國際化，而別人在喝茶，差距在哪裡？???

緊張的業務迭代，複雜的邏輯程式碼，無暇顧及中文文案。提測上線日期臨近，不得不額外花時間和精力去查漏和挨個提取，開發人員習慣不同，英文水平不同，有些開啟 google translate ?，有些拼音?，天文字母一大堆?，送翻時 key 值混亂被吐槽，心好累??

好訊息???！國際化全流程解決方案 - kiwi 最近釋出了一項重要功能，支援指定資料夾或者整個專案的一鍵批量文案提取，在緊張的專案迭代下，讓你專心於邏輯的開發，提高開發效率！

功能演示

按照國際慣例，先來演示下新功能?~

為什麼你在辛苦做專案國際化，而別人在喝茶？

下面看下詳細的替換和提取的內容吧~

1. 支援多種型別的文案提取，包括模板字串

  • 替換之前

image.png

  • 替換檔案和進度提示：

image.png

  • 替換後，會自動新增上 import 語句哦

image.png

  • 生成或更新對應的 langs 檔案：

image.png

2. 細心的你可能發現翻譯的 key 值是前四位字元，那對於前四位相同但整體文案不同的情況怎麼處理呢

image.png

注：對於一切通用的文案如“成功”、“失敗”等已經提取過，這裡不會重複生成新的 I18N key，會直接用已存在的值替換。對於已經存在的 key 值，但文案內容不同的，會按照出現的次數加上字尾。

3. 一些特殊符號開頭的文案，選擇前四位去除特殊字元和數字的文案

image.png

4. 中文符號

image.png

國際化全流程解決方案 - kiwi

可能有些小夥伴還不知道 kiwi 到底是什麼，下面來真誠的介（安）紹（利）一下~

kiwi 不是一個軟體國際化的程式碼庫，而是國際化從設計到釋出的整個流程的一整套解決方案。

​image.png​

kiwi 整體基於 kiwi-intl 國際化框架，實現與框架無關的語言切換功能。

在開發過程中，使用 kiwi linter 實現中文文案的批量自動提取，同時針對替換後的文案變數，在 VS Code 中顯示對應的中文文案。當然你也可以全域性搜尋中文文案，跳轉到對應的程式碼，很好的解決了國際化過程中由於中文文案缺失造成的開發體驗問題。

在翻譯過程中，可以使用 kiwi 命令列自動提取未送翻詞彙，整理成 Excel 方便與翻譯同學協作。針對翻譯同學還沒有返回翻譯文案的期間，可以使用 kiwi 內建的支援 google 以及 多種翻譯平臺的自動翻譯指令碼，先臨時翻譯成對應語言，節省文案調整時間。

國際化文案翻譯完成後，可以使用 kiwi 的命令列工具，一鍵匯入到專案檔案內。

kiwi 還提供了對應 TSLint 的外掛，使用 TSLint 在開發過程中實時提醒未抽離文案，以及在程式碼提交的時候，攔截未國際化的程式碼提交。

  • 提取中文文案

kiwi

  • 檢測程式碼中含有中文文案

image.png

  • 搜尋對應的文案：

image.png

如何接入和使用kiwi？

1. 專案接入 kiwi，使用kiwi的解決方案

在程式碼倉庫內使用 kiwi-intl 的 npm 國際化底層庫，以及安裝 kiwi 體系的 vscode 外掛 kiwi linter，就可以擁有 kiwi 的所有能力。

開源專案地址： github.com/alibaba/kiw…

2. 安裝 kiwi-clis 最新版

yarn global add kiwi-clis && yarn add kiwi-intl複製程式碼複製程式碼

3. 執行 kiwi --init 初始化專案，開啟 kiwi-config.json 檔案配置相關資訊

{
  // kiwi檔案根目錄，用於放置提取的langs檔案
  "kiwiDir": "./.kiwi", 
 
  // 配置檔案目錄，若調整配置檔案，此處可手動修改
  "configFile": "./.kiwi/kiwi-config.json", 
 
  // 語言目錄名，注意連線和下劃線
  "srcLang": "zh_CN", 
  "distLangs": ["en_US", "zh_TW"],
 
  // googleApiKey
  "googleApiKey": "", 
  
  // import 語句，不同專案請自己配置
  "importI18N": "", 
  
  // 可跳過的資料夾名或者文加名，比如docs、mock等
  "ignoreDir": "", 
  "ignoreFile": ""
}複製程式碼複製程式碼

4. 一鍵批量提取指定資料夾下的文案 kiwi --extract [dir]

關於批量提前文案的一些問題

  1. 如何查詢未提取的中文文案？

kiwi 會遍歷指定目錄下的所有非樣式檔案，根據 AST 查詢對應檔案的中文並記錄位置的資訊，當然某些檔案可能並不想被提取和替換，kiwi 也提供了相關的配置。

  1. 中文文案怎麼處理成對應的 key 值？

kiwi 會根據當前檔案的目錄層級來處理 key 值字首，並取中文文案的前四位翻譯成對應的英文，比如文案 “對映欄位” 處理為 mappedField。

  1. 相同的文案內容會多次替換和生成不同的 key 值嗎？

對於有些文案，已經存在於 langs 檔案中，kiwi 不會再重複生成新的 key 值，而是直接用已經替換過的 key 值。

  1. 怎麼保證正確的替換到程式碼中呢？

之前提到，kiwi 在發現中文文案時，會記錄檔案資訊和文案的位置等資訊，後續按照檔案的順序依次的進行 langs 檔案的生成/更新和原檔案程式碼替換。為保證程式碼的正確性，還會自動為使用者新增上import 語句（對應配置項中的 importI18N）。詳細的流程如下：

image.png

  1. 支援哪些檔案的提取？

目前支援度比較高的是 ts 和 tsx 檔案，未來也將支援更多框架和型別的檔案提取。

  1. 可能會出現什麼問題？

因為此項功能依賴 google translate api，可能因為網路環境導致替換不成功。一般出現兩種情況：

  • 介面呼叫失敗，不會更改任何程式碼，需要檢查網路環境；
  • 部分檔案替換成功，部分檔案失敗，這種情況下需要多試幾次才能完成所有檔案的文案提取和替換。

kiwi 是以檔案為單位進行替換和提取的，一旦發生錯誤，該檔案的替換就會停止（並不影響其他檔案），且在 langs 檔案成功新增了對應的 I18N 值的情況下才對原檔案程式碼進行一一替換，可以有效避免程式碼層面的錯誤。

關於我們的團隊

阿里巴巴-資料平臺技術與設計-體驗技術團隊技術氛圍好，大神多~

如果你有興趣加入我們，可以發簡歷至cherry.zj@alibaba-inc.com???


相關文章