translate-loader

    0.3.0 • Public • Published

    npm node

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

    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

    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

    willchb-avatar
    Willian Balmant

    Install

    npm i translate-loader

    DownloadsWeekly Downloads

    17

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    7.37 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar