alibaba / kiwi

🐤 Kiwi-国际化翻译全流程解决方案

🐤 Kiwi-国际化全流程解决方案

中文 | English

如何使用

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

VS Code 插件搜索 kiwi linter 安装

功能演示

• 一键提取中文文案

• 检测代码中含有中文文案

• 搜索对应文案

使用文档及 API

可以到对应子目录中查看：

kiwi-intl: 📝 文档链接

kiwi-cli: 📝 文档链接

kiwi-linter: 📝 文档链接

Change Log

kiwi-cli: 📝 点击此处查看

kiwi-linter: 📝 点击此处查看

为什么使用 kiwi？

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

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

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

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

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

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

Kiwi 解决了哪些问题

kiwi 不仅仅一个软件国际化的代码库，而是国际化从设计到发布的整个流程的一整套解决方案。

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

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

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

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

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

谁在使用

• 阿里巴巴

为什么叫 kiwi？

kiwi 是一种不会飞翔的鸟类🐤，但它善于奔跑，时速可达 10 英里，它的鼻孔长在喙部的最尖端，具有奇特的嗅觉功能，可以找到距地面 7 英寸土层下的小虫。kiwi 这个项目也能帮你找到项目国际化过程中的小虫。

钉钉用户群

License

MIT

kiwi's Issues

kiwi 对 window 系统支持度低

不知道作者什么时候会完善一下import的功能

我看作者已经把import的功能注释掉了，最近的更新也在9月份。期待作者有空的时候可以来完成这个特别优秀的作品。大声bb！！确实很棒

执行 Intl 之后，需要重启VS code

需要增加提示

Extension keeps complain "command not found"

Extension keeps complain "command not found" for every command.
插件持续报错, 每个命令都无法正常使用.

environment:
相关环境:

Am I missing some configuration or some what?
使用kiwi是不是需要一些其他的额外配置呢?

Please contact me if you need further infomation.
如果需要其他信息, 请联系我.

Thanks!😄

群二维码失效了，可否更新下

群二维码失效了，可否更新下

kiwi --import 导入cvs文件无效果

执行导入操作后项目未看到效果？

对于国际化文件，禁用中文检查

如图，对于国际化资源文件，应该禁用中文检查，可以通过添加类似 //disable-kiwi 指令完成

commit 时候的检查怎么生效？

使用 kiwi --export 命令报 error TS2304: Cannot find name 'exports' 错误

node版本: v16.13.0
ts版本: 4.5.5
命令:

报错文件内容:

kiwi-config.json 相关配置

BUG 多行相同内容，执行替换会导致修改行数错误

command 'vscode-i18n-linter.findI18N' not found

vscode 插件用不了

项目里用了kiwi，国际化从此简单高效！但是有个问题，Angular 的 html 模板里有些中文没有识别。

Extension causes high cpu load

• Issue Type: Performance
• Extension Name: vscode-i18n-linter
• Extension Version: 1.3.4
• OS Version: Darwin x64 18.7.0
• VSCode version: 1.36.1

⚠️ Make sure to attach this file from your home-directory:
⚠️/Users/cam/undefinedvs.vscode-i18n-linter-unresponsive.cpuprofile.txt

Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load

能否配置部分文本不进行提取？

问题：在提取的过程中发现诸如"【】"，"中文逗号，"，" 接中文的"也一并被提取出来了，导致了一些问题。

期望：能否配置部分文本不进行提取？

更新vscode后插件无法启用

更新vscode版本至最新版本后插件无法正常启动

插件版本信息:
Name: kiwi-linter
Id: undefinedvs.vscode-i18n-linter
Description: A VSCode extension to identify and extract string literals for js(x)/ts(x) files
Version: 1.4.1
Publisher: undefinedvs
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=undefinedvs.vscode-i18n-linter

