超实用！一个命令搞定 Web 国际化 _Web

作者：qiangwu，腾讯CSIG Web开发工程师
i18n-helper-cli 是什么i18n-helper-cli 是一个 Web 国际化整体解决方案，包含自动包裹词条，提取词条，翻译词条，词条翻译统计，节省人力预估统计，网页多语言显示异常检测（Coming soon）等功能。可以大大减低开发，测试，翻译各个角色的人力成本，减少重复劳动，低级错误。

文章插图

为什么需要 i18n-helper-cliWeb 国际化流程简单来说可以分为以下 5 个步骤

【选型】多语言框架选型（这里不深究，不在此篇范围），我们选定 i18next，18n-helper-cli 对多语言框架并不限制
【开发 - 包裹词条】从上面这步骤，我们知道需要把词条包裹起来 e.g 你好 => t('你好')
【开发 - 提取词条】把上一步中包裹的词条 copy 到翻译文件中
【翻译 - 翻译】翻译把词条翻译好，填入翻译文件
【测试 - 测试页面】开发提交测试后，对多语言页面进行测试

问题通过上面 5 步，可以完成站点国际化。大多数场景大家就是这么做的，但这里充斥着大量人工劳动，大量人工劳动意味着重复低效，出错几率提高。让我们从以下三个阶段分析下这些问题

【开发阶段】人工操作包裹和提取词条耗时长，但对个人无任何成长。如果是【全新开发】的站点，大家还可以耐着性子包裹词条，提取词条，但如果是【存量修改】及对已有的站点做国际化，而且这里的页面几十上百，甚至更多，这里的包裹词条，提取词条的工作量会让人崩溃遗漏包裹，提取词条(代码多，词条隐藏在各个文件的各个角落里。。。) 提取词条后，运行多语言界面无法看到效果，需要等到翻译返回
【翻译阶段】翻译耗时长遗漏翻译
【测试阶段】多语言页面测试每个都要测，耗费大量时间遗漏测试某个多语言页面

所以这里最大的问题是上面这些工作都需人工操作，问题清楚了，那接下来我们要做的就是把这些人工操作能够交给机器，实现自动化，提高效率，降低出错几率。
解决方案先上结论，i18n-helper-cli 可以很好的解决上述问题。
原理整体方案

【词条包裹】通过对代码进行编译，得到AST，找到符合条件（中文，或者其他语言，可配置）的 Node，根据配置创建新 Node，替换老的 Node
【词条提取】同上，也是AST, 找到的符合条件的词条以及原代码已经包裹的词条会被一起提取，根据配置写入文件
【词条翻译】从源文件翻译：如果有一份翻译词库（这里有常见的翻译），我们提取出来的未翻译词条在这里有，我们就可以直接从这里翻译机器翻译：未翻译词条调用云服务实现翻译（这里我们用的是腾讯云的翻译服务）
【网页多语言显示异常检测】提供一份页面 url 列表，用 Cypress 进行截图，调用腾讯云 OCR 服务提取图片文字，进行对比，假设我们有个叫你好的词条翻译成 en 为Hello，如果我们通过 OCR 得到的是Hel，那么我们可以认为这个页面有问题（Coming soon）
【统计】翻译词条统计：根据当前语言下未翻译词条数 / 词条总数减低人工耗时预估：根据包裹，提取，翻译词条数预估

包裹词条方案详解接下来我们详细分析下词条包裹的方案。我们要实现的是类似你好 => t('你好')，所以：

找到你好
替换成t('你好')

哈哈，刚说的就像网上的经典问题: 如何把大象放到冰箱?
回答：先打冰箱门，然后把大象放进去，在关上冰箱门
听起来没问题，好像很有道理的样子，但没有任何实际价值。言归正传，我们来探讨下实际解决方案：
方案 1 - 正则针对匹配到中文，这里我们第一个想法应该就是正则表达式了。/[u4e00-u9fa5]可以匹配中文。至此，我们完成了第一步找到需要包裹的文字。接下来就是把包裹上了'你好'.replace(/([u4e00-u9fa5]+)/gi,'t('$1')')，搞定。慢着，真的这么简单吗，想想我们真实代码的情况，注释，各种复杂的模板字符串，换行等等。这意味着这个正则到后面会巨复杂，到后面会面对一个晦涩难懂，难于维护的正则表达式。
另外还有个很蛋疼的事情，比方说我们的调试，上报等等代码，如console.log('不需要提取')，怎么办？感觉脑子不够用了。