aurealia-i18n 和最新的 webpack typescript 骨架

Question

我正在尝试将 aurelia-i18n 插件与最新的 typescript webpack 骨架一起使用。

所以我已经安装了所需的 npm 包

npm install aurelia-i18n --save
npm install i18next-xhr-backend --save
npm install i18next-browser-languagedetector --save

然后我改变了我的 main.ts

import { Aurelia } from 'aurelia-framework';
import { PLATFORM } from 'aurelia-pal';
import XHR from 'i18next-xhr-backend';
import LngDetector from 'i18next-browser-languagedetector';

export async function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin(PLATFORM.moduleName('aurelia-i18n'), (instance) => {
      // register i18n plugins
      instance.i18next
          .use(XHR)
          .use(LngDetector);


      // adapt options to your needs (see http://i18next.com/docs/options/)
      // make sure to return the promise of the setup method, in order to guarantee proper loading
      return instance.setup({
          backend: {                                  // <-- configure backend settings
              loadPath: './Locale/{{lng}}/{{ns}}.json', // <-- XHR settings for where to get the files from
          },
          detection: {
              order: ['localStorage', 'cookie', 'navigator'],
              lookupCookie: 'i18next',
              lookupLocalStorage: 'i18nextLng',
              caches: ['localStorage', 'cookie']
          },
          attributes: ['t', 'i18n'],
          fallbackLng: 'en',
          load: 'languageOnly',
          debug: false,
          ns: ['translation', 
              'StammAlbum', 
              'StammCategory', 
              'StammCategoryValue', 
              'StammPictureAdmin',
              'StammPictureUpload',
              'StammVideoUpload',
              'StammVideoAdmin',
              'VideoKonverter',
              'Router', 
              'Datamappings', 
              'Toasts', 
              'Alerts', 
              'Controls', 
              'Metadata', 
              'Dialogs',
              'AuthRegister',
              'SecurityQuestions',
              'Countries',
              'Validation',
              'AuthConfirmAccount',
              'AuthLogin',
              'AuthForgotPassword',
              'AuthAdminAccount',
              'AuthNewPassword',
              'Messages'],
          defaultNS: 'translation'
      });
  });

  await aurelia.start();

  await aurelia.setRoot(PLATFORM.moduleName('FamilieLaissApp'));
}

webpack 打包器没有显示错误。但在浏览器控制台中，我可以看到每个翻译文件的 404 错误。

所以我尝试了 aurelia hub 上记录的使用内置后端的解决方案并更改了 main.ts

import { Aurelia } from 'aurelia-framework';
import { PLATFORM } from 'aurelia-pal';
import {I18N, Backend} from 'aurelia-i18n';
import LngDetector from 'i18next-browser-languagedetector';

export async function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin(PLATFORM.moduleName('aurelia-i18n'), (instance) => {
      // register i18n plugins
      instance.i18next
          .use(Backend.with(aurelia.loader))
          .use(LngDetector);


      // adapt options to your needs (see http://i18next.com/docs/options/)
      // make sure to return the promise of the setup method, in order to guarantee proper loading
      return instance.setup({
          backend: {                                  // <-- configure backend settings
              loadPath: './Locale/{{lng}}/{{ns}}.json', // <-- XHR settings for where to get the files from
          },
          detection: {
              order: ['localStorage', 'cookie', 'navigator'],
              lookupCookie: 'i18next',
              lookupLocalStorage: 'i18nextLng',
              caches: ['localStorage', 'cookie']
          },
          attributes: ['t', 'i18n'],
          fallbackLng: 'en',
          load: 'languageOnly',
          debug: false,
          ns: ['translation', 
              'StammAlbum', 
              'StammCategory', 
              'StammCategoryValue', 
              'StammPictureAdmin',
              'StammPictureUpload',
              'StammVideoUpload',
              'StammVideoAdmin',
              'VideoKonverter',
              'Router', 
              'Datamappings', 
              'Toasts', 
              'Alerts', 
              'Controls', 
              'Metadata', 
              'Dialogs',
              'AuthRegister',
              'SecurityQuestions',
              'Countries',
              'Validation',
              'AuthConfirmAccount',
              'AuthLogin',
              'AuthForgotPassword',
              'AuthAdminAccount',
              'AuthNewPassword',
              'Messages'],
          defaultNS: 'translation'
      });
  });

  await aurelia.start();

  await aurelia.setRoot(PLATFORM.moduleName('FamilieLaissApp'));
}

但这个解决方案也没有运气。 404 错误消失了，但本地化字符串未显示在我的应用程序中。我只能看到 Localization.Identifiers 而不是本地化文本，并且浏览器在控制台输出中没有显示错误。

那么我必须做些什么才能让这件事发挥作用？

Answer 1

这是我的工作配置。我不使用打字稿，但您的问题与使用 webpack 捆绑语言环境文件有关

var Promise = require('bluebird'); // Promise polyfill for IE11

Promise.config({
    // Enable warnings
    warnings: false,
    // Enable long stack traces
    longStackTraces: true,
    // Enable cancellation
    cancellation: false,
    // Enable monitoring
    monitoring: false
});

import 'intl';
import 'intl/locale-data/jsonp/en';
import 'intl/locale-data/jsonp/de';

import {bootstrap} from 'aurelia-bootstrapper-webpack';

import '../theme/assets/css/jquery-ui.css';
//import '-!style!css!../theme/assets/css/jquery-ui.css';
// note! import bootstrap styles after ace
import '../theme/assets/css/ace.css';
import '../theme/assets/css/bootstrap.css';
import '../styles/main.less';

import 'jquery-ui/jquery-ui';
// just js from bootstrap
import 'bootstrap-webpack/bootstrap-scripts!bootstrap-webpack/bootstrap.config.js';

// always import ace-theme after jquery-ui and bootsrap
import 'ace-theme/ace';
import 'ace-theme/ace-elements';

import 'font-awesome-webpack';

import XHR from 'i18next-xhr-backend';


function loadLocales(url, options, callback, data) {
  try {
    let waitForLocale = require('bundle!json!../locale/' + url + '.json');
    waitForLocale((locale) => {
      callback(locale, {status: '200'});
    })
  } catch (e) {
    callback(null, {status: '404'});
  }
}

bootstrap(function (aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-i18n', (instance) => {
      // register backend plugin
      instance.i18next.use(XHR);
      // adapt options to your needs (see http://i18next.com/docs/options/)
      return instance.setup({
        backend: {                                  // <-- configure backend settings
          //loadPath: '/locale/{{lng}}/{{ns}}.json' // <-- XHR settings for where to get the files from
          loadPath: '{{lng}}/{{ns}}',
          parse: (data) => data,
          ajax: loadLocales
        },
        lng: 'de',
        attributes: ['t', 'i18n'],
        fallbackLng: 'en',
        debug: false,
        //debug: true,
        //compatibilityJSON: 'v1',
        ns: ['translation', 'nav', 'secuident', 'validation']
      });
    })
    .plugin('aurelia-validation')
    .plugin('aurelia-dialog', config => {
      config.useDefaults();
      config.settings.startingZIndex = 5000;
    });

  aurelia.start().then(() => aurelia.setRoot('app-webpack', document.body));
});