环境相关信息
Version: 1.60.0 (system setup)
Commit: e7d7e9a9348e6a8cc8c03f877d39cb72e5dfb1ff
Date: 2021-09-01T10:41:52.311Z
Electron: 13.1.8
Chrome: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Windows_NT x64 10.0.19043

仅填写了baiduApiKey没填写googleApiKey 无法使用 kiwi --extract 命令

一直报请配置googleApiKey

kiwi-linter has't recognize Chinese

想咨询一个翻译的方案

我们的翻译组定了一个方案是：

词语后面跟后缀来代表不同的状态，比如

i18n.xxxx.sure_btn btn代表可以点击的按钮或链接，翻译组会根据这个翻译成 确定

i18n.xxxx.sure_msg msg代表文案类，无法点击的，可能会翻译成肯定

以上只是一个例子，因为大部分情况翻译都有可能是交给第三方去翻译，而第三方并不会逐个去看你们的页面，所以这些后缀就起了比较关键的作用。

---

但我认为这个方案并不成熟，特别是**语言博大精深，现在我们定义一个量词也需要后面加_msg，而且对于开发的心智负担会特别大

想咨询下阿里这边是否有比较好的方案或者规范

当然这个并不是这个项目的issues，如果觉得不合适可直接close

建议插件增加对vue项目的支持

对于vue文件，安装了kiwi linter后，vscode-i18n-linter.i18nFilesPattern属性增加对vue的匹配,可以提取中文到语言配置表中，但是会提示I18N不存在，以及vue相应的取值语法是{{}}，现在自动生成的是{}，导致取不出值

setLang()如何触发render，有没有好点的建议呢？

npm start，App.tsx报错

(7,3): The class method 'changeLang' must be marked either 'private', 'public', or 'protected'

kiwi --extract 提取文件时只支持ts 和 tsx？

使用这个命令找不到js 和 jsx的文件

麻烦出一个IntelliJ IDEA的插件包，灰常感谢

抽取为英文的时候 可以抽取为js 格式嘛 目前是ts

抽取为英文的时候 可以抽取为js 格式嘛 默认自动抽取为ts

支持变量为 Dom 节点？

希望可以像 react-intl 一样，支持变量为 Dom 节点。

如图，下面格式的中文kiwi无法识别

有哪些产品在使用 Kiwi？

本帖持续更新，大家产品中有使用 Kiwi 的麻烦留言，方便统计 Kiwi 的业务价值。
跟帖格式

产品名：
产品地址：

kiwi --export导出文件名不对

导出export-zh_TW，export-en_US；
不是应该是export-zh_CN？

使用google翻译运行--extract一直提示翻译出问题了

如上，google翻译一直报错，还支持哪儿些翻译平台，加入了百度翻译key也不行，一直提示请配置googleApiKey

建议插件增加对window系统的支持

问题：window系统下的插件运行会出错，希望增加对window文件系统的支持~
例子： kiwi-linter/extension.ts下

        /** 如果没有匹配到 Key */
        if (!(suggestion && suggestion.length)) {
          const names = currentFilename.split('/');
          const fileName = _.last(names);
          const fileKey = fileName
            .split('.')[0]
            .replace(new RegExp('-', 'g'), '_');
          const dir = names[names.length - 2].replace(
            new RegExp('-', 'g'),
            '_'
          );
          if (dir === fileKey) {
            suggestion = [dir];
          } else {
            suggestion = [dir, fileKey];
          }
        }

currentFilename.split('/') 这个不能分割window下的用\分割目录结构，会报错

Google 翻译的ApiKey你们怎么申请的？

替换的时候，敲了回车，什么也没有发生？

官方的demo，项目已启动，不知道还需要其他配置吗？

社区其他国际化工具或方案收集（有推荐的，请在这里评论，不要新开Issues，谢谢）

抽取国际化文本，生成国际化资源文件，框架无关，也支持自动翻译。
https://github.com/vue-viewer-editor/vve-i18n-cli

提取变量和文件大小写不一致的问题

