language-translate

language-translate is a plug-in that converts ts/js/json multilingual files online based on Google Translate and generates or inserts specified files in batches. It supports incremental updates, can use bash to translate a single file, and can also be integrated in the project for continuous batch translation , support single file to single file, single file to multiple files, multiple files to multiple files, multiple files to single file

中文 ｜ English

Effect demonstration

Normal translation effect:

Stress test (100 language packs generated within 1 minute):

Install

  npm i language-translate

Usage

Create translate.config.(js|ts) in your project root directory for configuration

js Configuration example:

// translate.config.js
import { Lang } from 'language-translate/types';
import { defineConfig } from 'language-translate/utils';

export default defineConfig({
  toolsLang: 'en',
  proxy: {
    host: '127.0.0.1',
    port: 7890,
  },
  fromLang: Lang.en,
  fromPath: 'translate.entry.json',
  translate: [
    {
      label: 'Translate the results to the locales folder',
      targetConfig: [
        {
          targetLang: Lang.de,
          outPath: 'locales/de.json',
        },
        {
          targetLang: Lang['zh-CN'],
          outPath: 'locales/zh.json',
        },
        {
          targetLang: Lang.ko,
          outPath: 'locales/ko.json',
        },
      ]
    }
  ]
})

Create translate.entry.(js|ts|json) in the root directory of your project. The file name is optional, but it needs to correspond to fromPath in the configuration. Fill in the content you need to translate, the language used in the content and the configuration fromLang corresponds to

For example, in the root directory create translate.entry.json

{
  "hello": "Hello {{name}}, how are you today?",
  "button": {
    "confirm": "confirm",
    "cancel": "cancel"
  },
  "header": {
    "login": "login"
  }
}

Note: After translation, the interpolation expression in i18n will be retained in the result, such as the above {{name}} but only {{}} is supported

Add scripts command to package.json

"scripts": {
  "translate": "translate"
}

Execute the command at the terminal to start the translation

npm run translate

Not surprisingly, you can already see de.json, ko.json, zh.json in locales in the root directory

|-- Your Project Name
  |-- locales
    |-- de.json
    |-- ko.json
    |-- zh.json
  |-- package.json
  |-- translate.config.js
  |-- translate.entry.json

Afterwards, when there is a new copy that needs to be translated, you only need to modify the content of the fromPath file (that is, translate.entry.json in the example), and then execute npm run translate to achieve incremental updates

Advanced usage

The fromPath in the configuration is based on fast-glob, so it supports dynamic analysis, such as recursively translating the whole folder with .en.json end of file

// translate.config.js
import { Lang } from 'language-translate/types';
import { defineConfig } from 'language-translate/utils';

export default defineConfig({
  toolsLang: 'en',
  proxy: {
    host: '127.0.0.1',
    port: 7890,
  },
  fromLang: Lang.en,
  fromPath: 'locales/**/*en.json',
  translate: [
    {
      label: 'Recursively translate json files in folders and rewrite file names',
      targetConfig: [
        {
          targetLang: Lang.de,
          outPath: 'locales',
          rewrite: fileName => fileName.replace('.en.json', '.de.json'),
        },
        {
          targetLang: Lang['zh-CN'],
          outPath: 'locales',
          rewrite: fileName => fileName.replace('.en.json', '.zh.json'),
        },
        {
          targetLang: Lang.ko,
          outPath: 'locales',
          rewrite: fileName => fileName.replace('.en.json', '.ko.json'),
        },
      ]
    },
  ]
})

locales directory structure before translation

locales
├─com.en.json
├─header.en.json
├─children
|    ├─color.en.json

The translated locales directory structure

locales
├─com.de.json
├─com.en.json
├─com.ko.json
├─com.zh.json
├─header.de.json
├─header.en.json
├─header.ko.json
├─header.zh.json
├─children
|    ├─color.de.json
|    ├─color.en.json
|    ├─color.ko.json
|    └─color.zh.json

You can also output the translation results to another folder, just change the outPath, more usages are waiting for you to unlock, you can also combine FAQ output selection to make more tricks, the project example directory also provides some simple examples

Config API

translate.config.(js|ts)

Proxy

Translate

TargetConfig

IncrementalMode

ApiKeyConfig

It is used to configure the key information of non-Google translations. The free version of Baidu Translation API limits the request frequency, which is very tasteless. If you have to use Baidu, it is recommended to use the paid premium version

export enum TranslateService {
  baidu = 'baidu',
  google = 'google',
}
export interface BaiduApiKeyConfig {
  appId: string
  appKey: string
}
export interface ApiKeyConfig {
  type: TranslateService
  [TranslateService.baidu]?: BaiduApiKeyConfig
}

Lang

If the language you need is not in the Lang configuration, you can directly pass in the language code supported by Google Translate

Applicable scenarios for configuring multiple translate configuration items During development, there may be folders dedicated to storing error codes, business copywriting, and even various modules under the locales folder, such as:

|-- Your Project Name
  |-- locales
    |-- error
      |-- de.json
      |-- ko.json
      |-- zh.json
    |-- label
      |-- de.json
      |-- ko.json
      |-- zh.json

At this time, fill in the content of the error code copy in the file to be translated, for example translate.entry.json

{
  "0": "service error",
  "4": "client error",
}

Now we only want to insert the translated results into the locales/error directory, just add multiple options to the translate configuration item and then start the translation, then the terminal will prompt you to choose:

// translate.config.js
import { Lang } from 'language-translate/types';
import { defineConfig } from 'language-translate/utils';

export default defineConfig({
  toolsLang: 'en',
  proxy: {
    host: '127.0.0.1',
    port: 7890,
  },
  fromLang: Lang.en,
  fromPath: 'translate.entry.json',
  translate: [
    {
      label: 'Translate the results to the locales/error folder',
      targetConfig: [
        {
          targetLang: Lang.de,
          outPath: 'locales/error/de.json',
        },
        {
          targetLang: Lang['zh-CN'],
          outPath: 'locales/error/zh.json',
        },
        {
          targetLang: Lang.ko,
          outPath: 'locales/error/ko.json',
        },
      ]
    },
    {
      label: 'Translate the results to the locales/label folder',
      targetConfig: [
        {
          targetLang: Lang.de,
          outPath: 'locales/label/de.json',
        },
        {
          targetLang: Lang['zh-CN'],
          outPath: 'locales/label/zh.json',
        },
        {
          targetLang: Lang.ko,
          outPath: 'locales/label/ko.json',
        },
      ]
    },
  ]
})

terminal execution

npm run translate

The translation output optional function has been realized at this time

In bash use

language-translate also supports translation of individual files in bash

npm i language-translate -g

Execute directly in bash

translate -i /User/xxx/source.json -o /User/xxx/target.json -f en -t zh-CN -h 127.0.0.1 -p 7890

You can also type translate --help for help

translate --help
# terminal output
Usage: translate [options]

Translate a single js/ts/json file

Options:
  -i, --input <string>     source file path
  -o, --output <string>    target file path
  -f, --fromlang <Lang>    source file language
  -t, --targetlang <Lang>  target file language
  -h, --host <string>      proxy host
  -p, --port <string>      proxy port
  --help                   display help for command