Arhn - архитектура программирования

Использование Webpack для i18n как в Angular

Я большой поклонник процесса i18n, поставляемого с Angular 2+, в частности, следующих двух функций:

  1. Возможность создавать файлы перевода из аннотированных HTML-шаблонов с помощью команды CLI (ng xi18n).
  2. Возможность замены текстов шаблонов их переводами во время сборки (экономия ресурсов во время выполнения ).

Сейчас я работаю над проектом, отличным от Angular, и хотел бы реализовать процесс i18n, аналогичный описанному выше. Проект основан на AngularJS и использует настраиваемую сборку Webpack. Файлы шаблонов HTML в настоящее время загружаются с помощью необработанного загрузчика Webpack и объединяются в виде строк.

Сам Webpack предлагает объединить свои загрузчики HTML и i18n. Хотя это, вероятно, решит (2), это не решит (1), и синтаксис, требуемый в шаблонах, будет довольно далек от того, который используется в Angular (т.е. добавление атрибутов i18n="" к элементам, которые должны быть переведены).

Есть ли у кого-нибудь опыт работы с такого рода проблемами? Есть ли способ использовать специализированный загрузчик Webpack для этого варианта использования или, может быть, даже крошечную часть системы сборки Angular 2+?

webpack angular internationalization
16.04.2019

Ответы:


1

У меня есть опыт реализации подобного варианта использования. Вам нужно написать сервис, чтобы прочитать файл конфигурации, содержащий перевод xml, а затем вставить его в main.ts на этапе начальной загрузки вашего приложения, чтобы он мог читать перевод xml

main.ts

        import { platformBrowserDynamic }  from '@angular/platform-browser-dynamic';
        import { getTranslationProviders } from './app/i18n-providers';

        import { AppModule } from './app/app.module';

        getTranslationProviders().then(providers => {
          const options = { providers };
          platformBrowserDynamic().bootstrapModule(AppModule, options);
        });

i18n-provider.ts

    import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';

    export function getTranslationProviders(): Promise<Object[]> {

      // Get the locale id from the global
      const locale = document['locale'] as string;

      // return no providers if fail to get translation file for locale
      const noProviders: Object[] = [];

      // No locale or U.S. English: no translation providers
      if (!locale || locale === 'en-US') {
        return Promise.resolve(noProviders);
      }

      // Ex: 'locale/messages.es.xlf`
      const translationFile = `./locale/messages.${locale}.xlf`;

      return getTranslationsWithSystemJs(translationFile)
        .then( (translations: string ) => [
          { provide: TRANSLATIONS, useValue: translations },
          { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
          { provide: LOCALE_ID, useValue: locale }
        ])
        .catch(() => noProviders); // ignore if file not found
    }

    declare var System: any;

    function getTranslationsWithSystemJs(file: string) {
      return System.import(file + '!text'); // relies on text plugin
    }

тогда в вашем html

    <h1 i18n="User welcome|An introduction header for this sample">Hello i18n!</h1>
16.04.2019
  • Извините, если я что-то упустил, но я не думаю, что это решение применимо здесь. Вы загружаете приложение Angular 2+. Я ищу способ сделать это в проекте, отличном от Angular (в частности, на основе AngularJS, то есть Angular 1.x, но я не думаю, что это имеет значение). 17.04.2019
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..