Translate Loader for Webpack

The translate-loader is especially useful if you use webpack and need to support multi language.

With translate-loader modules are imported/required from different locations depending on the locale.

For example, if you write import texts from './text_nls', texts will have the content of ./fr/text_nls, if the locale is 'fr'.

Preferrable, the locale should be defined as global variable named locale. If that variable is not defined, translate-loader falls back to navigator.language or navigator.userLanguage.

It's also possible, by setting the option returnFunction to true, to ask translate-loader to return a function that you could then call passing the locale as argument.

Install

npm install --save-dev translate-loader

Usage

Hello World Example

helloworld.js

importlabelsfrom"./nls/labels_nls.json";importstringsfrom"./nls/strings_nls";console.debug(`${labels.helloWorld} (${labels.localeName}). ${strings.textFromJsModule}.`);

nls/labels_nls.json

{
"localeName": "Default",
"helloWorld": "Hello World"
}

nls/strings_nls.js

exportdefault{textFromJsModule: "Text from a JS Module"};

nls/en/labels_nls.json

{
"localeName": "English",
"helloWorld": "Hello World"
}

nls/en-US/labels_nls.json

{
"localeName": "English US",
"helloWorld": "Hello World"
}

nls/es/labels_nls.json

{
"localeName": "Español",
"helloWorld": "Hola Mundo"
}

nls/pt/labels_nls.json

{
"localeName": "Português",
"helloWorld": "Olá Mundo"
}

nls/pt/strings_nls.js

exportdefault{textFromJsModule: "Texto de um módulo JS"};

webpack.config.js

module.exports={module: {rules: [{test: /_nls\.js(on)?$/,use: "translate-loader?locales=en;en-US;es;pt"}]}};

or

webpack.config.js

module.exports={module: {rules: [{test: /_nls\.js(on)?$/,use: {loader: "translate-loader",options: {locales: ["en","en-US","es","pt"]}}}]}};

Multiple locales at the same time

helloworld.js

importstringsfrom"./nls/strings_nls";conststringsPt=strings('pt');conststringsEn=strings('en');console.debug(`This is Portuguese: ${stringsPt.helloWorld}.`);console.debug(`This is English: ${stringsEn.helloWorld}.`);

nls/strings_nls.json

{
"helloWorld": "Hello World"
}

nls/en/strings_nls.json

{
"helloWorld": "Hello World"
}

nls/pt/strings_nls.json

{
"helloWorld": "Olá Mundo"
}

webpack.config.js

module.exports={module: {rules: [{test: /_nls\.js(on)?$/,use: {loader: "translate-loader",options: {locales: ["en","pt"],returnFunction: true,}}}]}};

Maintainers

Willian Balmant