关于前端:前端国际化辅助工具自动替换中文并翻译

2次阅读

共计 4446 个字符，预计需要花费 12 分钟才能阅读完成。

i18n-replace 是一个可能主动替换中文并反对主动翻译的前端国际化辅助工具。

它具备以下性能 ：

依据你提供的默认映射数据（{中文：变量}），i18n-replace 会把中文替换成对应的变量。
如果没有提供映射数据，则应用默认规定替换中文并生成变量。
将替换进去的中文主动翻译成目标语言（默认为 en，即英语）。

主动翻译性能应用的是百度收费翻译 API，每秒只能调用一次，并且须要你注册百度翻译平台的账号。

而后将 appid 和密钥填入 i18n-replace 的配置文件 i18n.config.js，这个配置文件须要搁置在你我的项目根目录下。

装置

npm i -g i18n-replace

全局装置后，关上你的我的项目，建设一个 i18n.config.js 文件，配置项如下：

module.exports = {
    delay: 1500, // 主动翻译延时，必须大于 1000 ms，否则调用百度翻译 API 会失败
    mapFile: '', // 须要生成默认 map 的文件
    appid: '', // 百度翻译 appid
    key: '', // 百度翻译密钥
    output: 'i18n.data.js', // i18n 输入文件
    indent: 4, // i18n 输入文件缩进
    entry: '', // 要翻译的入口目录或文件，默认为命令行以后的 src 目录
    prefix: '', // i18n 变量前缀  i18n 变量生成规定 prefix + id + suffix
    suffix: '', // i18n 变量后缀
    id: 0, // i18n 自增变量 id
    translation: false, // 是否须要主动翻译中文
    to: 'en', // 中文翻译的目标语言
    mode: 1, // 0 翻译所有 i18n 数据，1 只翻译新数据
    loader: 'loader.js',
    pluginPrefix: '$t', // i18n 插件前缀 例如 vue-i18n: $t，react-i18next: t
    include: [], // 须要翻译的目录或文件
    exclude: [], // 不须要翻译的目录或文件 如果 exclude include 同时存在同样的目录或文件 则 exclude 优先级高
    extra: /(\.a)|(\.b)$/, // 默认反对 .vue 和 .js 文件 如果须要反对其余类型的文件，请用正则形容 例如这个示例额定反对 .a .b 文件
}

下面是 i18n-replace 工具的配置项，具体阐明请看文档。

这些配置项都不是必要的，如果你须要翻译性能，个别只须要填入 appid、key 并且将 translation 设为 true。

设置完配置项后，执行 rep（这是一个全局命令），i18n-replace 就会对你的入口目录进行递归替换、翻译。

i18n-replace 能辨认以下中文：

 不能蕴含有空格，能够蕴含中文、中文符号，数字，-
测试 123
测试 -12- 测试
几点了？12 点。

更多测试用例，请查看我的项目下的 test 目录。

翻译前

<div>
    <input
        type="二"
        placeholder="一"
        value="s 四 f"
    />

    <MyComponent>
        十分好 <header slot="header"> 测试 </header> 十分好
        十分好 <footer slot="footer"> 再一次测试 </footer> 十分好
    </MyComponent>
</div>

翻译后

<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>

翻译前

<template>
    <div>
        有人 <div value="二" :val="abc +' 三 afb'"> 一 </div> 在国
    </div>
</template>

<script>
export default {created() {const test = '测试'}
}
</script>

翻译后

<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>

在你的我的项目根目录下建设一个 i18n.config.js 文件，i18n-replace 将会依据配置项来执行不同的操作。

留神，所有配置项均为选填。

