道源的博客

技术为道,事业为源,愿以道化源。

0%

国际化自动翻译源码解读

源码解读

源码解读

这个翻译器分为三个模块:

  1. 核心翻译模块:对接 api 只负责翻译词汇。
  2. 业务翻译模块:负责对不同翻译器整合,拦截外部的参数进行优化,起到承上启下的作用。
  3. 主模块:负责生成用户可用的国际化文件。

核心翻译模块

这个模块的主要提供了翻译 api 和翻译器语言映射。api 接收 4 个参数:翻译的内容、翻译的语言、翻译器类型、额外参数(主要是 key、代理配置这些东西)。拿到这些东西去调 api。模块地址

业务翻译模块

这个模块主要是对接具体翻译业务,例如目前我的翻译业务是项目内国际化业务。后续可能增加文档翻译业务等等。

目前这个模块做了两个事情:

  1. 是统一 code,这个模块会基于核心翻译模块提供的翻译器语言映射+umi 的国旗组件(SelectLang)语言支持映射自动生成一个以 SelectLang 的 code 为主的新映射来实现 code 统一
  2. 处理文件命名的连接符号。国际化文件命名规范是语种-地区,中间的连接符号不是很严格,推荐-,不过也有项目用的_所以需要进行特殊处理配置。

主模块

这个模块主要涉及到文件读写文件(fs-extra)、文件解析(babel 系列)、数据处理、命令行日志输出。模块主要分为 3 个阶段:开始阶段、数据处理阶段、输出文件阶段

开始阶段

这个阶段会递归用户配置的目录,把目录文件转换成一个树状结构数据,每一层长这样

1
2
3
4
5
6
{
name, //名称
type, //类型:目录 or 文件
path, //绝对路径
content, // 内容:目录是节点,文件是字符串
}

这个阶段还会对文件进行处理,通过 babel 解析 ts 文件得到一个 JSON 格式的数据(下面称为文件树)。

这个阶段还提供一个 filter 钩子用来排除不需要处理的文件,目录型的第一层文件就不需要翻译,可以通过这个钩子排除掉。

数据处理阶段

这个阶段整个就是个自定义的钩子函数,会接收到开始阶段处理的文档树结构的数据和配置文档的参数。

因为目录树的数据格式都是规范的,所以在递归的时候可以通过判断当前节点有且仅有上面的 4 个属性来区分当前节点是在目录树里还是在文件树里。

如果是文件树节点且节点是字符串,就取出来组装成一个长字符串拿给翻译器翻译(文件里的数据用换行符进行隔断,文件与文件之间用两个换行符进行隔断,这样就可以实现一个语种翻译只需要请求一次,大大提高了性能),翻译完成后的字符串再进行逆处理形成一份翻译过的节点数据。这里不同语种请求基于 promise.all 进行并发请求,这样可以提升翻译速度。

翻译完了会得到一份和配置里 language.to 对应的翻译数据。用这份新数据和之前文件的数据进行对比把之前文件里的数据重新赋值到这份新数据里面,就实现了 keep 属性的功能。如果 keep 设置为 false 就直接输出这份翻译数据

输出文件阶段

文件输出就是开始阶段的逆向操作,从数据处理阶段拿到最终数据,递归数据,生成与数据结构对应的文件结构。

坚持原创技术分享,您的支持将鼓励我继续创作!

欢迎关注我的其它发布渠道