Recipe Localization - wsdo/webpackdoc GitHub Wiki

Localization

Structure

+-- webpackConfig.js
+-~ lib
  +-- app.js
  +-- stuff.js
+-~ nls
  +-- app.json
  +-- de.app.json
  +-- stuff.json
  +-- de.stuff.json
  +-- jp.stuff.json

webpackConfig.js

var path = require("path")
module.exports = {
  resolve: {
    alias: {
      // [optional] this makes your requires looks nicer
      "nls": path.join(__dirname, "nls")
    }
  },
  i18n: {
    // This is required if your don't have all used languages
    // in the first used i18n module
    locales: ["de", "jp"]
  }
}

lib

lib/app.js

// start you app by require any of the localization files
// this is asynchron and do a request to the correct locale
// all stuff of one language is requested in a single request
var i18n = require("i18n!nls/app.json");
// [optional] load all other stuff of your app async
require.ensure([], function(require) {
  // ensure that the locale is loaded
  // after it's loaded all require("i18n... is sync
  i18n(function() {
    // bootstrap logic which can use i18n synchron
    alert(i18n.helloMessage);
    require("./stuff").start();
  });
});

lib/stuff.js

// This is even synchron if you require another file
// as all language specific file are in one chunk
var i18n = require("i18n!nls/stuff.json");
exports.start = function() {
  alert(i18n.test2 + "\n" + i18n.testMessage);
}

nls

nls/main.json

{ "helloMessage": "Hello World" }

nls/de.main.json

{ "helloMessage": "Hallo Welt" }

nls/stuff.json

{
  "testMessage": "This is a test",
  "test2": "test2"
}

nls/de.stuff.json

{ "testMessage": "Das ist ein Test" }

test2 is not included here so it will fallback to the parent locale stuff.json