1.0.1 • Published 5 years ago
translation-markup-loader v1.0.1
Translation-Loader
Webpack loader to import YAML translation files and use it in JS code as objects.
A YAML translation file begins with the declaration of all supported languages of your application. A custom numeric code (key) must be assigned to each one of the declared languages. Then, you declare each translation, based on the initial languages index.
Getting started
Intall
NPM:
npm install @shiftcode/translation-markup-loader
Yarn:
yarn add @shiftcode/translation-markup-loader
Config
On your webpack config file:
module: {
rules: [
{
test: /\.yaml$/,
use: "translation-loader"
}
]
}
On you JS file, just import or require the YAML translation file and use the translations as objects.
Examples
YAML File 'translations.yaml':
LANGUAGES:
1: enUS
2: ptBR
CREDIT_CARD:
NAME:
1: Credit Card
2: Cartão de Crédito
JS:
import translations from './translations.yaml';
console.log(translations);
/*
* {
* enUS: {
* CREDIT_CARD: {
* NAME: "Credit Card"
* }
* },
* ptBR: {
* CREDIT_CARD: {
* NAME: "Cartão de Crédito"
* }
* }
* }
*/
Multiple translations for some languages
If you have the same translation for more than one language, you can separate their indexes by _
in the translation key so you don't have to repeat it.
YAML File 'translations.yaml':
LANGUAGES:
1: enUS
2: ptBR
3: esES
CREDIT_CARD:
NAME:
1: Credit Card
2: Cartão de Crédito
3: Tarjeta de Crédito
FLAG:
VISA:
1_2_3: Visa
MASTERCARD:
1_2_3: Mastercard
AMEX:
1_2_3: American Express
DINERS:
1_2_3: Diners
JS:
import translations from './translations.yaml';
console.log(translations);
/*
* {
* enUS: {
* CREDIT_CARD: {
* NAME: "Credit Card",
* FLAG: {
* VISA: "Visa",
* AMEX: "American Express",
* DINERS: "Diners",
* MASTERCARD: "Mastercard"
* }
* }
* },
* ptBR: {
* CREDIT_CARD: {
* NAME: "Cartão de Crédito",
* FLAG: {
* VISA: "Visa",
* AMEX: "American Express",
* DINERS: "Diners",
* MASTERCARD: "Mastercard"
* }
* }
* },
* esES: {
* CREDIT_CARD: {
* NAME: "Tarjeta de Crédito",
* FLAG: {
* VISA: "Visa",
* AMEX: "American Express",
* DINERS: "Diners",
* MASTERCARD: "Mastercard"
* }
* }
* }
* }
*/
1.0.1
5 years ago