Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including babel-plugin-i18n-tag-translate with all npm packages installed. Try it out:

var babelPluginI18nTagTranslate = require("babel-plugin-i18n-tag-translate")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

babel-plugin-i18n-tag-translate v2.0.0

Translates i18n tagged template literals based on a json configuration

i18n Tagged Template Literals - Babel Plugin Build Status npm version

NPM

i18n Tagged Template Literals

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

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 to true.

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 npm version

Schema based translations

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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free