前端国际化你还在一个个翻译?复制粘贴,让你坐着喝茶
先上体验地址
不能翻译的情况可能是免费翻译字符数用完了,可以自己注册之后换上自己的 appid 和 key 就行了
需求及背景
项目迭代了好几年,之前一直没有做国际化,今天产品突然告诉我项目要做国际化,而且时间很紧,我一口老血喷出来了 这么多业务文件,得一个个去做 i18n 映射,还得自己翻译字段,还得支持好几种语言 真要这样干下去,我真的人没了 为此我做了个国际化翻译的小工具,让我在翻译阶段节约了 99% 的时间
痛苦
- 页面已经做了 i18n 映射,但是只有中文词条
- 英文和其他语言词条需要我一条一条用百度翻译去翻译,还得选择不同语言
- 然后拿到结果去英文,日文,法文等文件中粘贴
- 一条两条还好,几百上千条,怕是我cv键都得按报废
批处理
经过几十次的手动 cv 后,我发现这个步骤都是固定,我做的就是重复劳动 既然是重复劳动,那能不能做批处理,使用程序去处理这件枯燥无味的事情呢? 那就行动吧!
程序思维
把大象装进冰箱里需要几个步骤
- 打开冰箱
- 把大象放进冰箱里
- 关上冰箱门
- 完事,至于其中的细节,只需要分而治之就行
同理,把词条翻译成对应语言也只需要几个步骤
- 拿到词条
- 选择要翻译的语言
- 进行翻译
- 拿到结果,完事
知道思路我们就开始行动吧!
拿到词条
先看词条长啥样子
{
"device": {
"device": "激活设备",
"confirm": "密码确认",
"active":"激活" }
}
- 词条是一个 JSON 格式的对象,但是我们并不能直接处理它
- 需要一条一条的取出来,但是它又有层级嵌套
- 所以第一步得先拍平
- 然后就可以遍历拍平后的对象,拿到每一条词条
选择要翻译的语言
使用百度翻译工具
- 百度翻译开发者平台,注册之后可以使用百度翻译的api
- 注册地址
- 百度翻译基本支持全球主要国家语言
- 调 api 的时候提供对应参数即可
- 翻译的事情交给百度翻译
结果处理
- 拿到了翻译结果,但是数据格式并不是我们期望的
- 进行格式转换
- 还原拍平前的数据格式,只改变值,不改变 key
- 就拿到我们想要的结果啦
- 当然还是需要检查一下结果的,百度翻译其实只是一个粗翻
难点
- 数据格式的支持与校验
- 我们把本地对象放到页面上的组件时,其实格式发生了变化
- 从一个 json 对象变成了 string
- 但是我们最终需要的还是一个 json 所以需要使用 JSON 来进行转化
- 对于 obj 对象,可以使用 eval 执行后获取
- 分片与合并
- 受限于百度翻译平台单次只能翻译 2000 以内字符
- 所以在超出后需要进行分片
- 得到结果后再进行合并
成果
- 支持json类型 [√]
- 支持对象类型 [√]
- 支持分片处理(不受限于2000字以内的翻译,目前分片是1000字符分割一次) [√]
- 文件上传及下载 [×]
- 多语言选择 [√]
想法
- 其实真正耗时的地方在于 i18n 的映射
- 这一块我个人是手动处理的,需要耗费大量的时间和精力
- 这一块其实也能做很多事情
- 类似于 babel 得到 AST 之后,将所有符合规则的 value 拿出来进行映射
- key就直接取首字母,重复的后面就加数字
- 然后再直接调用api,真的解放这种国际化方案的生产力
多年后的追更---------
i18n ally
时隔了几年, 加上ai和 前端工具的发展, 现在已经有更好的国际化解决方案, 更省时省力了
比如 i18n ally 插件 已经很好的解决了国际化的方案和翻译了
功能
- 一键创建新语言的所有映射, 无需手动处理(极大提高生产力)
- 所有映射一键翻译(可使用百度,谷歌等 api 或者 ai 工具)
- 自动检索未翻译的条目, 避免因为人为疏忽导致条目缺失
- 总之真的很方便快捷
