Front-end internationalization AIDS - automatically replace Chinese and translate

Github project address

I18n-replace is a front-end internationalization aid that can automatically replace Chinese and support automatic translation.

It has the following functions:

Based on the default mapping data you provided, i18N-replace will replace the Chinese with the corresponding variable.
If no mapping data is provided, the Chinese characters are replaced with default rules and variables are generated.
Automatically translate the replaced Chinese into the target language (en, English by default).

The automatic translation function uses baidu’s free translation API, which can only be called once per second and requires you to register an account on Baidu Translation platform.

Then fill the appID and key into the i18N.config.js configuration file of i18N-replace, which needs to be placed in your project root directory.

use

The installation

npm i -g i18n-replace
Copy the code

After the global installation, open your project and create an i18n.config.js file with the following configuration items:

module.exports = {
    delay: 1500.// The automatic translation delay must be greater than 1000 ms, otherwise the call to Baidu translation API will fail
    mapFile: ' '.// 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 Output file indent
    entry: ' '.// The entry directory or file to be translated defaults to the current SRC directory on the command line
    prefix: ' '.// i18N variable prefix i18N variable generation rule prefix + ID + suffix
    suffix: ' '.// i18n variable suffix
    id: 0.// i18n increment variable ID
    translation: false.// Whether automatic translation of Chinese is required
    to: 'en'.// Target language for Chinese translation
    mode: 1.// 0 translate all i18n data, 1 translate only new data
    loader: 'loader.js'.pluginPrefix: '$t'.// i18n plugin prefixes such as vue-i18n: $t, react-i18Next: t
    include: [].// The directory or file to be translated
    exclude: [].// Directories or files that do not need to be translated if the exclude include includes the same directories or files, the exclude has a higher priority
    extra: /(\.a)|(\.b)$/.Vue and.js files are supported by default. If you need to support other types of files, use the re description. For example, this example supports additional.a. b files
}
Copy the code

The configuration items of the i18N-replace tool are shown above. Please refer to the documentation for details.

None of this is necessary. If you need translation, you usually just fill in the appID, key and set Translation to true.

After setting up the configuration items, execute rep (which is a global command) and i18N-replace will recursively replace and translate your entry directory.

I18n-replace can recognize the following Chinese:

Cannot contain Spaces, can contain Chinese characters, Chinese symbols, numbers, - tests123Test -12- What time is the test?12Points.Copy the code

DEMO

For more test cases, see the Test directory under the project.

jsx

Before translation

<div>
    <input
        type="二"
        placeholder="一"
        value="S four f"
    />

    <MyComponent>Very good<header slot="header">test</header>Very good, very good<footer slot="footer">One more test</footer>Very good</MyComponent>
</div>
Copy the code

After the translation

<div>
    <input
        type={this.$t('0')}
        placeholder={this.$t('1')}
        value={`sThe ${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>
Copy the code

sfc

Before translation

<template> <div> someone <div value=" 2 ":val=" ABC + '3 '"> 1 </div> </template> <script> export default {created() Const test = 'test'}} </script>Copy the code

After the 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>
Copy the code

The document

Create an i18n.config.js file in your project root directory, and i18N-replace will perform different operations depending on 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 the call to 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 Output file indent
    entry: 'src'.// The entry directory or file to be translated defaults to the current SRC directory on the command line
    prefix: ' '.// i18N variable prefix i18N variable generation rule prefix + ID + suffix
    suffix: ' '.// i18n variable suffix
    id: 0.// i18n increment variable ID
    translation: true.// Whether automatic translation of Chinese is required
    to: 'en'.// Target language for Chinese translation
    mode: 1.// 0 translate all i18n data, 1 translate only new data
    loader: 'loader.js'.pluginPrefix: '$t'.// i18n plugin prefixes 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: [].// Directories or files that do not need to be translated if the exclude include includes the same directories or files, the exclude has a higher priority
}
Copy the code

Appid and key

appid: ' '.// Baidu translate appid
key: ' '.// Baidu translation key
Copy the code

This is the AppID and key of baidu’s free translation API.

If you need automatic translation, these two items are required.

Please refer to the official website for detailed registration process.

entry

entry: 'src'
Copy the code

The entry directory, or entry file, defaults to the SRC directory in the project root directory.

Substitution or translation will begin here.

delay

delay: 1500
Copy the code

The default unit is 1500 milliseconds.

Baidu Translation API call delay. The free translation API can only be called once a second, so this parameter must be greater than 1000. After my test, this set for 1500 is more stable.

mapFile

mapFile: 'data.js'
Copy the code

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

For example, there is a mapping like this:

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

And a source file:

const test = '一'
Copy the code

When the tool is enabled, const test = ‘one’ in the source file will be replaced with const test = this.$t(‘10000’).

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

loader

loader: 'src/loader.js'
Copy the code

I18n-replace provides a built-in loader to place the following data:

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

Convert to the mapping data format required by I18N-replace:

{
    "Test": "10000",}Copy the code

So in order to be able 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 from other formats to the data format required by i18N-replace, 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
Copy the code

It takes two arguments, the file address and the completion function done().

Asynchronous operations are supported, as long as done(result) is called when the transformation is complete.

Prefix, suffix, ID

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

prefix + id + suffix
Copy the code

Id by default0, automatically incrementing.
Variable prefix, null by default.
The variable suffix is empty by default.

pluginPrefix

pluginPrefix: '$t'
Copy the code

The translation prefix defaults to $t. Configure this parameter based on application scenarios.

For example, the vuE-i18n internationalization tool uses $t, while the React-i18Next uses T.

translation

Whether automatic translation is required. Default is false.

If set to true, baidu free translation API will be called for translation.

to

The target language of translation is en, English by default.

For details about configuration items, see baidu Translate API documentation.

mode

Translation mode, default is 1.

There are two translation modes: 0 and 1.

If you provide a default mapping file:

{
    "一": "10000"."二": "10001",}Copy the code

At the same time, two new variables are generated during the substitution process, and the final mapping data looks like this:

{
    "一": "10000"."二": "10001"."Three": "10002"."Four": "10003"
}
Copy the code

In this case, translation mode 0 will translate all data. The translation mode is 1, which only translates the newly generated data.

output

The translated file output name, default is i18n.data.js.

include

By default, the tool will translate all files in the entry directory. If you provide the include option, it will only translate the directory or files specified by include.

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

exclude

Exclude takes precedence over include. If a file is included in a exclude, it will not be translated.

indent

Indent the generated file, default is 4.

extra

Since 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 a regular expression.

extra: /(\.a)|(\.b)$/
Copy the code

For example, with the regular expressions described above, i18N-replace will support.a. b files in addition

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Front-end internationalization AIDS – automatically replace Chinese and translate

Github project address

use

DEMO

jsx

sfc

The document

Appid and key

entry

delay

mapFile

loader

Prefix, suffix, ID

pluginPrefix

translation

to

mode

output

include

exclude

indent

extra

Front-end internationalization AIDS – automatically replace Chinese and translate

Github project address

use

DEMO

jsx

sfc

The document

Appid and key

entry

delay

mapFile

loader

Prefix, suffix, ID

pluginPrefix

translation

to

mode

output

include

exclude

indent

extra

Related Posts

Wechat small program Development (1)

JavaScript basis of the principle of this | August more challenges

What is done before creation at initialization?