// Use it explicitlyvarmessages=require("json!po!./locale/en_US/LC_MESSAGES/messages.po");// Or add a loader into your webpack.config.js
loaders: [{test: /\.po$/,loader: 'json!po'}]// And then require it like thisvarmessages=require("./locale/en_US/LC_MESSAGES/messages.po");See po2json for a list of possible options. Use the format option to change the output format, e.g. json!po?format=jed or json!po?format=jed1.x for the latest Jed format.
importJedfrom'jed'// The Locale consists of a language and territory.constlanguage=langParts[0]constterritory=langParts[1].toUpperCase()// Set completeconstlocale=multipart ? language+'_'+territory : languageleti18n=nullexportdefault{asyncinit(){constlangRaw=window.navigator.userLanguage||window.navigator.languageconstlangParts=langRaw.replace('-','_').split('_')constlanguage=langParts[0]constcountry=langParts.length>1 ? '_'+langParts[1].toUpperCase() : ''constlocale=`${language}${country}`letlocaleDatatry{localeData=awaitgetLocaleData(locale)}catch{localeData=awaitgetLocaleData(LOCALE_DEFAULT)}i18n=newJed(localeData)},gettext(message){returni18n.gettext(message)},ngettext(msg1,msg2,n){returni18n.ngettext(msg1,msg2,n)},}// A runtime exception will be throw every time that the requested locale file cannot be found.// Webpack uses a regular expression to build all locales as separate bundles.asyncfunctiongetLocaleData(locale){returnimport(`${LOCALE_ROOT}/${locale}/LC_MESSAGES/messages.po`)}Language fallback map stored at ${LOCALE_ROOT}/config:
---
default: en_USmap:
en: en_USru: ru_RUuk: ru_RUde: de_DE
...locale module:
importJedfrom'jed'leti18nletlocaleConfigexportdefault{asyncinit(){constlocaleConfig=awaitimport(`${LOCALE_ROOT}/config`)constlocaleDefault=localeConfig['default']constmap=localeConfig['map']constlangRaw=window.navigator.userLanguage||window.navigator.languageconstlangParts=langRaw.replace('-','_').split('_')constlanguage=langParts[0]constcountry=langParts.length>1 ? '_'+langParts[1].toUpperCase() : ''constlocale=`${language}${country}`letlocaleDatatry{localeData=awaitgetLocaleData(locale)}catch{constlocaleNext=map.hasOwnProperty(language) ? map[language] : localeDefaultlocaleData=awaitgetLocaleData(localeNext)}i18n=newJed(localeData)},gettext(message){returni18n.gettext(message)},ngettext(msg1,msg2,n){returni18n.ngettext(msg1,msg2,n)},}// A runtime exception will be throw every time that the requested locale file cannot be found.// Webpack uses a regular expression to build all locales as separate bundles.asyncfunctiongetLocaleData(locale){returnimport(`${LOCALE_ROOT}/${locale}/LC_MESSAGES/messages.po`)}Then in your common shared code:
constlocalePromise=locale.init()constdocumentPromise=newPromise(function(resolve,reject){document.addEventListener('DOMContentLoaded',resolve,false)})init([localePromise,documentPromise])Finally in your entry code:
importinitfrom'init'init().then(function(){console.log('The locale module is now ready.')})