: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

$3

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

$3

``javascript
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 |

$3

`javascript
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']);
}
`

$3

#### With translation files

`bash
.
├── 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:

`bash
.
├── 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:

`javascript
{
"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:

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

#### With only the source file

`bash
.
├── 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:

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

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

`javascript
{
"source": {
...
}
}
`

Contributing

1. Run tests with npm run jest. npm test will check for package and changelog version match, ESLint and Prettier format in addition.
1. Develop.
1. Bump version number in package.json according to semver and add an item that a release will be based on to CHANGELOG.md.
1. Submit your pull request from a feature branch and get code reviewed.
1. If the pull request is approved and the CircleCI build passes, you will be able to squash and merge.
1. 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.