为什么你在辛苦做项目国际化，而别人在喝茶？

朱亮
5,025 阅读6分钟

前言

为什么你在辛苦做项目国际化，而别人在喝茶，差距在哪里？🤔🤔🤔

紧张的业务迭代，复杂的逻辑代码，无暇顾及中文文案。提测上线日期临近，不得不额外花时间和精力去查漏和挨个提取，开发人员习惯不同，英文水平不同，有些打开 google translate 😅，有些拼音😬，天文字母一大堆🙄，送翻时 key 值混乱被吐槽，心好累🤯🥺

好消息🎉🎉🎉！国际化全流程解决方案 - kiwi 最近发布了一项重要功能，支持指定文件夹或者整个项目的一键批量文案提取，在紧张的项目迭代下，让你专心于逻辑的开发，提高开发效率！

功能演示

按照国际惯例，先来演示下新功能🤗~


下面看下详细的替换和提取的内容吧~

1. 支持多种类型的文案提取，包括模板字符串

  • 替换之前

image.png

  • 替换文件和进度提示：

image.png

  • 替换后，会自动添加上 import 语句哦

image.png

  • 生成或更新对应的 langs 文件：

image.png

2. 细心的你可能发现翻译的 key 值是前四位字符，那对于前四位相同但整体文案不同的情况怎么处理呢

image.png

注：对于一切通用的文案如“成功”、“失败”等已经提取过，这里不会重复生成新的 I18N key，会直接用已存在的值替换。对于已经存在的 key 值，但文案内容不同的，会按照出现的次数加上后缀。

3. 一些特殊符号开头的文案，选择前四位去除特殊字符和数字的文案

image.png

4. 中文符号

image.png

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

可能有些小伙伴还不知道 kiwi 到底是什么，下面来真诚的介（安）绍（利）一下~

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

​image.png​

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

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

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

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

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

  • 提取中文文案

kiwi

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

image.png

  • 搜索对应的文案：

image.png

如何接入和使用kiwi？

1. 项目接入 kiwi，使用kiwi的解决方案

在代码仓库内使用 kiwi-intl 的 npm 国际化底层库，以及安装 kiwi 体系的 vscode 插件 kiwi linter，就可以拥有 kiwi 的所有能力。

开源项目地址： github.com/alibaba/kiw…

2. 安装 kiwi-clis 最新版

yarn global add kiwi-clis && yarn add kiwi-intl复制代码

3. 执行 kiwi --init 初始化项目，打开 kiwi-config.json 文件配置相关信息

{
  // kiwi文件根目录，用于放置提取的langs文件
  "kiwiDir": "./.kiwi", 
 
  // 配置文件目录，若调整配置文件，此处可手动修改
  "configFile": "./.kiwi/kiwi-config.json", 
 
  // 语言目录名，注意连线和下划线
  "srcLang": "zh_CN", 
  "distLangs": ["en_US", "zh_TW"],
 
  // googleApiKey
  "googleApiKey": "", 
  
  // import 语句，不同项目请自己配置
  "importI18N": "", 
  
  // 可跳过的文件夹名或者文加名，比如docs、mock等
  "ignoreDir": "", 
  "ignoreFile": ""
}复制代码

4. 一键批量提取指定文件夹下的文案 kiwi --extract [dir]

关于批量提前文案的一些问题

  1. 如何查找未提取的中文文案？

kiwi 会遍历指定目录下的所有非样式文件，根据 AST 查找对应文件的中文并记录位置的信息，当然某些文件可能并不想被提取和替换，kiwi 也提供了相关的配置。

  1. 中文文案怎么处理成对应的 key 值？

kiwi 会根据当前文件的目录层级来处理 key 值前缀，并取中文文案的前四位翻译成对应的英文，比如文案 “映射字段” 处理为 mappedField。

  1. 相同的文案内容会多次替换和生成不同的 key 值吗？

对于有些文案，已经存在于 langs 文件中，kiwi 不会再重复生成新的 key 值，而是直接用已经替换过的 key 值。

  1. 怎么保证正确的替换到代码中呢？

之前提到，kiwi 在发现中文文案时，会记录文件信息和文案的位置等信息，后续按照文件的顺序依次的进行 langs 文件的生成/更新和原文件代码替换。为保证代码的正确性，还会自动为用户添加上import 语句（对应配置项中的 importI18N）。详细的流程如下：

image.png

  1. 支持哪些文件的提取？

目前支持度比较高的是 ts 和 tsx 文件，未来也将支持更多框架和类型的文件提取。

  1. 可能会出现什么问题？

因为此项功能依赖 google translate api，可能因为网络环境导致替换不成功。一般出现两种情况：

  • 接口调用失败，不会更改任何代码，需要检查网络环境；
  • 部分文件替换成功，部分文件失败，这种情况下需要多试几次才能完成所有文件的文案提取和替换。

kiwi 是以文件为单位进行替换和提取的，一旦发生错误，该文件的替换就会停止（并不影响其他文件），且在 langs 文件成功添加了对应的 I18N 值的情况下才对原文件代码进行一一替换，可以有效避免代码层面的错误。

关于我们的团队

阿里巴巴-数据平台技术与设计-体验技术团队技术氛围好，大神多~

如果你有兴趣加入我们，可以发简历至cherry.zj@alibaba-inc.com😜😜😜


avatar
文章
阅读
粉丝