管理i18n的好幫手 — phrase

Published in

Coding Hot Pot

Sep 17, 2023

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

但通常會面臨到一些問題

1.要調整的地方有好多，工程師要一一核對

2.因為版面的關係，造成特定語系跑版，需要反覆的調整翻譯字句

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

phrase特點

1.提供了Microsoft translate、Google translate、Amazon translate等工具，不過這類型的翻譯工具通常翻出來的語句沒那麼通順，實務上可能還是需要翻譯人員協作

2.在phrase的網站調整完翻譯之後，自動同步最新的i18n檔案到程式碼的repo，再也不用透過工程師修改

3.可以針對單一字詞上傳截圖，讓翻譯人員知道這個翻譯的字句會用在哪裡，好比說有一個網頁的按鈕很小顆，若翻譯給的單詞太長的話就可能會有跑版的問題，所以如果有附加截圖，就可以給翻譯做個參考

4. 轉換語系檔很方便，可以將import的語系檔轉export 任何格式

phrase是需要付費的服務，但是有提供幾天的試用，可以先試試看是否符合自身的需求

開始實作

本次練習使用 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的朋友請用其他方法安裝

$ 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

將本機的i18n json與phrase網站的連動前置作業已經完成了，假設我們現在需要將json檔上傳到phrase，只要執行 phrase push即可