我們昨天看完了 react-intl 在專案中的使用方式
今天我們來看，專案中是如何規範翻譯

規範

在專案的早期，翻譯檔都被放在 「helpers/translation.ts」 中
會根據不同的功能和用途分門別類
以下舉個例：

• commonMessages
  放整個專案通用的翻譯檔
• checkoutMessages
  放有關結帳的翻譯檔
• codeMessages
  會放有關後端回傳Code的翻譯檔，如「SUCCESS」或是「E_INPUT」等...

隨著專案的迭代，翻譯檔逐漸被搬到元件和頁面本身
雖然還是會看到一些翻譯檔留在 helpers 中
但在新功能的開發或是修復某個功能的 Bug 時，會採取了新的方式，建立翻譯檔
如 component/activity 中有 translation.ts

import { defineMessages } from 'react-intl'

const activityMessages = {
  '*': defineMessages({
    add: { id: 'activity.*.add', defaultMessage: '新增' },
  }),
  ActivitySessionItem: defineMessages({
    attended: { id: 'activity.ActivitySessionItem.attended', defaultMessage: '已簽到' },
    attendNow: { id: 'activity.ActivitySessionItem.attendNow', defaultMessage: '立即簽到' },
    enterLinkPage: { id: 'activity.ActivitySessionItem.enterLinkPage', defaultMessage: '進入直播頁面' },
    add: { id: 'activity.ActivitySessionItem.add', defaultMessage: '新增' },
  }),
}

export default activityMessages

我們可以看到，子分類如果是有通用的文字，會使用「*」
而其他子分類都會以元件名稱作為命名

id 的部分，格式為「元件.元件名稱.對應的文字」
在 Page 的翻譯，亦是如此

「defaultMessage」則是放入要翻譯成的文字
要翻譯成的文字，原則上會以「英文」為主
現在也在慢慢迭代成英文中

在各個元件或是頁面翻譯完的文字
還需要到 /translations/locales 中的各個語系檔加入
這樣在前台才會顯示對應語系的文字
如果沒有加上的話，會顯示預設文字
並且在 console 中報錯，提醒你要記得去各個語系檔加入對應 ID 的翻譯

今天就先到這了，明天作一個小小的覆盤
做完覆盤我會挑選專案中的幾個功能出來講