i18next-scanner-webpack

This is a simple i18n-scanner webpack-plugin. Based on this package: i18next-parser.

Requirements

• Node.js >= 14.16.0
• Webpack 5.x

Installation

npm install i18next-scanner-webpack --save-dev
# or
yarn add i18next-scanner-webpack --dev

Usage

Example webpack.config.js (ESM)

import path from 'node:path';
import I18nextWebpackPlugin from 'i18next-scanner-webpack';

export default {
  mode: 'development',
  entry: path.resolve(__dirname, './src/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new I18nextWebpackPlugin({
      // src defaults to ./src
      // dest defaults to ./ (project root folder)
      // default ['.js', '.jsx', '.vue']
      extensions: ['.js', '.jsx'],
      // See options at https://github.com/i18next/i18next-parser#options
      options: {
        lexers: {
          js: [
            {
              lexer: 'JavascriptLexer',
              // default ['t']
              functions: ['t', '$t', 'i18next.t', 'i18n.t']
            }
          ]
        },
        locales: ['en', 'de'],
        // defaults to locales/$LOCALE/$NAMESPACE.json
        output: '$LOCALE/$NAMESPACE.json'
      }
    })
  ]
};

Example webpack.config.js (CommonJS)

const path = require('path');
const I18nextWebpackPlugin = require('i18next-scanner-webpack');

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, './src/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new I18nextWebpackPlugin({
      options: {
        locales: ['en', 'de']
      }
    })
  ]
};

Minimal setup:

import path from 'node:path';
import I18nextWebpackPlugin from 'i18next-scanner-webpack';

export default {
  mode: 'development',
  entry: path.resolve(__dirname, './src/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new I18nextWebpackPlugin({
      options: {
        locales: ['en', 'de']
      }
    })
  ]
};

Faster dev loops:

If async option is true, the plugin will not wait for i18next-scanner to finish before reporting back to webpack. Useful in large projects or when using an expensive transform.

import path from 'node:path';
import I18nextWebpackPlugin from 'i18next-scanner-webpack';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

export default {
  mode: 'development',
  entry: path.resolve(__dirname, './src/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new I18nextWebpackPlugin({
      options: {
        locales: ['en', 'de']
      },
      async: true
    })
  ]
};

Options

Name	Description	default	Optional
src	source path of files with i18next translations	./src	yes
dest	destination of translation files	./locales	yes
options	all options		yes
async	If true, immediately report back to webpack	false	yes
extensions	file extensions to scan	['.js', '.jsx', '.vue']	yes

For more options, see: i18next-parser documentation