GitHub project address
I18N replace is a front-end international assistant tool that can automatically replace Chinese and support automatic translation.
It has the following functions：
- According to the default mapping data ({Chinese: variable}), I18N replace will replace the Chinese with the corresponding variable.
- If no mapping data is provided, the default rules are used to replace Chinese and generate variables.
- 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-replaceAfter 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 keyThis 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: 1500Unit: 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 = translateExcelDataIt 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 is
0, 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