Package Exports

translate-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (translate-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

import labels from "./nls/labels_nls.json";
import strings from "./nls/strings_nls";

console.debug(`${labels.helloWorld} (${labels.localeName}). ${strings.textFromJsModule}.`);

nls/labels_nls.json

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

nls/strings_nls.js

export default {
  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

export default {
  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"
    }]
  }
};

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

import strings from "./nls/strings_nls";

const stringsPt = strings('pt');
const stringsEn = 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