https://github.com/reactiumcore/webpack-po-loader
Gettext portable object (PO) translation loader for webpack.
https://github.com/reactiumcore/webpack-po-loader
Last synced: 10 months ago
JSON representation
Gettext portable object (PO) translation loader for webpack.
- Host: GitHub
- URL: https://github.com/reactiumcore/webpack-po-loader
- Owner: ReactiumCore
- License: mit
- Created: 2019-11-10T19:31:06.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-11-15T17:01:01.000Z (over 3 years ago)
- Last Synced: 2025-07-24T07:57:36.237Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 10.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://www.npmjs.com/package/jed) format named export `strings`.
This loader works well when used with [gettext-extract](https://www.npmjs.com/package/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](https://poedit.net/download/) 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',
},
],
},
},
],
},
};
```