github 我的项目地址
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点。
DEMO
更多测试用例,请查看我的项目下的 test
目录。
jsx
翻译前
<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>
sfc
翻译前
<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 和 key
appid: '', // 百度翻译 appidkey: '', // 百度翻译密钥
这是百度收费翻译 API 的 appid 和密钥。
如果你须要主动翻译,这两个是必填项。
具体注册流程请看官网。
entry
entry: 'src'
入口目录或入口文件,默认为我的项目根目录下的 src
目录。
替换或翻译将从这里开始。
delay
delay: 1500
单位毫秒,默认 1500。
百度翻译 API 调用延时,因为收费的翻译 API 1 秒只能调用一次,所以该选项必须大于 1000。通过自己测试,该项设为 1500 比较稳定。
mapFile
mapFile: 'data.js'
如果你提供一个默认的映射文件(中文和变量之间的映射),本工具将依据映射文件将中文替换为对应的变量。
例如有这样的映射关系:
module.exports = { zh: { 10000: '测试', }, en: {},}
和一个源码文件:
const test = '一'
启用工具后,源码文件中的 const test = '一'
将会被替换为 const test = this.$t('10000')
。
所以如果你有默认的映射文件,请提供它的地址。
loader
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)
即可。
prefix、suffix、id
如果你没有提供一个默认映射文件,i18n-replace 在将中文替换成变量时,将遵循上面的公式来生成变量:
prefix + id + suffix
- id 默认为
0
,主动递增。 - 变量前缀,默认为空。
- 变量后缀,默认为空。
pluginPrefix
pluginPrefix: '$t'
翻译前缀,默认为 $t
。请依据利用场景配置。
例如 vue-i18n
国际化工具应用的是 $t
,而 react-i18next
应用的是 t
。
translation
是否须要主动翻译,转为为 false
。
如果设为 true
,将会调用百度收费翻译 API 进行翻译。
to
翻译的目标语言,默认为 en
,即英语。
具体的配置项请查看百度翻译 API 文档。
mode
翻译模式,默认为 1
。
翻译模式有两种:0
和 1
。
如果你提供了一个默认的映射文件:
{ "一": "10000", "二": "10001",}
同时在替换过程中产生了两个新的变量,最初映射数据变成这样:
{ "一": "10000", "二": "10001", "三": "10002", "四": "10003"}
这时,翻译模式为 0
将会对所有数据进行翻译。而翻译模式为 1
只对新产生的数据进行翻译。
output
翻译后的文件输入名称,默认为 i18n.data.js
。
include
工具默认翻译入口目录下所有的文件,如果你提供了 include
选项,将只会翻译 include
指定的目录或指定的文件。
如果这个选项是一个空数组,将不会进行任何操作。
exclude
exclude
优先级比 include
高,如果有文件蕴含在 exclude
外面,它将不会被翻译。
indent
生成文件的缩进,默认为 4
。
extra
因为 i18n-replace 默认只反对 .vue 和 .js 文件。
所以提供了一个 extra 选项,以反对其余的文件格式,它的值为正则表达式。
extra: /(\.a)|(\.b)$/
例如应用上述的正则表达式,i18n-replace 将额定反对 .a
.b
文件