Verwenden von i18next in einem Webpack gebündelte Anwendung

Question

Ich bin ziemlich neu im Webpack Ökosystem, so dass ich nicht alle seine Konzepte erfassen, aber ich arbeite an einer Anwendung, die es verwendet. Ich versuche, i18next einzurichten (siehe: https://github.com/i18next/i18next) und sein XHR-assoziiertes Modul (https://github.com/i18next/i18next-xhr-backend).

Wenn Sie die Übersetzungsdateien über XHR abrufen, wird i18next bei der Beendigung der AJAX-Anforderung im bereitgestellten Rückruf initialisiert. Grundsätzlich möchte ich diese i18next über alle meine Module verfügbar initialisiert, damit ich Strings überall übersetzen kann.

Es gibt einen Abschnitt über das Webpack auf der Github-Seite des i18next-xhr-backend, aber ich verstehe nicht wirklich, wie man den Code strukturiert und wie man ihn benutzt.

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

i18next 
    .use(XHR) 
    .init({ 
    backend: { 
     loadPath: '{{lng}}', 
     parse: (data) => data, 
     ajax: loadLocales 
    } 
    }, (err, t) => { 
    // ... 
    }); 

Ich habe versucht, dies in ein Webpack-Plugin ohne Erfolg zu verwandeln, in der Hoffnung, es wäre überall verfügbar. Aber es könnte nicht der richtige Weg sein, um diese Aufgabe zu erfüllen.

Answer 1

Wenn Sie Ihre Übersetzungen mit Webpack bündeln möchten, können Sie versuchen https://github.com/atroo/i18next-resource-store-loader