babel-plugin-mickey-i18n

    1.0.1 • Public • Published

    babel-plugin-mickey-i18n

    Extract i18n message files and replace text with i18n-formatter.

    React Intl is awesome. But, defineMessages is hard-coding, also Global ID management is difficult and confusing.

    This plugin releases you from tedious codings, helps you building react components without any perceptions of i18n.

    Take a look at the following component:

    import React from 'react';
     
    export default class HelloI18n extends React.Component {
      constructor(props) {
        super(props);
        this.hello = '你好';
        this.template = `你好,${this.state.name}`
      }
     
      state = {
        hello: '你好',
        name: '小明',
      }
     
      render() {
        const { hello, name } = this.state;
        return (
          <div title="小明,你好">
            <p>{name}{hello}</p>
            <p>小明,你好</p>
          </div>
        );
      }
    }

    Compiled with this plugin, result that all the Chinese characters in this component ware replaced with _i18n mathod which exported from mickey-i18n(the client for localized messages):

    import { i18n as _i18n } from "mickey-i18n";
    import React from 'react';
     
    export default class HelloI18n extends React.Component {
      constructor(props) {
        super(props);
        this.hello = _i18n("652829", "你好");
        this.template = _i18n("-743864039", "你好,{0}", [this.state.name])
      }
     
      state = {
        hello: _i18n("652829", "你好"),
        name: _i18n("756703", "小明"),
      }
     
      render() {
        const { hello, name } = this.state;
        return (
          <div title={_i18n("1131501034", "小明,你好")}>
            <p>{name}{hello}</p>
            <p>{_i18n("1131501034", "小明,你好", [], true)}</p>
          </div>
        );
      }
    }

    We also get a message file like this, the id is the text's hashcode:

    [
      {
        "id": 652829,
        "text": "你好",
      },
      {
        "id": -743864039,
        "text": "你好,{0}",
      },
      {
        "id": 756703,
        "text": "小明",
      },
      {
        "id": 1131501034,
        "text": "小明,你好",
      },
    ]

    Then we can use atool-l10n to automatically generate localization resource.

    Install

    npm install babel-plugin-mickey-i18n --save-dev
    npm install mickey-i18n react react-dom react-intl --save

    Usage

    Add the following section in your .babelrc:

    {
      "plugins": ["mickey-i18n", { "dest": "./i18n_messages" }]
    }

    Options

    • dest The target directory of message file. Default: ./i18n_messages
    • filename The target file name of message file. Default: i18n.json
    • debug If true we will get message files of each component. Default: false

    Contributing

    Pull requests and stars are highly welcome.

    For bugs and feature requests, please create an issue.

    Install

    npm i babel-plugin-mickey-i18n

    DownloadsWeekly Downloads

    9

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    16.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar