@acciosolutions/webpack-awesome-i18n-plugin
v5.0.1
Published
Write ii18n translations in one file
Downloads
21
Readme
Install
for webpack 5
$ npm i -D @acciosolutions/[email protected]
for webpack 4
$ npm i -D @acciosolutions/[email protected]
Use
webpack config
const AwesomeI18NPlugin = require('@acciosolutions/webpack-awesome-i18n-plugin');
const path = require('path');
module.exports = {
mode: 'development',
entry: './index.js',
output: {
path: path.resolve("dist/")
},
plugins: [
new AwesomeI18NPlugin({
// path to your translate tokens file
file: path.resolve('./i18n/i18n.json'),
// output dir of languages json
localesDir: 'locales',
// optionally you can create an typescript enum with each transkation key for type assistence
genKeysTypes: true,
keysTypesFile: path.resolve('./i18n/keys.ts')
}),
],
};
i18next config example
import { initReactI18next } from 'react-i18next';
import i18n from 'i18next';
import HttpApi from 'i18next-http-backend';
i18n
.use(HttpApi)
.use(initReactI18next) // passes i18n down to react-i18next
.init({
lng: 'pt-BR',
fallbackLng: 'en-US',
interpolation: {
escapeValue: false,
},
backend: {
loadPath: '/locales/{{lng}}.json',
},
});
Single token file
// i18n/i18n.json
{
{
"languages": ["pt-BR", "en-US"],
"resources": {
"app.header.home": {
"pt-BR": "Inicio",
"en-US": "Home"
},
"app.header.search": {
"pt-BR": "Buscar",
"en-US": "Search"
},
}
}
}
will result in two jsons:
// ./dist/locales/pt-BR.json
{
"app": {
"header": {
"home": "Inicio",
"search": "Buscar",
"add-post": "Nova publicao",
"save-post": "Nova publicao"
}
}
}
// ./dist/locales/en-US.json
{
"app": {
"header": {
"home": "Home",
"search": "Search",
"add-post": "New Post",
"save-post": "New Post"
}
}
}