背景
近几年，随着业务的不断发展与市场的快速推广，产品面向的用户越来越多样化，其中不乏很多海外用户，越来越多的产品国际化需求给前端团队带来了新的挑战。
在进行产品国际化开发的过程中，我们团队遇到了一些问题，比如，繁琐重复的开发内容降低了开发效率；国际化框架的书写格式影响了代码的可读性；各种文案相关的问题难以排查优化等。
为此，我们调研对比了现有的工具和方案，最终找到了适合我们项目的 vscode 插件，并在此基础上，自主研发了一个 Vue 国际化开发的命令行工具 yidun-i18n-cli。
本文将分析前端国际化开发过程中可能存在的困扰，并介绍相关工具的调研结果，及 yidun-i18n-cli 的设计思路、实现方案和未来规划，希望可以给大家带来帮助与启发。
一、前端国际化的困扰
对于前端国际化，很多成熟的框架都有与之匹配的现成国际化插件，比如 React 的 React-intl 、Vue 的 Vue I18n，按照插件规范进行代码改造就可以将项目引入国际化，整个流程并不复杂，但项目重构和后续迭代开发过程中却出现了很多新的问题（因为部门项目大多基于 Vue 开发，下面基于 Vue I18n 进行说明）。
1.文案提取、文案 key 命名、语法转换过程繁琐低效
基于 Vue I18n 的规范，为了支持国际化，必须将代码中所有的中文文案按照如下方式进行改造，对于每一条文案都要重复进行提取、key 值命名、语法转换的步骤，这个过程如果完全手动，是十分耗时的。
2.各种文案问题难以排查优化，包括重复定义的文案、失效文案、未提取的中文、错误引用
重复定义的文案：不同 key 对应的文案完全相同。引入的场景：提取文案时未注意到文案已定义，又重新定义了一份；多需求并行开发时，不同的开发可能同时提取了同份文案，但是定义的文案 key 值又不同。
失效文案：未被引用的文案。引入场景：迭代开发过程中，当部分中文需要被被删除或是修改时，开发只调整了引用处。
未提取的中文：未按照 Vue I18n 的规范进行代码转换，造成外语页面展示异常。引入场景：开发提取文案遗漏。
错误引用：引用的 key 值不存在。引入场景：开发 key 值写错，或是删除了 key 但是未修改引用处。
3. UI 调试受阻：在产品经理交付翻译结果之前，无法进行外语页面展示效果的调试
4. 翻译结果交付较慢，影响提测进度：大部分产品经理翻译文案会先利用翻译工具得到参考的翻译结果，然后再进行微调，当文案较多时，翻译过程比较耗时。
5. 代码可读性变差：中文改成 Vue I18n 语法之后，无法直接确认代码中的中文内容
二、相关工具和解决方案调研
为了解决上述问题，我们对现有前端国际化的相关工具和解决方案进行了调研。
因为部门项目使用的都是 Vue I18n，因此首先调研了 Vue I18n 相关的 vscode 插件和命令行工具，对比结果汇总如下：
在上述 vscode 插件中，下载量最多的是 i18n-ally，它功能丰富、交互友好，且支持多种国际化插件；而命令行工具中，vue-i18n-cli 支持项目级别的文案批量操作，但是功能实现上存在的问题较多，不是很可靠，vue-i18n-extract 功能比较单一，只支持文案检查。
其次，我们还调研了阿里开源的一套国际化解决方案 kiwi，它集成国际化框架 kiwi-intl、vscode 插件 kiwi-linter、命令行工具 kiwi-cli 为一体，功能比较完整，基本解决了国际化开发中存在的大多痛点，但它并不适用于 Vue 项目。
经过调研，我们发现可以通过引入 i18n-ally 插件解决代码可读性变差的问题，但因为它不能支持项目级别的代码批量处理和分析，无法用于解决其他问题。借鉴阿里的 kiwi 的思路，我们最终决定自主研发一个适合于 Vue 项目的前端国际化命令行工具。
三、yidun-i18n-cli 的设计与实现
【功能设计】
下图描绘的是一个迭代开发周期的工作流：首先，前端根据产品的需求文档进行功能开发，对 vue、js 等文件的修改。完成功能开发后，再根据 Vue I18n 规范进行代码转换，并更新 en.json、cn.json 等语言信息文件。最后，将需要翻译的文案整理成文档交付产品经理，待产品经理完成翻译后，再导入翻译结果，进行最终的调试检查后提交代码。至此，一个开发周期就完成了。
上述过程中，国际化相关的大部分工作是可以通过工具自动化完成的，包括文案提取、语法转换、文案导入导出、文案检查与修正，其中文案检查具体来说包括中文、重复文案、未使用文案、错误引用的检测。
除此之外，在迭代开发过程中我们又为工具新增了一些功能：
1. 翻译：交付产品经理的文案文档，附上对应的翻译参考，辅助产品经理快速进行翻译工作，也便于开发提早进行外语页面的调试
2. 语言目录的构建或重构：工具对语言目录有结构和命名要求，该功能可以方便进行目录构建
3. 增量模式：解决全模式耗时的问题，在增量模式下，只对修改的代码进行检测和处理，同时也可以与 lint-staged 结合，在提交代码之前进行自动转换
4. 忽略代码块：对于不需要进行提取和翻译的中文可以通过注释的方式进行忽略
5. 深导出：满足按需翻译文案的需求，支持对文件以及其所依赖的模块进行检测，然后只导出相关的文案进行翻译
【关键功能实现思路】
1.文案提取
2.中文查找：使用 vue-eslint-parser 提取代码 AST，过滤节点，通过正则匹配进行中文识别
3.文案变量命名：拼音 (10)_md5(5)
4.语法转换
如下，将需要转换的文案分为 5 种情况，分别按照不同语法进行调整。对于模板字符串、vue 模板字符串，自动将文本和表达式进行组合转换，以保证提取文案尽可能完整。
• 文案翻译：调用 google 翻译 api
• 导入导出：文件格式为 tsv，采用 d3-dsv 进行文件的读写；深导入需要定位依赖文件，使用 enhanced-resolve 解析路径
• 忽略代码块：借鉴 eslint 忽略注释思路，使用 i18n-cli-disable-next-line ，i18n-cli-disable 和 i18n-cli-enable 标记需要注释的代码区域
【功能演示】
• 代码自动转换
• 文案导出、导入
思考
目前，yidun-i18n-cli已投入使用，为部门国际化的开发工作提供了极大的便利，之后将会持续改善仍旧存在的一些不足。