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

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

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

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

Ниже приведены минималистичные задачи gulp.

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"
  }
}

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

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

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

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

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