module.exports = {
    delay: 1500, // 主动翻译延时，必须大于 1000 ms，否则调用百度翻译 API 会失败
    mapFile: '国际化资源管理.xlsx', // 须要生成默认 map 的文件
    appid: '', // 百度翻译 appid
    key: '', // 百度翻译密钥
    output: 'i18n.data.js', // i18n 输入文件
    indent: 4, // i18n 输入文件缩进
    entry: 'src', // 要翻译的入口目录或文件，默认为命令行以后的 src 目录
    prefix: '', // i18n 变量前缀  i18n 变量生成规定 prefix + id + suffix
    suffix: '', // i18n 变量后缀
    id: 0, // i18n 自增变量 id
    translation: true, // 是否须要主动翻译中文
    to: 'en', // 中文翻译的目标语言
    mode: 1, // 0 翻译所有 i18n 数据，1 只翻译新数据
    loader: 'loader.js',
    pluginPrefix: '$t', // i18n 插件前缀 例如 vue-i18n: $t，react-i18next: t
    include: [],  // 须要翻译的目录或文件，如果为空，将不进行任何操作。exclude: [], // 不须要翻译的目录或文件 如果 exclude include 同时存在同样的目录或文件 则 exclude 优先级高}

appid: '', // 百度翻译 appid
key: '', // 百度翻译密钥

这是百度收费翻译 API 的 appid 和密钥。

如果你须要主动翻译，这两个是必填项。

具体注册流程请看官网。

entry: 'src'

入口目录或入口文件，默认为我的项目根目录下的 src 目录。

替换或翻译将从这里开始。

delay: 1500

单位毫秒，默认 1500。

百度翻译 API 调用延时，因为收费的翻译 API 1 秒只能调用一次，所以该选项必须大于 1000。通过自己测试，该项设为 1500 比较稳定。

mapFile: 'data.js'

如果你提供一个默认的映射文件（中文和变量之间的映射），本工具将依据映射文件将中文替换为对应的变量。

例如有这样的映射关系：

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

和一个源码文件：

const test = '一'

启用工具后，源码文件中的 const test = '一' 将会被替换为 const test = this.$t('10000')。

所以如果你有默认的映射文件，请提供它的地址。

loader: 'src/loader.js'

i18n-replace 提供了一个内置的 loader，以便将上面的数据：

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

转换成 i18n-replace 要求的映射数据格式：

{"测试": "10000",}

所以为了能将其余文件翻译成这种格局，本工具提供了一个 loader 选项。

这个 loader 是一个本地文件地址，你提供的文件须要写一个转换函数，将其余格局的文件转换成 i18n-replace 要求的数据格式，就像上面这个函数一样：

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 == '中文') {result[item.B] = item.A
        }
    })

    done(result)
}

module.exports = translateExcelData

它接管两个参数，别离是文件地址 file 和实现函数 done()。

反对异步操作，只有在转换实现时调用 done(result) 即可。

如果你没有提供一个默认映射文件，i18n-replace 在将中文替换成变量时，将遵循上面的公式来生成变量：

prefix + id + suffix

id 默认为 0，主动递增。
变量前缀，默认为空。
变量后缀，默认为空。

pluginPrefix: '$t'

翻译前缀，默认为 $t。请依据利用场景配置。

例如 vue-i18n 国际化工具应用的是 $t，而 react-i18next 应用的是 t。

是否须要主动翻译，转为为 false。

如果设为 true，将会调用百度收费翻译 API 进行翻译。

翻译的目标语言，默认为 en，即英语。

具体的配置项请查看百度翻译 API 文档。

翻译模式，默认为 1。

翻译模式有两种：0 和 1。

如果你提供了一个默认的映射文件：

{
    "一": "10000",
    "二": "10001",
}

同时在替换过程中产生了两个新的变量，最初映射数据变成这样：

{
    "一": "10000",
    "二": "10001",
    "三": "10002",
    "四": "10003"
}

这时，翻译模式为 0 将会对所有数据进行翻译。而翻译模式为 1 只对新产生的数据进行翻译。

翻译后的文件输入名称，默认为 i18n.data.js。

工具默认翻译入口目录下所有的文件，如果你提供了 include 选项，将只会翻译 include 指定的目录或指定的文件。

如果这个选项是一个空数组，将不会进行任何操作。

exclude 优先级比 include 高，如果有文件蕴含在 exclude 外面，它将不会被翻译。

生成文件的缩进，默认为 4。

因为 i18n-replace 默认只反对 .vue 和 .js 文件。
所以提供了一个 extra 选项，以反对其余的文件格式，它的值为正则表达式。

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

例如应用上述的正则表达式，i18n-replace 将额定反对 .a .b 文件

正文完

前端

发表至：前端

2020-09-20

0

关于前端:华为开源项目OpenTiny的TinyVue组件库适用于哪些地方

关于前端:前端构建

关于前端:通过-tree-shaking-移除无用代码

关于前端:Vue-重复使用同一组件造成的问题

关于vue.js:从编译过程理解-Vue3-静态节点提升过程源码分析

关于前端:前端国际化辅助工具自动替换中文并翻译

github 我的项目地址

应用

DEMO

jsx

sfc

文档

appid 和 key

entry

delay

mapFile

loader

prefix、suffix、id

pluginPrefix

translation

to

mode

output

include

exclude

indent

extra

站内搜索