國際化

國際化是一個複雜的問題。Qwik 並沒有直接解決國際化問題，而是僅提供低階 API 讓其他函式庫來解決。

執行期與編譯期翻譯

在高階層面上，解決翻譯問題有兩種方法

• 執行期：載入翻譯映射表並在執行期查詢翻譯。
• 編譯時期：透過編譯步驟將翻譯內嵌到輸出字串中。

以上兩種方法都需要考慮其優缺點。

執行時期方法的優點：

• 簡單。不需要額外的建置步驟。

執行時期方法的缺點：

• 每個字串都以三種形式存在
  1. 第一種形式是程式碼中的原始字串。
  2. 第二種形式是翻譯映射表中的鍵值。
  3. 第三種形式是翻譯映射表中的翻譯值。
• 目前的工具缺乏分割翻譯映射表的功能。整個翻譯映射表必須在應用程式啟動時立即載入。這並非理想情況，因為它與 Qwik 將程式碼庫分割並延遲載入的目標背道而馳。此外，由於翻譯映射表沒有被分割，瀏覽器會下載不必要的翻譯。例如，永遠不會在客戶端重新渲染的靜態元件的翻譯。
• 翻譯查詢有執行時期成本。

編譯時期方法的優點：

• Qwik 對程式碼的延遲載入現在擴展到翻譯字串的延遲載入。（不會載入不必要的翻譯文字）
• 沒有執行時期翻譯映射表意味著字串不會以三種形式存在。

編譯時期方法的缺點：

• 需要額外的建置步驟。
• 變更語言需要重新載入頁面。

建議

考慮到上述因素，Qwik 建議您使用最符合您限制的工具。為了幫助您做出決定，我們需要考慮三個不同的方面：瀏覽器、伺服器和開發。

瀏覽器

Qwik 的目標是提供最佳的使用者體驗。它透過將程式碼載入延遲到稍後時間來實現這一點，以便初始啟動效能不會過載。由於執行時期方法需要立即載入所有翻譯，因此我們不建議使用此方法。我們認為編譯時期方法最適合瀏覽器。

伺服器

伺服器沒有延遲載入的限制。因此，伺服器可以使用執行時期或編譯時期方法。伺服器上編譯時期方法的缺點是，我們需要為每個翻譯版本進行單獨部署。這使得部署過程變得複雜，並且對伺服器數量的需求也更高。因此，我們認為執行時期方法更適合伺服器。

開發

在開發過程中，建置步驟越少，周轉時間就越快。因此，執行時期翻譯應該會帶來更簡單的開發流程。

我們的建議

我們的建議是使用一種工具，該工具可以在伺服器上提供執行時期方法，並根據我們是在開發環境還是生產環境中，在客戶端上提供執行時期或編譯時期方法。這樣就可以提供最佳的使用者體驗和開發體驗，並使用最少的伺服器資源。

國際化函式庫

$localize

$localize 翻譯系統基於 Angular 的 $localize 系統。翻譯內容可以提取為 xmb、xlf、xlif、xliff、xlf2、xlif2、xliff2 和 json 格式。

注意：$localize 系統是一個編譯時期翻譯系統，在最終輸出中會被完全移除。$localize 是 Angular 的一個子專案，包含它的使用並不意味著 Angular 被用於應用程式的渲染。

將 $localize 添加到 Qwik 的最簡單方法是使用 pnpm qwik add localize 命令。這將安裝所需的依賴項，並建立一個新的公共路由 /src/routes/[locale] 來展示 i18n $localize 整合。

npm run qwik add localize

如需更多參考，請查看此 範例儲存庫。

提取翻譯

當您完成更改後，可以使用 npm run i18n-extract 從程式碼中提取翻譯。這將更新您在 package.json 中看到的檔案。

使用 DeepL 自動翻譯 $localize

若要自動翻譯，可以使用 deepl-localize 套件。它將使用 deepl.com API 自動翻譯您的字串。

使用 deepl-localize 命令搭配 npx 翻譯您的字串

npx deepl-localize translate -b src/locales/message.en.json -l de-DE fr-FR -a "YOUR-DEEPL-API-KEY"

或者，您也可以在腳本區段中使用 deepl-localize 命令來翻譯您的字串

{
  "scripts":{
    "translate":"deepl-localize translate -b src/locales/message.en.json -l de-DE fr-FR -a 'your-deepl-api-key'"
  }
}

qwik-speak

qwik-speak 函式庫，用於在 Qwik 應用程式中翻譯文字、日期和數字。

將 qwik-speak 新增至 Qwik 的最簡單方法是遵循官方 指南。