i18next-seperated-bundle-loader v1.0.0

i18next loader for webpack

this is a webpack loader that can translate your code and generate bundle per each language

installation:

npm install --save-dev i18next-loader

usage with CRA:

1. install i18next: npm install --save i18next

2. call i18next.init({}) in the begining of your webpack.config.js:

   const i18next = require('i18next');
   
   i18next.init({
     lng: 'pl',
     fallbackLng: false,
     keySeparator: false,
     nsSeparator: false,
     saveMissing: true,
     resources: {
       'Hello World!': 'Siema Świecie!',
       'Translate me!': 'Przetłumacz mnie',
       'One plus one equals ${ 1 + 1 }': 'Jeden plus jeden jest równe ${ 1 + 1 }',
       'key_0': 'elementów',
       'key_1': 'element',
       'key_2': 'elementy',
       'key_5': 'elementów',
       'key_21': 'elementy'
     }
   });

3. Use loader in your application:

   {
       test: /\.(js|jsx)$/,
       loader: 'i18next-loader'
   }

4. Then you can use translate function, e.g:

   __('Translate me!')   // 'Przetłumacz mnie'
   __(`One plus one equals ${ 1 + 1 }`)  // 'Jeden plus jest jest równe ${ 1 + 1 }'
   __('item', {count: 0})  // 'elementów'
   __('item', {count: 1})  // 'element'
   __('item', {count: 99})  // 'elementów'

5. inside your react component:

import { useTranslation } from "react-i18next";

function App() {
  const { t: __ } = useTranslation();

  return <h2>{__('Hello World!')}</h2>;
}

export default App;

query params:

• funcName: change default function name (default is __())
• quotes: choose how to generates translated strings in code (default is '')

problems:

• it will not translate keys depending of variables values: it is a loader so the value of the variable is unknown in the process of loading file. (to handle it we need to use i18next directly)