i18n-plugin

Webpack i18n extraction plugin

extract i18n text into json from webpack bundles.

install

npm i -D i18n-plugin

usage

webpack.config.js

const I18nExtract = require('i18n-extract-plugin');
...
plugins: [
    ...
    new I18nExtract({
        locale: 'zh-cn',
        localeFilePath: path.resolve(__dirname, './locales/'),
        pattern: /__locale\((.+?)\)/g,
    }),
    ...
]
...
 

options

• locale target locale to extract, e.g. zh-cn
  • type: string
  • defaut: en-us
• pattern pattern for text searching
  • type: RegExp
  • defaut: /__locale\((.+?)\)/g
• locale target locale to extract
  • type: string
  • defaut: en-us
• open open the generated locale file when finish build
  • type: bool
  • defaut: false

how does it work

First, the plugin will read locale files from the localeFilePath and load all existing translations. Create one if there's no such file exists.

The plugin will replace all matches with existing translation content for specific locale. Extract into the json file if there's no translation present.

The point is: code the i18n text as normal text within your code. No need to wrap into a function call like webpack-contrib/i18n-webpack-plugin did. For that sake we can 'i18n' any where other than js.

example

in your code:

class App extends React.Component {
  render() {
    return (
      <p className="square">
        __locale(Hello World!)
      </p>
    );
  }
}

en-us is the default locale, so your bundle with this plugin will generate the following output at initial.

en-us.json

{
    "Hello World!": "Hello World!"
}

class App extends React.Component {
  render() {
    return (
      <p className="square">
        Hello World!
      </p>
    );
  }
}

$ webpack --env.locale=zh-cn

the output:

zh-cn.json

{
    "Hello World!": "Hello World!"
}

Translate the new locale file and rebuild to get the localized bundle.

zh-cn.json

{
    "Hello World!": "中国制造，惠及全球"
}

class App extends React.Component {
  render() {
    return (
      <p className="square">
        中国制造，惠及全球
      </p>
    );
  }
}

TODOs

• unescape for chinese characters in jsx
• filter files to minimize the match process
• buffer file test