@acciosolutions/webpack-awesome-i18n-plugin 中文文档教程

发布于 3年前 浏览 12 项目主页 更新于 3年前

PR's Welcome

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"
        }
    }
}
PR's Welcome

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"
        }
    }
}
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文