管理i18n的好幫手 — phrase

發表於 2023-09-17 更新於 2023-12-01 分類於 i18n

一直以來處理i18n對於工程師來說是一件有點繁瑣的事情，不只是要建立語系的json檔，還有後續的翻譯文字更換需求，想必大家都有過以下的情境，假設有個網頁有多國語系(i18n)的需求，第一版的翻譯已經完成了，工程師也開發完畢，但這時候pm想要調整翻譯的文字該怎麼做，以往都會是把要改…

一直以來處理 i18n 對於工程師來說是一件有點繁瑣的事情，不只是要建立語系的 json 檔，還有後續的翻譯文字更換需求，想必大家都有過以下的情境，假設有個網頁有多國語系(i18n)的需求，第一版的翻譯已經完成了，工程師也開發完畢，但這時候 pm 想要調整翻譯的文字該怎麼做，以往都會是把要改的文字內容傳給工程師，請他調整對吧？

但通常會面臨到一些問題

要調整的地方有好多，工程師要一一核對
因為版面的關係，造成特定語系跑版，需要反覆的調整翻譯字句

而且這類型修改 i18n 的工作對於工程師來說真的很累人，這就是為什麼我需要 phrase 來輔助處理 i18n 的原因，接下來會介紹 phrase 有那些功能

phrase 特點

提供了 Microsoft translate、Google translate、Amazon translate 等工具，不過這類型的翻譯工具通常翻出來的語句沒那麼通順，實務上可能還是需要翻譯人員協作
在 phrase 的網站調整完翻譯之後，自動同步最新的 i18n 檔案到程式碼的 repo，再也不用透過工程師修改
可以針對單一字詞上傳截圖，讓翻譯人員知道這個翻譯的字句會用在哪裡，好比說有一個網頁的按鈕很小顆，若翻譯給的單詞太長的話就可能會有跑版的問題，所以如果有附加截圖，就可以給翻譯做個參考
轉換語系檔很方便，可以將 import 的語系檔轉 export 任何格式

開始實作

本次練習使用 Phrase string ，註冊完畢後會進入 projects overview 的頁面，先點擊右上角的 add project，就會出現新增的彈窗，名稱輸入 phrase-test

main format 可以選擇要建立的語系檔案格式，不限於 json，還有很多類型的格式可以選擇，main technology 這邊選擇 javascript

建立好 project 之後會進到這個頁面，引導你先設定這個 project 支援哪些語系

可以一次設定多個語系

第二個步驟是要上傳語系 json 檔案，如果今天只是單純要協作修改 i18n 檔案，並沒有要和 repo 連動，可以選擇自行上傳 json 檔，不過我們要設定與 github 的 json 同步，所以該步驟可以省略

接下來我們要聯動 phrase 和 github，首先要先把本機的 i18n json push 到 phrase 的平台，完成第一次的初始化之後，翻譯者就能在 phrase 平台編輯翻譯的字句了，等待完成編輯之後再以發 pr 的方式，更新 github 上 i18n json，可參考下面的流程圖

如何將本機的 i18n 上傳到 phrase

透過 brew 安裝 phrase cli (使用 windows 的朋友請用其他方法安裝

1	brew install phrase-cli

執行 phrase init 生成 phrase.yaml，會要求你輸入 phrase token

這時我們回到 phrase 的網站，在 settings 裏面可以建立 token

建立 token 讓我們等一下可以有權限把本地的 i18n json push 到 phrase，這裡可以把 phrase 想像成是多國語系界的 github，只是放的不是程式碼，是 i18n 的檔案

建立成功之後就可以複製這段 token

回到 terminal 把剛剛的 phrase token 貼上，就能夠讀取現在 phrase 上面現有的所有專案，並且詢問你要連結的專案是哪一個，這邊我要選擇剛剛建立的 phrase-test 專案，所以輸入數字 3

接著會詢問你要使用的檔案格式為何，我選擇 simple JSON，因此輸入空白鍵

這邊要設定想要上傳到 phrase 的 json 路徑為何，我習慣將 i18n 的檔案放在 assets 底下，因此設定為 ./src/assets/i18n/<locale_name>.json

最後 phrase cli 會自動生成一個 yml 檔，我們需要將這個 yml 檔 push 到 github 上面，不然後續設定會有問題

phrase:
  access_token: 1ab5526613db5e21c2f6?????????????????????
  project_id: 379cf3c441e59bd95a1106b504acd091
  push:
    sources:
      - file: ./src/assets/i18n/<locale_name>.json
        params:
          file_format: simple_json
  pull:
    targets:
      - file: ./src/assets/i18n/<locale_name>.json
        params:
          file_format: simple_json