首頁 >web前端 >js教程 >簡化本地化

簡化本地化

WBOY
WBOY原創
2024-08-09 07:37:521138瀏覽

在地化在現代 Web 開發中至關重要,但往往很麻煩。管理翻譯文件、確保一致性和整合更新可能會變得難以承受,尤其是在大型程式碼庫中。傳統的 i18n 庫需要開發人員手動處理這些複雜性,導致效率低下和潛在的錯誤。

現有 i18n 庫的問題

許多現有的 i18n 庫要求開發人員:

  • 手動建立和管理 JSON 文件:開發人員必須建立和更新用於翻譯的 JSON 文件,這很容易出錯且耗時。
  • 將所有翻譯儲存在一個檔案中:這可能會導致管理大型應用程式的翻譯變得困難,導致檔案臃腫而難以導航。
  • 使用任意鍵:與實際文字不對應的簡單鍵使得在程式碼庫中搜尋特定翻譯變得更加困難。

這些挑戰增加了開銷和複雜性,使在地化成為一項可怕的任務。

我是如何處理的

我創建了一個 JS 庫和一個圍繞它的生態系統,透過旨在使本地化簡單且無麻煩的功能來解決這些痛點:

自動翻譯文件生成

使用整合的 ESLint 插件,localang-i18n-js 根據程式碼中的文字自動產生翻譯檔。這意味著不再需要手動建立或更新 JSON 檔案。該插件可確保您的翻譯文件始終是最新且準確的。

Simplify Localization

在地化翻譯文件

翻譯檔案放置在對應的程式碼檔案旁邊。這種在地化方法使管理翻譯變得更加容易,因為每個元件或模組都有自己的一組翻譯檔案。

基於文字的按鍵

localang-i18n-js 不使用任意鍵,而是使用實際文字作為鍵。這使得在程式碼庫中搜尋和尋找特定翻譯變得容易。如果您在 UI 中看到一段文本,您可以透過搜尋確切的文本來快速在程式碼中找到它。

例如,如果你在index.js檔案中寫入i18n('What is love?')和i18n('{count} left'),那麼就會在它旁邊建立一個index.i18n.js文件,其中包含以下內容:

import { makeI18n } from 'localang-i18n-js';
// or const { makeI18n } = require('localang-i18n-js');

const keyset = {
    'What is love?': {
        en: 'What is love?',
        ar: '',
    },
    '{count} left': {
        en: {
            zero: 'Nothing left',
            one: 'One left',
            two: 'Two left',
            few: 'A few left',
            many: 'Many left',
            other: '{count} left',
        },
        ar: {
            zero: '',
            one: '',
            two: '',
            few: '',
            many: '',
            other: ''
        },
    },
};

export const i18n = makeI18n(keyset);
// or module.exports = makeI18n(keyset);

SaaS 集成

localang-i18n-js 與用於管理翻譯的 SaaS 平台集成,允許非開發人員直接在程式碼庫中更新翻譯。這意味著您的在地化團隊無需開發人員參與即可處理更新,從而簡化流程並降低錯誤風險。

自動化的 GitHub Actions

為了進一步簡化在地化流程,localang-i18n-js 已準備好使用 GitHub Actions 來自動同步翻譯檔。您可以設定工作流程以從翻譯平台提取最新翻譯或直接從程式碼庫將新翻譯推送到平台。這種自動化可確保您的翻譯始終是最新的,無需手動幹預。

以上是簡化本地化的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn