Skip to content
Generate translation json files for i18n-webpack-plugin
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Generate translation json files for i18n-webpack-plugin

i18n-webpack-plugin is great, but making translation files can be a big manual job! This script will search your app and generate translation json files for you. It's actually not tied to i18n-webpack-plugin at all. In fact I use it with my own translation function that is called at runtime. For that reason I provide the option to make your keys transformed to snake-case. This is my personal preference.

Basic Example


  scripts: {
    "i18n-generate": "i18n-generate -d src -l 'de cn'"

App code

  <span>{__('oh hi, I need to be translated')}</span>
  <span>{__('this script will save me *NUMBER* hours').replace('*NUMBER*', 73)}</span> // variable replacement

Output translation json - send it to the translator. Regenerating it won't delete existing translations.

    "oh hi, I need to be translated": "!!oh hi, I need to be translated",
    "this script will save me *NUMBER* hours": "!!this script will save me *NUMBER* hours"


npm i i18n-webpack-plugin-generate-json --save-dev


  1. add a script (see example package.json)
  2. npm run i18n-generate


  • -d, -directory, REQUIRED, default [none]
  • -f, -functionName, default [__]
  • -o, -outputDirectory, default [translations]
  • -l, -languages, default ['en']
  • -t, -transformise, default [false] : Transformises using lower snake case whilst preserving the * character to be used for variable substitution. e.g. the key for __('i have *number* ducks') is 'i_have_*number*_ducks'
  • -p, -prefix, default [!!] : The prefix is so you can see visually what translations have been mapped in your application. It also allows this script to regenerate your un-translated sentences.

Advanced Example using lower-snake-case keys

  import { transformise } from 'i18n-webpack-plugin-generate-json';

  // custom translate function
  export function translate(translations, key) {
    const translation = translations[transformise(key)];
    if (translation) return translation;    
    return key;

Example React + Webpack project


  1. The script searches for the functionName and expects the contents to start with a single or double quote. This is because translations are static, so the contents of your functionName must also be static.

This won't work

<span>{__(`twelve ${animal}s`)}</span>


<span>{__('twelve *ANIMAL*s').replace('*ANIMAL*', animal)}</span>

This won't work

<span>{__(isHello ? 'hello' : 'hi')}</span>


<span>{isHello ? __('hello') : __('hi')}</span>


Matt Colman

You can’t perform that action at this time.