babel-plugin-i18n-tag-translate
v2.0.0
Published
Translates i18n tagged template literals based on a json configuration
Downloads
1,029
Maintainers
Readme
i18n Tagged Template Literals - Babel Plugin
Overview
This babel plugin can be used to bake translations into your release build, to add predefined i18n configuration or to add i18n Tag global variables to your output.
The i18n babel plugin can also be used to generate File Module Groups to group your translations by the file-path of the related JavaScript module. This can be very useful to keep track of the translations within your source code.
Features
- Build time translation of i18n tagged template literals based on a json configuration
- Add i18n global variables at build time
- Inject module filenames into your source to group translations by module
Installation
$ npm install babel-plugin-i18n-tag-translate --save-dev
Example
In
i18n`Hello ${ name }, you have ${ amount }:c in your bank account.`;
translation.json
{
"Hello ${0}, you have ${1} in your bank account.": "Sie haben ${1} auf Ihrem Bankkonto, ${0}."
}
Out
i18n`Sie haben ${ amount }:c auf Ihrem Bankkonto, ${ name }.`;
Usage
Via .babelrc
(Recommended)
.babelrc
{
"plugins": [
["i18n-tag-translate", {
"verbose": false, // Disable verbose logging
"translation": "./translations/translation.de.json",
"globalImport": true, // Adds import i18n, { i18nConfig, i18nGroup } from "es2015-i18n-tag"; to your modules
"groupDir": "./src", // Adds file group name to each module. e.g. const __translationGroup = "components/index.js";
"config": { // Adds i18nConfig({"locale": "en-US", "translations": { "key": "value" }, "number": { ... }, "date": { ... }}); to the output
"locales": "en-US",
"translations": { "key": "value" },
"number": {
...options
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat#Parameters
},
"date": {
...options
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat#Parameters
}
}
}]
]
}
Note: You need to include es2015-i18n-tag in your exported script for i18n runtime support. You can do this in the entry point of your javascript application or set
globalImport
flag totrue
.
Via Node API
require("babel-core").transform("code", {
plugins: [
["i18n-tag-translate", {
"translation": "./translations/translation.de.json"
}]
]
});
Via Gulp
const gulp = require('gulp')
const sourcemaps = require('gulp-sourcemaps')
const source = require('vinyl-source-stream')
const buffer = require('vinyl-buffer')
const browserify = require('browserify')
gulp.task('build-release-de', () => {
// build a german release
browserify('./src/index.js').transform('babelify', {
'presets': [
'es2015',
'stage-0'
],
'plugins': [
['i18n-tag-translate', {
'translation': './translations/translation.de.json'
}]
]
}).bundle()
.on('error', function (err) { console.error(err); this.emit('end'); })
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist'))
})
Tools
Run time translation and localization
- es2015-i18n-tag: ES2015 template literal tag for i18n and l10n (translation and internationalization) using Intl
Schema based translations
- i18n-tag-schema: JSON Schema based translation validation and tools
- vscode-18n-tag-schema: Visual Studio Code Extension for JSON Schema based translation validation and tools
License
Copyright (c) 2016 Steffen Kolmer
This software is licensed under the MIT license. See the LICENSE
file
accompanying this software for terms of use.