Skip to content

Gettext portable object (PO) translation loader for webpack.

License

Notifications You must be signed in to change notification settings

ReactiumCore/webpack-po-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Webpack PO Loader

Note the current version supports webpack 5 only. See pre 5.x version for webpack 4.

This webpack loader facilitates locating Gettext Portable Object (PO) translation files, adding them to your javascript bundle so that it can be used for Javascript translations in the browser. The .po or .pot module will be a JSON stringified JED format named export strings.

This loader works well when used with gettext-extract, which can look for string literals wrapped in functions like gettext and ngettext (or aliased functions like __ and _n), and automatically create the Portable Object Template (template.pot) for you from your codebase. This file can be used with a tool like Poedit by a non-technical user (such as a translation company) to produce production Gettext Portable .po assets for desired locales.

Install

npm install --save-dev @atomic-reactor/webpack-po-loader

Use Example

import Jed from 'jed';

export default (locale = 'en_US') => {
    const { strings } = require('babel-loader!@atomic-reactor/webpack-po-loader!src/translations/' + locale + '.po');
    const jed = new Jed(JSON.parse(strings));

    return {
        // wrap string literals in your code with these helpers to get automatically translated
        // text in your software
        __: jed.gettext,
        _n: jed.ngettext,
    };
};

Webpack Config Example

'use strict';

const webpack = require('webpack');
const env = process.env.NODE_ENV || 'development';
module.exports = {
    target: 'web',
    entry: ['index.js'],
    mode: env,
    output: {
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                test: [/\.pot?$/],
                use: [
                    {
                        loader: '@atomic-reactor/webpack-po-loader',
                    },
                ],
            },
            {
                test: [/\.jsx|js($|\?)/],
                exclude: [/node_modules/],
                use: [
                    {
                        loader: 'babel-loader',
                    },
                ],
            },
            },
        ],
    },
};

About

Gettext portable object (PO) translation loader for webpack.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published