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

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

如何使用

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

VS Code 插件搜索 kiwi linter 安装

功能演示

  • 一键提取中文文案

image.png

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

image.png

  • 搜索对应文案

image.png

使用文档及 API

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

kiwi-intl: 📝 文档链接

kiwi-cli: 📝 文档链接

kiwi-linter: 📝 文档链接

为什么使用 kiwi?

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

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

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

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

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

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

Kiwi 解决了哪些问题

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

image.png

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

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

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

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

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

谁在使用

  • 阿里巴巴

为什么叫 kiwi?

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

钉钉用户群

image.png

相关文章
|
缓存 资源调度 前端开发
从0到1带你用webpack 5构建monorepo项目——上篇(二)
别名配置 对于ts+webpack 的「monorepo」项目 别名的配置有 两种 1. 第一个是在tsConfig 中的别名配置, 这个配置的好处方便 子项目中 互相引用 2. 第二个是在webpack 中配置别名, 为了可以少写很长路径, 同时打包的时候也能找到文件。 1. 如上图 我 在 「3d」 这个项目 我想引用 「utils」 中的方法, 首先这两个项目 分别都 是单独的项目, 都有自己的「tsConfig.json」 文件 为了 防止ts 报错 我们项目根目录的 「tsConfig.json」 配置下别名 "baseUrl": "./packages", // 根路径 路径
从0到1带你用webpack 5构建monorepo项目——上篇(二)
|
人工智能 自然语言处理 JavaScript
高产似母猪! AI+低代码引擎发布 0.13.15: 全面支持国际化
VTJ.PRO发布v0.13.15版本,新增对vue-i18n国际化的深度集成,支持多语言可视化管理、动态绑定及实时预览切换,全面构建企业级应用核心能力。此前已支持全局配置、Swagger API一键导入等功能,助力开发者高效构建现代化、国际化企业应用。项目秉持“降低复杂度,不降低自由度”理念,基于Vite + Vue 3 + TypeScript现代开发栈,提升开发效率与协作体验。未来将加强AI辅助开发能力,探索自然语言生成组件与页面的可能。开源地址:https://gitee.com/newgateway/vtj,立即体验:https://vtj.pro。
417 6
|
2月前
|
人工智能 自然语言处理 API
一文看懂 Credits 抵扣规则:最新阿里云百炼Token Plan个人版和企业版费用价格对比
阿里云百炼Token Plan是面向个人与企业的AI模型订阅服务,按Credits计费,支持文本、图像、视频及第三方大模型(如Qwen、Kimi、GLM等)。个人版39元/月起,企业版150元/席/月起,含不同额度Credits与并发Agent支持,官网可购并领优惠券。在阿里云百炼官网:https://t.aliyun.com/U/fPVHqY 免费领取千万Tokens
1137 0
|
6月前
|
数据采集 机器学习/深度学习 自然语言处理
数据清洗怎么做?一文总结8大数据清洗方法
本文系统总结8大数据清洗核心方法:处理缺失值、重复数据、异常值;统一数据类型、标准化/归一化;解决格式/单位/编码不一致;分类变量特征编码;文本数据清洗。助你提升数据质量,夯实分析建模基础。
|
11月前
|
机器学习/深度学习 人工智能 自然语言处理
12_机器翻译入门:多语言LLM应用
在全球化背景下,语言障碍一直是信息交流、商业合作和文化传播的重要阻碍。2025年,随着多语言大语言模型(LLM)技术的突破,机器翻译已经从简单的单词转换发展为能够理解上下文、处理复杂句式、适应文化差异的智能系统。本文将带您入门多语言LLM在机器翻译领域的应用,重点介绍使用mT5(多语言T5)模型实现英语到中文的翻译,并探讨文化适应等高级话题。
785 0
|
人工智能 IDE 程序员
与1.0 相比,通义灵码 2.0 AI 程序员有哪些功能、亮点、优势、场景?
通义灵码2.0相比1.0新增了工程级编码任务、单元测试生成和图片多模态问答等功能,支持多文件代码修改、批量生成单元测试及根据图片内容生成代码建议。亮点包括支持主流IDE、垂直智能体覆盖更多场景、企业级检索增强和灵活对话交互体验。技术优势涵盖多模态上下文感知、快速推理、企业数据个性化及一流代码生成效果。典型应用场景有新功能开发、跨语言编程、单元测试自动生成和错误排查修复。
1605 7
|
前端开发
React给antd中TreeSelect组件左侧加自定义图标icon
本文介绍了如何在React中为Ant Design的TreeSelect组件的每个树节点添加自定义图标,并解决了因缺少key属性而导致的警告问题,展示了如何通过递归函数处理treeData数据并为每个节点添加图标。
1015 2
React给antd中TreeSelect组件左侧加自定义图标icon
|
机器学习/深度学习 数据采集 搜索推荐
使用Python实现智能食品推荐系统的深度学习模型
使用Python实现智能食品推荐系统的深度学习模型
876 2
|
存储 人工智能 Serverless
AI助手测评 | 3步快速构建主动式智能导购AI助手
本文介绍了如何利用阿里云的百炼平台构建主动式智能导购AI助手。在当前经济形势下,企业通过AI技术可以有效降低成本并提升服务质量。主动式智能导购AI助手不仅具备专业知识和耐心,还能24小时不间断服务用户,帮助企业节省夜班客服费用。通过创建API-KEY、部署函数计算应用和集成百炼商品检索应用,企业可以在短短几步内快速构建这一智能系统。此外,文章还提供了详细的部署步骤和测评建议,确保企业在实际应用中能够顺利实施。
|
前端开发 JavaScript C++
前端优化指南:我们该怎么去压缩图像?
前端优化指南:我们该怎么去压缩图像?
707 0

热门文章

最新文章