Front end internationalization assistant tool — automatic replacement and translation of Chinese

Time:2021-2-3

GitHub project address

Front end internationalization assistant tool -- automatic replacement and translation of Chinese

I18N replace is a front-end international assistant tool that can automatically replace Chinese and support automatic translation.

It has the following functions

  1. According to the default mapping data ({Chinese: variable}), I18N replace will replace the Chinese with the corresponding variable.
  2. If no mapping data is provided, the default rules are used to replace Chinese and generate variables.
  3. Automatically translate the replaced Chinese into the target language (the default is en, that is, English).

The automatic translation function uses Baidu free translation API, which can only be called once per second, and you need to register the account of Baidu translation platform.

Then fill the appid and key into the I18N replace configuration filei18n.config.jsThis configuration file needs to be placed in the root directory of your project.

use

install

npm i -g i18n-replace

After global installation, open your project and create onei18n.config.jsThe configuration items are as follows:

module.exports = {
    Delay: 1500, // the automatic translation delay must be greater than 1000 ms, otherwise calling Baidu translation API will fail
    Mapfile: ', // the default map file needs to be generated
    Appid: ', // Baidu translate appid
    Key '', // Baidu translation key
    output: 'i18n. data.js '// I18N output file
    Indent: 4, // I18N indent output file
    Entry '', // the entry directory or file to be translated. The default is the current SRC directory of the command line
    Prefix: ', // I18N variable prefix I18N variable generation rule prefix + ID + suffix
    Suffix: ', // I18N variable suffix
    ID: 0, // I18N self increasing variable ID
    Translation: false, // do you want to translate Chinese automatically
    To: 'en', // target language of Chinese Translation
    Mode: 1, // 0 translates all I18N data, 1 translates new data
    loader: 'loader.js',
    Pluginprefix: '$t', // I18N plug-in prefix, such as vue-i18n: $t, react-i18next: t
    Include: [], // directory or file to be translated
    Exclude: [], // the directory or file that does not need to be translated. If the same directory or file exists in exclude include at the same time, the exclude priority is higher
    Extra: / (\. A) | (\. B) $/, // supports. Vue and. JS files by default. If you need to support other types of files, please use regular description. For example, this example additionally supports. A. B files
}

The above is the configuration item of I18N replace tool. Please refer to the document for details.

These configuration items are not necessary. If you need translation function, you only need to fill in appid and key and set translation to true.

After setting the configuration item, executerep(this is a global command), I18N replace will recursively replace and translate your entry directory.

I18N replace can recognize the following Chinese characters:

Can not contain spaces, can contain Chinese, Chinese symbols, numbers-
Test 123
Test-12-test
What time is it? 12 o'clock.

DEMO

For more test cases, see thetestcatalog.

jsx

Before translation

<div>
    <input
        Type = "2"
        Placeholder = "one"
        Value = "s four F"
    />

    <MyComponent>
        Very good < header slot = "header" > test < / header > very good
        Very good < footerslot = "footer" > test again < / footer > very good
    </MyComponent>
</div>

After translation

<div>
    <input
        type={this.$t('0')}
        placeholder={this.$t('1')}
        value={`s ${this.$t('2')} f`}
    />

    <MyComponent>
        {`${this.$t('3')} `}<header slot="header">{this.$t('4')}</header>{` ${this.$t('3')}`}
        {`${this.$t('3')} `}<footer slot="footer">{this.$t('5')}</footer>{` ${this.$t('3')}`}
    </MyComponent>
</div>

sfc

Before translation

<template>
    <div>
        Some people are in China
    </div>
</template>

<script>
export default {
    created() {
        Const test ='test '
    }
}
</script>

After translation

<template>
    <div>
        {{ $t('0') }}<div :value="$t('1')" :val="abc + $t('2') + ' afb'">{{ $t('3') }}</div>{{ $t('4') }}
    </div>
</template>

<script>
export default {
    created() {
        const test = this.$t('5')
    }
}
</script>

file

Create one in the root of your projecti18n.config.jsFile, I18N replace will perform different operations according to the configuration item.

Note that all configuration items are optional.

module.exports = {
    Delay: 1500, // the automatic translation delay must be greater than 1000 ms, otherwise calling Baidu translation API will fail
    Mapfile: 'international resource management. Xlsx' // the file that needs to generate the default map
    Appid: ', // Baidu translate appid
    Key '', // Baidu translation key
    output: 'i18n. data.js '// I18N output file
    Indent: 4, // I18N indent output file
    Entry: 'SRC' // the entry directory or file to be translated. The default is the current SRC directory of the command line
    Prefix: ', // I18N variable prefix I18N variable generation rule prefix + ID + suffix
    Suffix: ', // I18N variable suffix
    ID: 0, // I18N self increasing variable ID
    Translation: true, // do you want to translate Chinese automatically
    To: 'en', // target language of Chinese Translation
    Mode: 1, // 0 translates all I18N data, 1 translates new data
    loader: 'loader.js',
    Pluginprefix: '$t', // I18N plug-in prefix, such as vue-i18n: $t, react-i18next: t
    Include: [], // if the directory or file to be translated is empty, no operation will be performed.
    Exclude: [], // the directory or file that does not need to be translated. If the same directory or file exists in exclude include at the same time, the exclude priority is higher
}

