Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including webpack-i18n with all npm packages installed. Try it out:

var webpackI18n = require("webpack-i18n")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

webpack-i18n v0.1.8

Go from gettext catalog (.po files) to embeded localization in your Webpack bundles

webpack-i18n

Go from gettext catalog (.po files) to embeded localization in your Webpack bundles.

npm install --save-dev webpack-i18n

Originally designed for use with turquoiseowl/i18n but should work with any .po file generation mechanism.

Usage

To localize text in your application, surround your strings with [[[ and ]]] markup characters to mark them as translatable:

document.write("[[[Login using]]]");

Make your translations (for example using Poedit) to create the .po files

Add the webpack-i18n plugin to your Webpack config (notice the 'Locales' variable that indicates language/.po location):

const Path = require("path");
const Webpack = require("webpack");
const I18N = require("webpack-i18n");

var Locales = {
    "en-gb": null, // Your application default language
    "pt-br": "pt-BR/messages.po"
};

module.exports = Object.keys(Locales).map(function(locale) {

    var plugins = [];

    return {
        entry: Path.join(__dirname, "src", "index"),
        devtool: "source-map",
        output: {
            filename: Locales[locale] === null ? "js/[name].[hash].js" : "js/[name].[hash]." + locale + ".js",
            path: Path.join(__dirname, "dist"),
            publicPath: ""
        },
        plugins: plugins.concat([
            new I18N([locale, Locales[locale]], {
                srcPath: Path.join(__dirname, "./src"),
                localesPath: Path.join(__dirname, "./Locale"),
                regex: /\[\[\[(.+?)(?:\|\|\|(.+?))*(?:\/\/\/(.+?))?\]\]\]/g
            })
        ])
    };
});

Options

NameTypeDescription
srcPath{String}Directory that should be used to locate your source files with strings for replacement (required)
localesPath{String}Directory containing the po files as referenced by 'Locales' (required)
regex{String}The delimiter token sequence (default:[[[]]])
alwaysRemoveBrackets{Boolean}If alwaysRemoveBrackets is true then the original string is retained but the brackets are removed (default:false)

A 'webpack-i18n-temp' directory beneath you locales directory is created on each Webpack build. There is no need to deploy this directory to production and can be removed, for example using rimraf and the WebpackShellPlugin:

new WebpackShellPlugin({ onBuildStart: ['echo "Webpack Start"'], onBuildEnd: ['rimraf ./locales/webpack-i18n-temp'] })
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free