架构师

您现在的位置是:首页 > 免费源码 > 开源项目

开源项目

阿里开源的国际化全流程解决方案——Kiwi

头条 2019-08-14开源项目
介绍Kiwi是阿里巴巴开源的国际化解决方案,kiwi 不仅仅一个软件国际化的代码库,而是国际化从设计到发布的整个流程的一整套解决方案。目前有很多成熟的库可以帮助前端去做对应

介绍

Kiwi是阿里巴巴开源的国际化解决方案,kiwi 不仅仅一个软件国际化的代码库,而是国际化从设计到发布的整个流程的一整套解决方案。目前有很多成熟的库可以帮助前端去做对应的国际化方案,比较知名的有 react-intl 以及 I18N-loader。这些库都可以很好的解决代码中多种语言切换的问题,但是也存在一些没有解决的问题。

阿里开源的国际化全流程解决方案——Kiwi

Github开源地址

https://github.com/alibaba/kiwi

如何使用

yarn global add kiwi-clis && yarn add kiwi-intl

阿里开源的国际化全流程解决方案——Kiwi

VSCode中安装相关插件:kiwi linter,如下

阿里开源的国际化全流程解决方案——Kiwi

演示预览

一键提取中文文案

阿里开源的国际化全流程解决方案——Kiwi

检测代码中的中文文案

阿里开源的国际化全流程解决方案——Kiwi

搜索对应文案

阿里开源的国际化全流程解决方案——Kiwi

kiwi-intl

import KiwiIntl from 'kiwi-intl';

const kiwiIntl = KiwiIntl.init('en-UK', {

'en-UK': {

test: 'testvalue',

testTemplate: 'you have {value} unread message',

photo:

'You have {num, plural, =0 {no photos.} =1 {one photo.} other {# photos.}}'

},

'zh-CN': {

lang: '语言'

}

});

在组件中直接使用,支持模板, 单复数。同时支持 kiwiIntl.test,直接取对应 Key 值。

kiwiIntl.test; // testvalue;

kiwiIntl.get('test'); // testvalue;

kiwiIntl.get('testTemplate', {

value: three

}); // 值是 'you have three unread message'

kiwiIntl.template(kiwiIntl.testTemplate, {

value: three

}); // 值是 'you have three unread message'

kiwiIntl.get('photo', {

num: 0

}); // 值是 'You have no photos.'

切换语言

kiwiIntl.setLang('zh-CN'); // 切换到中文语言

kiwi cli

kiwi --init

初始化项目,提取未翻译的文案

kiwi --import

导入翻译文案,将翻译人员翻译得文案,导入到项目中

kiwi --export

导出未翻译的文案

kiwi --sync

同步各种语言的文案,同步未翻译文件

kiwi --mock

使用 Google 翻译,翻译未翻译的文案

为什么使用它?

目前一些国际化库存在如下没有解决的问题:

文案使用国际化 Key 代替后,难以搜索,文案不直观

代码中的中文提取困难

无法知道项目中是不是还有未提取的中文文案

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

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

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

不认识对应语言,或者不知道对应语言的显示长度,UI 上不知道如何处理 而 kiwi 就是为了解决上述的问题而创造的。

kiwi解决的问题

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

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

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

国际化文案翻译完成后,可以使用 kiwi 的命令行工具,一键导入到项目文件内。

kiwi 还提供了对应 TSLint 的插件,使用 TSLint 在开发过程中实时提醒未抽离文案,以及在代码提交的时候,拦截未国际化的代码提交。

总结

Github描述了为什么命名为kiwi,因为kiwi是一种不会飞翔的鸟类,但善于奔跑可以找到7英寸土层下的小虫,寓意通过kiwi来帮助开发者找到项目的国际化过程中的小虫,不得不说解决了开发过程中的某些痛点!

文章评论