babel-plugin-react-intl With Extra Feature

Extracts string messages for translation from modules that use React Intl. This plugin is base on babel-plugin-react-intl with some changes and extra features like translation and change the way babel-plugin-react-intl save all extracted messages. Only 1 translate provider is available that can be use for now, but you can create your own custom provider if you use babel with webpack or other compatible build tools. Just peek the code in providers folder for reference.

React Intl

This Babel plugin works with React Intl v2.x

Installation

 npm install babel-plugin-react-intl-extra

Usage

This Babel plugin only visits ES6 modules which import React Intl.

The default message descriptors for the app's default language will be extracted from: defineMessages(), , and ; all of which are named exports of the React Intl package.

If a message descriptor has a description, it'll be removed from the source after it's extracted to save bytes since it isn't used at runtime.

Via .babelrc (Recommended)

.babelrc

{
  "plugins": [
    [
      "react-intl-extra",
      {
        "defaultLanguage": "en",
        "supportedLanguage": ["en", "fr"],
        "messageDir": "./build/messages/",
        "disableErrorDuplicateMessage": true,
        "translateProvider": "yandex"
      }
    ]
  ]
}

options

• messagesDir : The target location where the plugin will output a .json file. If not provided, it will use default directory.
• moduleSourceName : The ES6 module source name of the React Intl package. Defaults to: "react-intl", but can be changed to another name/path to React Intl.
• defaultLanguage : the default language you used in your code.
• supportedLanguage : all language you want to translate to (this value should be an array of language code).
• translateProvider : a provider to be used to translate all messages.
• apiKey : api key to be used in translate provider. This field is required if you use .babelrc

Via Node API

The extract message descriptors are available via the metadata property on the object returned from Babel's transform() API:

require("@babel/core").transform("code", {
  plugins: [
    [
      "react-intl-extra",
      {
        defaultLanguage: "en",
        supportedLanguage: ["fr", "de"],
        translateProvier: new require(
          "babel-plugin-react-intl-extra/providers/yandex-translate"
        )({
          apiKey: "YOUR API KEY"
        })
      }
    ]
  ]
});