我從 Angular 中分離出來本地化:`@cyia/localize` 詳情 - angular,i18n,l10n,node.js,web wszgrcy 博客

最近在做 VSCode Extension 開發的時候,發現一個問題,插件部分和 WebView 部分有時候會共用一部分代碼,而這部分代碼裏又恰好有需要翻譯的內容,這就導致 VSCode 本身提供的 l10n 沒法使用
因為 WebView 部分頁面是使用 Angular 開發,所以如果能用一種翻譯實現是最好的了,所以我想到了 Angular 中的 localize,對分離模塊,使其成為通用依賴

如何使用?

訪問使用文檔

如何分離?

有了分離依賴注入的經驗,其實這個已經很簡單了,因為他是一個獨立模塊,所以只要把引入部分和提取部分找到就可以了
引用部分原封不動導出,提取部分使用了一部分自實現代碼,但相關id生成算法仍然是一樣的,也就是説在 Angular 中的翻譯可以直接移動到這裏使用

同步更新

由於localize部分改動不是很多,所以只修改了很少一部分.

使用同步腳本並使用github actions進行更新測試

    - uses: wszgrcy/code-recycle-action@main
      with:
        path: ./script/sync-localize.ts
        cwd: ./src

調用方法

import { $localize } from '@cyia/localize';
$localize`one`;

使用i18n ./src 提取src下所有$localize標籤模板內容生成extract.json元數據

與@angular/localize 生成 id 一致
複製extract.json自定義語言翻譯,將翻譯內容寫入到target字段
使用i18n convert ./i18n-merge ./i18n將翻譯元數據轉換為key-value格式用於引用
自定義引用格式導入翻譯,如

// node環境演示
import path from 'path';
import fs from 'fs';
import { loadTranslations } from '@cyia/localize';
export const LanguageMap: Record<string, string> = {
  zh_cn: 'zh-Hans',
  cn: 'zh-Hans',
  en: 'en-US',
  en_us: 'en-US',
};
export function loadI18n() {
  let lang = process.env['CR_LANG']?.toLowerCase();
  if (!lang) {
    if (process.env['LANGUAGE']) {
      lang = process.env['LANGUAGE'].split(':')[0].toLowerCase();
    } else if (process.env['LANG']) {
      lang = process.env['LANG'].split('.')[0].toLowerCase();
    }
  }
  let cache;
  const filePath = path.join(__dirname, `./i18n/${LanguageMap[lang!] || lang || 'zh-Hans'}.json`);
  if (ENV === 'test') {
    cache = {};
  } else {
    if (!fs.existsSync(filePath)) {
      cache = __non_webpack_require__('./i18n/zh-Hans.json');
    } else {
      cache = __non_webpack_require__(filePath);
    }
  }

  loadTranslations(cache);
}

loadI18n();