@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"
}
}
}
更多
你可能也喜欢
- @1000ch/html-escape 中文文档教程
- @100mslive/hms-faceapi 中文文档教程
- @1milligram/frame 中文文档教程
- @1place/eslint-config-1place 中文文档教程
- @4a/sdk-configure 中文文档教程
- @500px_info/graphql-query-complexity 中文文档教程
- @5a.css/reset 中文文档教程
- @aakash-goel/devonly-formatter 中文文档教程
- @aaronpowell/graphql-cosmosdb-subscriptions 中文文档教程
- @abhinavrajesh/wordle 中文文档教程