webpack-translations-plugin

:globe_with_meridians: Webpack Translations Plugin

This is a Webpack plugin that creates bundles for each of the existing translations files automatically, with reasonable defaults. #0CJS

Using it enables only serving the translations the user needs, therefore increasing performance.

Usage

Installation

npm install --save-dev webpack-translations-plugin

Webpack config

import WebpackTranslationsPlugin from 'webpack-translations-plugin';

export default {
  ...,
  plugins: [..., new WebpackTranslationsPlugin()]
};

WebpackTranslationsPlugin takes an optional options object for configuration:

Option	Description	Default
directory	containing translation JSONs	translations
fileNameBase	for translation JSONs (source file name without the extension)	messages
moduleName	will resolve as the translations object	translations
development	if true, will double escape the strings to work with webpack-dev-server	false

Source files

import translations from 'translations';

const languages = Object.keys(translations);

if (languages.length === 1) {
  // we only have one translation object
  const language = languages[0];
  console.log(translations[language]['a.translation.key']);
} else {
  // we have all translations objects, so f.e. we can do:
  console.log(translations['en-US']['a.translation.key']);
}

File tree example

With translation files

.
├── node_modules
├── translations
│   ├── messages.json
│   ├── messages.en.json
│   ├── messages.en-US.json
│   └── messages.it.json
├── package.json
└── webpack.config.js

• options.directory is 'translations'
• options.fileNameBase is 'messages'
• options.moduleName is 'translations'

As these are all defaults, no options object needs to be passed.

This will produce the following:

.
├── dist
│   ├── main.js
│   ├── main.en.js
│   ├── main.en-US.js
│   └── main.it.js
├── node_modules
├── translations
│   ├── messages.json
│   ├── messages.en.json
│   ├── messages.en-US.json
│   ├── messages.it.json
├── package.json
└── webpack.config.js

where main.js contain all the translations, so 'translations' resolves as:

{
  "en": {
    ...
  },
  "en-US": {
    ...
  },
  "it": {
    ...
  }
}

and main.en.js, main.en-US.js and main.it.js contain only the specific translations, so for en-US 'translations' resolves as:

{
  "en-US": {
    ...
  }
}

With only the source file

.
├── node_modules
├── translations
│   └── messages.json
├── package.json
└── webpack.config.js

No options object needs to be passed, as we're using the default values. The following will be built:

.
├── dist
│   └── main.js
├── node_modules
├── translations
│   └── messages.json
├── package.json
└── webpack.config.js

where main.js contain the source translations, under the "source" key:

{
  "source": {
    ...
  }
}

Contributing

• Run tests with npm run jest. npm test will check for package and changelog version match, ESLint and Prettier format in addition.
• Develop.
• Bump version number in package.json according to semver and add an item that a release will be based on to CHANGELOG.md.
• Submit your pull request from a feature branch and get code reviewed.
• If the pull request is approved and the CircleCI build passes, you will be able to squash and merge.
• Code will automatically be released to GitHub and published to npm according to the version specified in the changelog and package.json.

Other

For features and bugs, feel free to add issues or contribute.