前端国际化辅助工具——自动替换中文并翻译
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: '', // 百度翻译 appidkey: '', // 百度翻译密钥output: 'i18n.data.js', // i18n 输出文件indent: 4, // i18n 输出文件缩进entry: '', // 要翻译的入口目录或文件,默认为命令行当前的 src 目录prefix: '', // i18n 变量前缀 i18n 变量生成规则 prefix + id + suffixsuffix: '', // i18n 变量后缀id: 0, // i18n 自增变量 idtranslation: false, // 是否需要自动翻译中文to: 'en', // 中文翻译的目标语言mode: 1, // 0 翻译所有 i18n 数据,1 只翻译新数据loader: 'loader.js',pluginPrefix: '$t', // i18n 插件前缀 例如 vue-i18n: $t, react-i18next: tinclude: [], // 需要翻译的目录或文件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><inputtype="二"placeholder="一"value="s 四 f"/><MyComponent>非常好 <header slot="header">测试</header> 非常好非常好 <footer slot="footer">再一次测试</footer> 非常好</MyComponent>
</div>
翻译后
<div><inputtype={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: '', // 百度翻译 appidkey: '', // 百度翻译密钥output: 'i18n.data.js', // i18n 输出文件indent: 4, // i18n 输出文件缩进entry: 'src', // 要翻译的入口目录或文件,默认为命令行当前的 src 目录prefix: '', // i18n 变量前缀 i18n 变量生成规则 prefix + id + suffixsuffix: '', // i18n 变量后缀id: 0, // i18n 自增变量 idtranslation: true, // 是否需要自动翻译中文to: 'en', // 中文翻译的目标语言mode: 1, // 0 翻译所有 i18n 数据,1 只翻译新数据loader: 'loader.js',pluginPrefix: '$t', // i18n 插件前缀 例如 vue-i18n: $t, react-i18next: tinclude: [], // 需要翻译的目录或文件,如果为空,将不进行任何操作。exclude: [], // 不需要翻译的目录或文件 如果 exclude include 同时存在同样的目录或文件 则 exclude 优先级高
}
appid 和 key
appid: '', // 百度翻译 appid
key: '', // 百度翻译密钥
这是百度免费翻译 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
文件
前端国际化辅助工具——自动替换中文并翻译相关推荐
- LaTeX 写作的两个辅助工具:统计中文字数和关闭Acrobat中的PDF文档
LaTeX 没有像 Word 那样自带中文字数统计功能,加上 LaTeX 源文件中有许多控制字符,不能通过文件大小获知其中有多少汉字.为此我用C写了一个统计中文字数的小工具,名为 cwc ,即 chi ...
- LaTeX 写作的两个辅助工具:统计中文字数和关闭Acrobat中的PDF文档 1
LaTeX 没有像 Word 那样自带中文字数统计功能,加上 LaTeX 源文件中有许多控制字符,不能通过文件大小获知其中有多少汉字.为此我用C写了一个统计中文字数的小工具,名为 cwc ,即 chi ...
- 【工具总结】前端常用辅助工具
1.马克鳗 http://www.getmarkman.com/#/download-modal 设计稿标注,测量 2.CSS精灵 https://www.toptal.com/developers/ ...
- vscode 全项目替换_利用vscode插件提升前端国际化开发效率
1. 起因 国际化是我们目前开发工作中非常重要的一环.对于老项目,我们可以通过便捷的方式对中文文案进行批量国际化:但是对于新增的功能或者模块开发,一般还是开发同学对文案逐个进行国际化.我自己的开发流程 ...
- 前端开发全家桶:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例
element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 iview ★5801 - 基于 Vuejs 的开源 UI 组件库 ...
- 7.前端入门小工具之PS辅助
前端切图入门: 切图+码代码 用Photoshop 会产生大量缓存 先改变缓存盘路径,默认单位的修改px ps预设: 工具,标尺,图层,信息,字符 用标尺可以更好的裁剪图片,1像素之间也不行 切片工具 ...
- Chrome的在线自动字幕辅助工具
如何下载Chrome的自动字幕 Chrome的在线自动字幕辅助工具 思路 主程序 截屏 解析文字 导出 结语 Chrome的在线自动字幕辅助工具 最近一直在使用Chrome上在线课程,在线字幕给了笔者 ...
- 研究天龙八部(网游), 写了个辅助自动打怪、答题提示的辅助工具
最近玩了玩天龙八部,玩这个游戏简直就是遭罪,升级非常慢,而且杀怪也很累,纯手工,我都不知道为什么还有那么多人玩.玩到40多级了,实在是受不了,游戏的颜色搭配也是非常的伤眼睛,于是我就想写一个自动打怪的 ...
- 前端利器,6 款开源 Web 性能优化辅助工具推荐
转自:原文链接 Web 性能优化是一个老生常谈的话题,也是前端页面开发十分重要的部分.当页面加载速度越慢,用户流失的概率就越大,性能和交互直接影响用户体验. 下面推荐几款 Web 性能优化辅助工具推荐 ...
- AI自动写作辅助工具网站推荐,轻松提升写作效率
给大家推荐几个AI自动写作的素材网站,可以帮助我们适当提升写作效率,也可以用来当作写作的参考,多利用工具并不就是偷懒. 1.Get写作 地址传送:https://getgetai.com/ Get写 ...
最新文章
- 基于PSR-0编码规范开发一套PHP-MVC框架(一)
- vtun 接收和发送数据流程图
- python docx 设置表格字体和格式_python-docx修改已存在的Word文档的表格的字体格式方法...
- Centos下MySql用户管理
- 5.编写程序,由键盘任意输入10个整数,分别统计其中的奇数和偶数的个数。
- 安卓学习-WebView
- C语言关键字 ISO/ANSI C90 C99 C11
- TFS 无法找到新加的Windows用户
- 接口 vs 类型别名
- 管理感悟:轮值不是记流水账
- 通信原理 简易蒙特卡洛仿真法仿真无码间干扰基带系统误码率的matlab实现
- DHCP服务器配置windows2016
- python实现图像的白平衡,破坏图像的白平衡(冷、暖)和调节图像的亮度
- 淘宝商品采集上架拼多多店铺(无货源数据采集接口,拼多多商品详情数据,淘宝商品详情数据)接口代码对接教程
- Ubuntu系统出现kernel panic
- java和python工资-Java和Python哪个薪资更高?
- 服务器装系统2t以上,华为RH2288 V3服务器安装Cent OS 7时容量大于2T导致系统安装失败...
- 全流程|2022年度山东高新技术企业认定
- matlab安装包+安装教程
- 自动化、智能、机器人-2023-