爲什麼你在辛苦做項目國際化,而別人在喝茶

前言

爲什麼你在辛苦做項目國際化,而別人在喝茶,差距在哪裏?🤔🤔🤔緊張的業務迭代,複雜的邏輯代碼,無暇顧及中文文案。提測上線日期臨近,不得不額外花時間和精力去查漏和挨個提取,開發人員習慣不同,英文水平不同,有些打開 google translate 😅,有些拼音😬,天文字母一大堆🙄,送翻時 key 值混亂被吐槽,心好累🤯🥺

好消息🎉🎉🎉!國際化全流程解決方案 - kiwi 最近發佈了一項重要功能,支持指定文件夾或者整個項目的一鍵批量文案提取,在緊張的項目迭代下,讓你專心於邏輯的開發,提高開發效率!

功能演示

按照國際慣例,先來演示下新功能🤗~

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

1.支持多種類型的文案提取,包括模板字符串

  • 替換之前

  • 替換文件和進度提示:

  • 替換後,會自動添加上 import 語句哦

    生成或更新對應的 langs 文件:

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

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

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

4.中文符號

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

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

kiwi 不是一個軟件國際化的代碼庫,而是國際化從設計到發佈的整個流程的一整套解決方案。​​

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

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

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

國際化文案翻譯完成後,可以使用 kiwi 的命令行工具,一鍵導入到項目文件內。

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

  • 提取中文文案
  • 檢測代碼中含有中文文案
    - 搜索對應的文案:

    如何接入和使用kiwi?
  1. 項目接入 kiwi,使用kiwi的解決方案在代碼倉庫內使用 kiwi-intl 的 npm 國際化底層庫,以及安裝 kiwi 體系的 vscode 插件 kiwi linter,就可以擁有 kiwi 的所有能力。開源項目地址: https://github.com/alibaba/kiwi

  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": ""
  }
  1. 一鍵批量提取指定文件夾下的文案 kiwi --extract [dir]

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

1.如何查找未提取的中文文案?

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

2.中文文案怎麼處理成對應的 key 值?

kiwi 會根據當前文件的目錄層級來處理 key 值前綴,並取中文文案的前四位翻譯成對應的英文,比如文案 “映射字段” 處理爲 mappedField。

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

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

4.怎麼保證正確的替換到代碼中呢?

之前提到,kiwi 在發現中文文案時,會記錄文件信息和文案的位置等信息,後續按照文件的順序依次的進行 langs 文件的生成/更新和原文件代碼替換。爲保證代碼的正確性,還會自動爲用戶添加上import 語句(對應配置項中的 importI18N)。詳細的流程如下:

5.支持哪些文件的提取?

目前支持度比較高的是 ts 和 tsx 文件,未來也將支持更多框架和類型的文件提取。

6.可能會出現什麼問題?
因爲此項功能依賴 google translate api,可能因爲網絡環境導致替換不成功。一般出現兩種情況:

  • 接口調用失敗,不會更改任何代碼,需要檢查網絡環境;
  • 部分文件替換成功,部分文件失敗,這種情況下需要多試幾次才能完成所有文件的文案提取和替換。

kiwi 是以文件爲單位進行替換和提取的,一旦發生錯誤,該文件的替換就會停止(並不影響其他文件),且在 langs 文件成功添加了對應的 I18N 值的情況下才對原文件代碼進行一一替換,可以有效避免代碼層面的錯誤。

關於我們的團隊

阿里巴巴-數據平臺技術與設計-體驗技術團隊技術氛圍好,大神多~

如果你有興趣加入我們,可以發簡歷至 [email protected]

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章