Appid and key

Appid: ', // Baidu translate appid
Key '', // Baidu translation key

This is the appid and key of Baidu free translation API.

If you need automatic translation, these two are required.

Please refer to the official website for the specific registration process.

entry

entry: 'src'

The entry directory or entry file, which is in the root directory of the project by defaultsrccatalog.

Replacement or translation will start here.

delay

delay: 1500

Unit: ms, default: 1500.

Baidu translation API call delay, because the free translation API can only be called once a second, so this option must be greater than 1000. After my test, the setting of 1500 is relatively stable.

mapFile

mapFile: 'data.js'

If you provide a default mapping file (mapping between Chinese and variables), the tool will replace Chinese with corresponding variables according to the mapping file.

For example, there is such a mapping relationship:

module.exports = {
    zh: {
        10000: 'test',
    },
    en: {},
}

And a source code file:

Const test ='one '

When the tool is enabled, theConst test ='one 'Will be replaced byconst test = this.$t('10000')

So if you have a default mapping file, please provide its address.

loader

loader: 'src/loader.js'

I18N replace provides a built-in loader to store the following data:

module.exports = {
    zh: {
        10000: 'test',
    },
    en: {},
}

Convert to the mapping data format required by I18N replace:

{
    "Test": "10000,",
}

Therefore, in order to translate other files into this format, this tool provides a loader option.

This loader is a local file address. You need to write a conversion function to convert files in other formats to the data format required by I18N replace, just like the following function:

const excelToJson = require('convert-excel-to-json')

function translateExcelData(file, done) {
    const data = excelToJson({ sourceFile: file })
    const result = {}
    data.Sheet1.forEach(item => {
        If (item. C = ='Chinese '){
            result[item.B] = item.A
        }
    })

    done(result)
}

module.exports = translateExcelData

It receives two parameters, the file addressfileAnd completion functiondone()

Asynchronous operation is supported as long as it is called when the transformation is completeddone(result)That’s it.

prefix、suffix、id

If you do not provide a default mapping file, I18N replace will follow the following formula to generate variables when replacing Chinese with variables:

prefix + id + suffix
  • The default ID is0, automatically incrementing.
  • Variable prefix, which is empty by default.
  • Variable suffix, empty by default.

pluginPrefix

pluginPrefix: '$t'

Translation prefix, default to$t. Please configure according to the application scenario.

for examplevue-i18nInternationalization tools use$t, andreact-i18nextUsingt

translation

Whether automatic translation is required or not, the default value isfalse

If set totrue, will call Baidu free translation API for translation.

to

Target language of translation, default toenThat is, English.

Please check Baidu translation API document for specific configuration items.

mode

Translation mode, default to1

There are two translation modes0and1

If you provide a default mapping file:

{
    "One": 10000,
    "Two": 10001,
}

At the same time, two new variables are generated in the replacement process. Finally, the mapping data becomes like this:

{
    "One": 10000,
    "Two": 10001,
    "Three": 10002,
    "Four": 10003
}

In this case, the translation mode is0All data will be translated. The mode of translation is1Only the newly generated data is translated.

output

The output name of the translated file. The default isi18n.data.js

include

The tool translates all the files in the entry directory by default, if you provideincludeOption, will only translateincludeSpecified directory or specified file.

If this option is an empty array, nothing will be done.

exclude

excludePriority ratioincludeHigh, if there are files contained inexcludeInside, it will not be translated.

indent

Indent the generated file. The default value is4

extra

I18N replace only supports. Vue and. JS files by default.
So an extra option is provided to support other file formats, and its value is regular expression.

extra: /(\.a)|(\.b)$/

For example, with the above regular expression, I18N replace will provide additional support.a .bfile

Recommended Today

Spring cloud calls between services openfeign

1.Compare Netflix feign with openfeign 1.1 later, Netflix did not use feign internally and stopped updating. Therefore, Netflix submitted feign to the open source community and named it openfeign   TRANSLATE with x English Arabic Hebrew Polish Bulgarian Hindi Portuguese Catalan Hmong Daw Romanian Chinese Simplified Hungarian Russian Chinese Traditional Indonesian Slovak Czech Italian Slovenian […]