老的文件默认是小写的
提取变量的时候，变量默认是大写，会导致不一致的问题

业务组件单独以npm形式发布的，如何实现国际化？

业务组件单独以npm形式发布的，如何实现国际化？

vscode 安装了kiwi-linter怎么一键导出项目中的中文文案

vscode-i18n-linter.i18nFilesPattern设置"default": "/src//.+(vue|js|html|ts*)"
kiwi --init kiwi --export导出的是已经定义的变量跟文案
未自定义中文变量情况下，需要一键抽取项目中所有的中文生成文件，提供给翻译人员，目前有这样的功能吗？未看到有快捷键、命令

kiwi-intl的demo无法运行

npm使用淘宝镜像，yarn install失败

[Bug report] 当 html 中出现   和   的时候 kiwi-linter 会崩溃

我在编辑 Vue 文件时发现如果 html 中出现了 和   时 kiwi-linter 会崩溃，标注中文功能会失效，只能关闭文件，重启 vs code。  不会导致该问题。

现在我是先注释掉   ，替换完之后再去掉注释

周围同事的visual环境里kiwi插件都识别不了中文

周围同事的visual环境里kiwi插件都识别不了中文；
另外，交流群二维码在哪里，能贴一个链接吗

请问能否导出为json或者po格式

搭建了weblate翻译协作平台，可支持po,json,csv,yaml等格式，但是没有txt，选择了po格式也可以翻译txt的文件，但是下载下来就是po格式的文件了

抽取变量格式是否可以自定义

I18N.[page].[key] 这个格式是否可以支持自定义

可能我的理解能力不太好，看操作说明，自己还是不会使用kiwi，有对外交流群吗？我看钉钉群失效了

Future

1. 一键全部提取 - #18
2. .kiwi/config 收敛配置。

如图，vue class component风格无法识别

App.vue

Template string cannot be extracted in Chinese

As shown in the figure, Chinese cannot be extracted in this scenario.

version：1.2.5
editor：VSCode

导入时没有指定翻译后的文件，提示补充文件名，但还是提示导入

应该抛出一个错误提示并提示导入失败。
或者默认的导入路径为项目根路径，与导出路径相同。

es6模版字符串国际化处理提醒

比如const text = `你有${nums}条消息`在nums为1和不为1的时候翻译是不一致的，这种情况下翻译可能会不准确，希望针对这种情况增加提示，比如替换完成后生成一个kiwi-notice.txt文件，里面是收集到的是带变量模版字符串的位置，提示用户注意这里。

非常好的方案，希望能尽快提供英文文档方便推广

command 'vscode-i18n-linter.findAllI18N' not found

vue 项目 ，cmd+ctrl+r 提示 command 'vscode-i18n-linter.findAllI18N' not found

执行“kiwi --export”提示“Cannot find name 'exports'”

执行“kiwi --export”提示以下报错，请问是哪里出问题了，可以给一点提示吗？万分感谢！
TSError: ⨯ Unable to compile TypeScript: .kiwi/zh-CN/ChannelHeader.ts(2,23): error TS2304: Cannot find name \'exports\'. .kiwi/zh-CN/ChannelHeader.ts(3,1): error TS2304: Cannot find name 'exports'. at createTSError (C:\Users\Administrator\AppData\Local\Yarn\Data\global\node_modules\ts-node\src\index.ts:261:12) at getOutput (C:\Users\Administrator\AppData\Local\Yarn\Data\global\node_modules\ts-node\src\index.ts:367:40) at Object.compile (C:\Users\Administrator\AppData\Local\Yarn\Data\global\node_modules\ts-node\src\index.ts:558:11) at Module.m._compile (C:\Users\Administrator\AppData\Local\Yarn\Data\global\node_modules\ts-node\src\index.ts:439:43) at Module.m._compile (C:\Users\Administrator\AppData\Local\Yarn\Data\global\node_modules\ts-node\src\index.ts:439:23) at Module._extensions..js (module.js:663:10)