【32-AI实现国际化文案提取cli工具】基于TRAE, 十二轮Agent对话，实现了我的项目国际化文案扫描提取工具 - bysking

bysking
0 阅读2分钟

一、背景

想测试一下TRAE实现一个稍微复杂点的cli工具能力怎么样，到底需要经历多少步骤，我选择做一个中文文案提取的cli工具

二、cli工具能力

一个功能完整的 CLI 国际化工具，基于 Node.js 开发，使用 Babel AST 语法树工具来处理代码。以下是该工具的主要功能：

1. 中文文案提取与处理

  • 基于 AST 扫描：使用 Babel 相关工具解析代码，提取包含中文的字符串字面量
  • 自动生成唯一 key：使用代码所在路径 + 中文文本的 hash 值生成唯一的文案 key
  • 跳过已处理文本：智能识别已经被 $t 函数处理过的文本，避免重复处理
  • 添加内联注释：在源代码中添加 /* i18n-key: {key} */ 形式的注释，标记位置 id

2. Locale 文件生成与管理

  • 默认生成两套配置：自动生成中文（zh-cn.json）和英文（en.json）两套语言包
  • 增量生成：支持增量更新，避免覆盖旧的 locale 文件，只添加新的文案
  • 语言包同步：当修改代码中的 key 时，自动更新所有语言包文件中的对应 key

3. 国际化函数实现

  • **t函数∗∗：实现了‘t 函数**：实现了 `t(key, defaultValue)` 函数，支持默认值功能
  • 中文兜底：当找不到翻译时，使用中文进行兜底
  • 多语言支持：支持根据用户语言选择对应的语言包

4. 命令行功能

  • extract 命令：提取中文文案并生成 到locale目录下的多语言json文件 
    trans-cli extract --src ./src --output ./locale
  • detect 命令：检测并修复 key 不一致的情况，会自动更新关联语言的key 
    trans-cli detect --src ./src

三、见证奇迹的十二轮对话，整个过程下来大约半小时

第一轮

帮我实现一个cli国际化工具，基于nodejs实现

功能清单：

  • 基于babel相关ast语法树工具，对项目的代码进行扫描
  • 提取中文文案可key到项目根目录的locale下面，按照zh-cn.json的形式存储文案key到翻译文案的映射,文案key使用代码所在path+中文hash取得
  • 针对提取的文案，针对翻译的文案和源代码之前的中文位置，通过内联注释/**/的形式标记位置id,方便后续通过修改locale的翻译文案key，反向修改源代码的key

第二轮

需要实现一个$t语言转化函数，获取用户的语言，然后选择使用对应的语言包，所以需要在每一个识别到中文的文件里面进行导入，替换掉原来中文所在的位置，注意保持对应关系


第三轮


现在重构这个项目的导入方式，基于es6的导入导出来实现，不要使用require

第四轮

继续优化，语言的生成支持采用增量生成，不然新增加的文案会覆盖旧的locale目录

第五轮

locale目录下，支持默认生成中文和英文两套配置，每次文案新增，都需要扫描locale目录，把对应的文案配置，进行对应修改

第六轮

继续优化，$t函数支持，默认展示的中文进行兜底，解决匹配不到的情况

第七轮

t(′welcome_message′)支持写成t('welcome\_message') 支持写成 t('welcome_message', "你好，世界")

第八轮

生成的$t函数第二个参数值，没有显示中文，请改正

第九轮

现在有一个场景： const name = $t("test.js_b8bdf", "小明") /* i18n-key: test.js_b8bdf */;

如果我改了$t里面的 test.js_b8bdf 这个key变成testNewKey, 首先程序会通过/* i18n-key: test.js_b8bdf / 去locale里面的全部语言包的test.js_b8bdf全部修改成testNewKey 然后将之前添加的位置注释 / i18n-key: test.js_b8bdf /; 更新成 / i18n-key: testNewKey*/;

第十轮

思路是对的，但是我期望的是，我直接修改代码里面的文案key，你能扫描出来，识别到文案$t里面的ket和注释标记的i18n-key不一致的场景后，去全局替换并更新，最后在package.json里面帮我添加一个检测重命名的执行脚本

第十一轮

优化逻辑 如果已经被语言函数转化过，则跳过 ，比如 const name = $t('test.js_9f61d', '你好');

这种场景，不应该被重复处理

第十二轮

在现有功能基础上优化，我在执行detect脚本的时候，发现 const age = $t('test.hhhhhhh', '哈'); /* i18n-key: test.js_54c8 */

这个并没有被扫描到，应正确识别test.hhhhhhh和test.js_54c8不一致，然后去locale下面把全部语言包的test.js_54c8都更新成test.hhhhhhh

最后

我使用了TRAE搭配Doubao-Seed-Code模型，十二轮Agent对话，实现了我的项目国际化文案扫描提取工具，cli工具结果验证可用，全程几乎没写代码，全程半小时不到，我的体验是，相比较于写代码的速度，我们没法去和AI竞争，但是，你知道要去做什么，这，其实更重要！我想感谢布兰登·艾奇，这位javascript创始人，给了我们前端赖以生存的工具，人们常说AI让程序员们处于水深火热，但是我更希望，AI的发展让我们变成更强的自己。

image.png

介绍下工作流程

  1. 初始化：运行 extract 命令提取中文文案并生成语言包
  2. 开发：在代码中使用 $t('key', '默认值') 形式的调用
  3. 维护：当需要修改 key 时，直接修改代码中的 key，然后运行 detect 命令自动更新所有相关文件
  4. 翻译：在生成的语言包文件中添加对应的翻译

该工具的实现确保了国际化过程的自动化和一致性，提高了开发效率，减少了人工操作的错误率。

代码我放在：github1s.com/bysking/tra…

avatar
文章
阅读
粉丝