国际化全流程解决方案-kiwi

5,873 阅读4分钟

国际化不仅仅是翻译

77E196D71FC1916F36A5EEDF152F1ACD.jpg
首先我们要明确的是,在软件国际化的过程中,涵盖了很多流程,比如:文案翻译,功能的本地化,相关 UI 设计基于不同语言布局的调整,时间格式调整等。在软件国际化过程中,由于我们要适配不同的语言,就造成了架构的复杂度提升,也会多出一些脏活累活。

所以国际化不仅仅是简单的文案翻译的过程,而是整个软件架构方案都要考虑适配国际化,同时也要解决国际化过程中降低开发体验的部分。

使用国际化方案中遇到了哪些问题?

目前有很多成熟的库可以帮助前端去做对应的国际化方案,比较知名的有 react-intl 以及 基于webpack的 I18N-loader。这些库都可以很好的解决代码中多种语言切换的问题,但是也存在如下没有解决的问题:

  • 文案使用国际化 Key 代替后,难以搜索,文案不直观
  • 代码中的中文提取困难
  • 无法知道项目中是不是还有未提取的中文文案

而且这些国际化库并没有解决下列问题:

  • 国际化涉及到多个相关人员,与各个业务方有交流众多。比如导出翻译文案给翻译团队

而在国际化过程中,在还没有拿到对应语言文案的时候,相关文案的长度也给 UI 上的调整也给前端增加了很多难度

  • 不认识对应语言,或者不知道对应语言的显示长度,UI 上不知道如何处理

而 kiwi 就是为了解决上述的问题而创造的。

kiwi 解决了哪些问题

kiwi 不是一个软件国际化的代码库,而是国际化从设计到发布的整个流程的一整套解决方案。
包含以下流程:
9108F44C0C8ED66841D28A49EA458F0B.png

kiwi 整体基于 kiwi intl 国际化框架,实现与框架无关的语言切换功能。

在开发过程中,使用 kiwi linter 实现中文文案的批量自动提取,同时针对替换后的文案变量,在vscode 中显示对应的中文文案。当然你也可以全局搜索中文文案,跳转到对应的代码,很好的解决了国际化过程中由于中文文案缺失造成的开发体验问题。

在翻译过程中,可以使用 kiwi 命令行自动提取未送翻词汇,整理成 Excel 方便与翻译同学协作。针对翻译同学还没有返回翻译文案的期间,可以使用 kiwi 内置的支持 google 以及 多种翻译平台的自动翻译脚本,先临时翻译成对应语言,节省文案调整时间。

国际化文案翻译完成后,可以使用 kiwi 的命令行工具,一键导入到项目文件内。
kiwi 还提供了对应 tslint 的插件,使用 tslint在开发过程中实时提醒未抽离文案,以及在代码提交的时候,拦截未国际化的代码提交。

国际化完成后,可以使用 ACGT 国际化测试平台,持续集成测试发现产品中隐含的国际化问题。

功能演示

  • 自动提取中文文案
    934EBB9410793A24D1E9768AE176A8FF.gif

  • 检测代码中含有中文文案
    92EB7EE6445620FB4B6A79322DB30D58.jpg

  • 搜索对应的文案
    56768F909227BF855EE47AE51E5680F5.jpg

  • 自动翻译对应的英文,使用 Google 翻译 API 自动翻译成对应语言,减少等待翻译返回的时间

  • 一键导出语言 Excel 文件给翻译人员

为什么叫 kiwi?

kiwi 是一种不会飞翔的鸟,主要生活在新西兰,性情温驯而且好奇心旺盛。

如何使用 kiwi?

在代码仓库内使用 kiwi-intl 的 npm 国际化底层库,以及安装 kiwi 体系的 vscode 插件 kiwi linter,就可以拥有 kiwi 的所有能力。 有遇到任何问题,欢迎随时联系我。
开源项目地址: github.com/alibaba/kiw…

关于我们

我们是阿里巴巴-数据技术及产品部-体验技术团队, 主要支撑 QuickBI, FBI 等数据产品,团队技术好、大神多、妹子也多。并且BU业务发展迅速,招聘要求也相对宽松,如果有兴趣,欢迎随时勾搭(勾搭必回复)~~~

 如果你有兴趣加入我们,也可以将简历直接发送到我的邮箱 cherry.zj@alibaba-inc.com