Aurelia I18N: сканируйте HTML-источники на наличие новых ключей и обновляйте файлы translation.json - PullRequest
Новая
       21

Aurelia I18N: сканируйте HTML-источники на наличие новых ключей и обновляйте файлы translation.json

1 голос
/ 16 мая 2019

Существует ли какой-либо инструмент для сканирования исходных файлов проекта (html, js) проекта aurelia и создания (обновления) ключей в translation.json файлах?

Особенно я хочу собирать ключи из файлов HTML, которые используют TBindingBehavior и TValueConverter стиль перевода.

1 Ответ

0 голосов
/ 26 мая 2019

Отказ от ответственности: Предлагаемые пакеты разработаны моей компанией-работодателем.

Ниже приведены основные этапы этого процесса.

  1. Генерация ключей i18n для шаблонов html с использованием gulp-i18n-update-localization-ids
  2. Извлечение ключей и значений во внешний ресурс с использованием gulp-i18n-extract
  3. Перевести вручную значения для разных языков
  4. Скомпилируйте переводы для создания файлов локали для другого языка, используя gulp-i18n-compile2

Ниже приведены минималистичные глотковые задания 

const gulp = require("gulp");
const path = require("path");
const updateLocalizationIds = require('gulp-i18n-update-localization-ids');
const i18nExtract = require('gulp-i18n-extract');
const i18nCompile = require('gulp-i18n-compile2');

const src = path.resolve(__dirname, "src"),
    json = path.resolve(src, "*.r.json"),
    html = path.resolve(src, "*.html"),
    translations = path.resolve(__dirname, "translations/i18n.json"),
    locales = path.resolve(__dirname, "locales"),
    i18nGlobalPrefixes = new Map();

const generateI18nKeys = function () {
    return gulp.src(html)
        .pipe(updateLocalizationIds({
            emit: 'onChangeOnly',
            ignore: [{ content: v => v.startsWith('${') && v.endsWith('}') }],
            idTemplate: updateLocalizationIds.prefixFilename(i18nGlobalPrefixes),
            whitelist: [
                { tagName: 'h2' },
                {
                    tagName: 'another-custom-el',
                    attrs: ['some-other-value1', 'some-other-value2']
                }
            ]
        }))
        .pipe(gulp.dest(src));
}

const i18nExtractOptions = {
    plugIns: [
        new i18nExtract.html(),
        new i18nExtract.json()
    ],
    markUpdates: true,
    defaultLanguages: ['de', "fr"] // add more language here as per your need
};

const extractI18n = function () {
    return gulp.src([html, json])
        .pipe(i18nExtract.extract(translations, i18nExtractOptions))
        .pipe(gulp.dest("."));
}

const compileOptions = {
    fileName: "translation.json",
    defaultLanguage: "en"
};

const compileI18n = function () {
    return gulp.src(translations)
        .pipe(i18nCompile(compileOptions))
        .pipe(gulp.dest(locales));
}

gulp.task("i18n", gulp.series(generateI18nKeys, extractI18n, compileI18n));

Что здесь происходит?

Предположим, что у вас есть все html-файлы в каталоге src. Вы также можете иметь несколько простых файлов json в src, которые действуют как внешние ресурсы. Хотя это на самом деле не нужно, в этом примере я использовал для этого расширение *.r.json (r указывает на ресурс).

Первая задача generateI18nKeys генерирует ключи i18n для HTML-шаблонов. Например, он преобразует следующее edit.html ... 

<!--edit.html-->
<h2>some text</h2>
<another-custom-el some-other-value1="value1" some-other-value2="value2"></another-custom-el>

... на следующий 

<!--edit.html-->
<h2 t="edit.t0">some text</h2>
<another-custom-el some-other-value1="value1" some-other-value2="value2"
  t="[some-other-value1]edit.t1;[some-other-value2]edit.t2"></another-custom-el>

Используйте свойство whitelist в параметре конфигурации для этой задачи, чтобы пометить элементы и атрибуты для цели генерации ключа.

На следующем этапе ключи и соответствующие значения извлекаются в файл json, который выглядит следующим образом. 

{
  "edit": {
    "content": {
      "edit.t0": {
        "content": "some text",
        "lastModified": "2019-05-26T16:23:42.306Z",
        "needsUpdate": true,
        "translations": {
          "de": {
            "content": "",
            "lastModified": ""
          },
          "fr": {
            "content": "",
            "lastModified": ""
          }
        }
      },
      "edit.t1": {
        "content": "value1",
        "lastModified": "2019-05-26T16:23:42.306Z",
        "needsUpdate": true,
        "translations": {
          "de": {
            "content": "",
            "lastModified": ""
          },
          "fr": {
            "content": "",
            "lastModified": ""
          }
        }
      },
      "edit.t2": {
        "content": "value2",
        "lastModified": "2019-05-26T16:23:42.306Z",
        "needsUpdate": true,
        "translations": {
          "de": {
            "content": "",
            "lastModified": ""
          },
          "fr": {
            "content": "",
            "lastModified": ""
          }
        }
      }
    },
    "src": "src\\edit.html"
  }
}

Обратите внимание, что пустое содержимое генерируется для localeIds, указанных в задаче. Вы можете вручную изменить этот файл, чтобы добавить переводы для каждого настроенного языка.

Наконец, задача compileI18n 1056 * генерирует файлы для каждого языка из последнего json, что выглядит примерно так: 

{
  "edit": {
    "t0": "some text",
    "t1": "value1",
    "t2": "value2"
  }
}

Обратите внимание, что этот файл может напрямую использоваться плагином aurelia-i18n. Для получения более подробной информации ознакомьтесь с документацией на конкретный пакет.

Надеюсь, это поможет.

...