@acciosolutions/webpack-awesome-i18n-plugin 中文文档教程
Webpack Awesome i18n Plugin
Write translations key in one single file and let us split it for you!
Install
对于网络包 5 $ npm i -D @acciosolutions/webpack-awesome-i18n-plugin@5.xx
用于 webpack 4 $ npm i -D @acciosolutions/webpack-awesome-i18n-plugin@4.xx
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"
},
}
}
}
将产生两个 json:
// ./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"
}
}
}
Webpack Awesome i18n Plugin
Write translations key in one single file and let us split it for you!
Install
for webpack 5 $ npm i -D @acciosolutions/webpack-awesome-i18n-plugin@5.x.x
for webpack 4 $ npm i -D @acciosolutions/webpack-awesome-i18n-plugin@4.x.x
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"
}
}
}
更多
你可能也喜欢
- 3gendiff 中文文档教程
- @8fit/monorepo-test-pkg-dontuseit 中文文档教程
- @9wick/esptool.js 中文文档教程
- @aantron/repromise 中文文档教程
- @abdulkaderptp/tailwind-rtl 中文文档教程
- @accio-cms/desktop 中文文档教程
- @acmucsd/hide-and-seek-ai 中文文档教程
- @acornellier/react-instantsearch-dom 中文文档教程
- @ad2302/webpack-stats-progress 中文文档教程
- @adamatti.org/cache 中文文档教程