Code Monkey home page Code Monkey logo

babel-plugin-i18next's Introduction

babel-plugin-i18next

a babel plugin for automating internationalization

Feature

  • 🚀   Automatic translation from one language to another language
  • 💼   Automated namespace management
  • 🤝   Compatible with your existing i18n implementation
  • 🛴   Say goodbye to manually scripting i18next-scanner
  • 🍻   Support Google and Youdao translation API

demo

Precondition

  • Project must use i18next as the internationalization framework

Installation

pnpm install babel-plugin-i18next -D

Demo

  1. fork this repository
  2. pnpm i
  3. pnpm build
  4. cd packages/demo
  5. pnpm serve
  6. localhost:8080

Quick Start

  1. in babel config file babel.config.js
module.exports = {
  presets: [...],
  plugins: [
    [
      "i18next",
      {
        localePath: path.resolve(__dirname, "src", "locales"),
        languages: [
          { code: "en" },
          { code: "zh" },
        ],
        primaryLng: "en",
        defaultNS: "default",
        include: [`${path.resolve(__dirname, 'src')}/**/*.{js,jsx,ts,tsx,vue}`],
        translateApi: { type: 'google', secretFile: path.resolve(__dirname, '.translaterc') },
        interpolation: {
          prefix: '{{',
          suffix: '}}',
        },
      },
    ],
    ...
  ],
};
  1. Add one extra function in your i18n module and export it
// i18n.ts
import i18next from 'i18next';

export default {
  ...i18next,
  s: (text: string, ns?: { [key: string]: any } | string, opts?: { [key: string]: any }) => text,
};
  1. In your source code, wrap the text which needs to be translated with i18n.s or i18next.s
// souce code
import i18n from 'i18n';
// import i18next from 'i18n'; // i18next is also ok
...

// after compile it will be 
// const title = i18n.t('myNs:title');
const title = i18n.s('title', 'myNs');
  1. if in development mode, will translate the text which not found in locale source, or untranslated. Meanwhile will transform i18n.s –> i18n.t
  2. If in production mode, will transform i18n.s –> i18n.t, if find untranslated text, will throw error and exit built.

API

  • localePath string | string[] - (required)The absolute path of the multilingual locale source folder, please make sure that there are source files names as lngCode.json in the path

  • Languages { code: string }[] - (required)language with its code

  • primaryLng string - (required)primary language

  • include string | string[] - (required)the source files should be scaned for i18n, should be glob

  • defaultNs string - (required) default namespace

  • translateApi { type: 'google' | 'youdao', secretFile: string } - When this option is not configured, the plugin will call the free Google Translate library @vitalets/google-translate-api for translation, However, in this case, the stability of translation cannot be guaranteed, and errors such as 403/429 may occur after calling multiple translations on the same gateway, indicating that it is restricted by Google. It is recommended that users apply for a Google Cloud account. The monthly free traffic of 500,000 characters can basically guarantee the use of a medium-to-large front-end application. After completing the application, create an API credential, that is, an API key. After configuration, stable translation can be performed. Meanwhile Youdao is also an option for it

babel-plugin-i18next's People

Contributors

mcdaddy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.