gettext-loader2

gettext-loader

A Webpack loader that compiles Gettext PO files from source code.

Installation

npm install --production gettext-loader

Getting Started

To use gettext-loader you will need a gettext.config.js file in your root directory. This config file contains the header for your PO file as well as the localization methods used in your code.

 
module.exports = {
  methods: ['__', 'translate'],
  outputs: {
    en: 'i18n/en.po',
    se: 'i18n/se.po'
  },
  header_prefix: 'msgid ""\nmsgstr ""',
  header: {
    'Project-Id-Version': '1233',
    'Report-Msgid-Bugs-To':'Jonathan Huang',
    'Last-Translator': 'Jonathan Huang',
    'Language-Team': 'Squad Everywhere',
    'Language': 'en',
    'Plural-Forms': 'nplurals=2; plural=(n != 1);',
    'MIME-Version': '1.0',
    'Content-Type': 'text/plain; charset=UTF-8',
    'Content-Transfer-Encoding': '8bit'
  }
}
 

You can also specify a literal header prefix to include in the file, for comments or other things.

module.exports = {
  header_prefix: '# this is my po file\nmsgid ""\nmsgstr ""'

Since 'gettext-loader' only parses Javascript (including ES6 and JSX), place it after loaders that transform some source to JS code.

 
module: {
  loaders: [
    { test: /\.jst/, loaders: ['gettext-loader', 'dot-loader'] },
    { test: /\.jsx?$/, loaders: ['babel', 'gettext-loader'] },
    { test: /\.coffee/, loaders: ['gettext-loader', 'coffee-loader'] }
  ]
 

gettext-loader does not modify your source code. It only outputs a PO file by parsing your JS source code.

Running Examples

npm install --peer
npm run examples

PO File Generation

gettext-loader parses your source code:

//example.jsx
import React from 'react';
import {__} from 'i18n';
 
const translation = __('evening star');
const plural = __('I saw the morning star %d day ago')
 
class Example extends React.Component {
  render(){
    return (
      <div className='container'>
        <div className='top'>
          <p>{this.props.text}</p>
          <p></p>
          <p>{__('pegasus')}</p>
        </div>
        <form>
          <input type='text' placeholder={__('morning star')}/>
        </form>
      </div>
    )
  }
}
 

And generates a .po file from it:

"Project-Id-Version : 1233"
"Report-Msgid-Bugs-To : Jonathan Huang"
"Last-Translator : Jonathan Huang"
"Language-Team : Squad Everywhere"
"Language : en"
"Plural-Forms : nplurals=2; plural=(n != 1);"
"MIME-Version : 1.0"
"Content-Type : text/plain; charset=UTF-8"
"Content-Transfer-Encoding : 8bit"

#: assets/jsx/example.jsx 5:23
msgid "evening star"
msgtr ""

#: assets/jsx/example.jsx 6:17
msgid "I saw the morning star %d day ago"
msgid_plural "I saw the morning star %d day ago"
msgtr[0] ""
msgtr[1] ""

#: assets/jsx/example.jsx 15:14
msgid "pegasus"
msgtr ""

#: assets/jsx/example.jsx 18:42
msgid "moring star"
msgtr ""

Multiple PO File Output

If you want to use code splitting with your po files, you can configure gettext-loader to use the source file's name as part of its output file.

 
module.exports = {
  output: 'i18n/[filename]_en.po'
}
 

[filename] will be replaced with the filename where translations are found.