近几年，随着业务的不断发展与市场的快速推广，产品面向的用户越来越多样化，其中不乏很多海外用户，越来越多的产品国际化需求给前端团队带来了新的挑战。
在进行产品国际化开发的过程中，我们团队遇到了一些问题，比如，繁琐重复的开发内容降低了开发效率；国际化框架的书写格式影响了代码的可读性；各种文案相关的问题难以排查优化等。
为此，我们调研对比了现有的工具和方案，最终找到了适合我们项目的vscode插件，并在此基础上，自主研发了一个Vue国际化开发的命令行工具yidun-i18n-cli。
本文将分析前端国际化开发过程中可能存在的困扰，并介绍相关工具的调研结果，及yidun-i18n-cli的设计思路、实现方案和未来规划，希望可以给大家带来帮助与启发。
一、前端国际化的困扰对于前端国际化，很多成熟的框架都有与之匹配的现成国际化插件，比如React的React-intl、Vue的VueI18n，按照插件规范进行代码改造就可以将项目引入国际化，整个流程并不复杂，但项目重构和后续迭代开发过程中却出现了很多新的问题（因为部门项目大多基于Vue开发，下面基于VueI18n进行说明）。
1.文案提取、文案key命名、语法转换过程繁琐低效
基于VueI18n的规范，为了支持国际化，必须将代码中所有的中文文案按照如下方式进行改造，对于每一条文案都要重复进行提取、key值命名、语法转换的步骤，这个过程如果完全手动，是十分耗时的。
2.各种文案问题难以排查优化，包括重复定义的文案、失效文案、未提取的中文、错误引用
重复定义的文案：不同key对应的文案完全相同。引入的场景：提取文案时未注意到文案已定义，又重新定义了一份；多需求并行开发时，不同的开发可能同时提取了同份文案，但是定义的文案key值又不同。
失效文案：未被引用的文案。引入场景：迭代开发过程中，当部分中文需要被被删除或是修改时，开发只调整了引用处。
未提取的中文：未按照VueI18n的规范进行代码转换，造成外语页面展示异常。引入场景：开发提取文案遗漏。
错误引用：引用的key值不存在。引入场景：开发key值写错，或是删除了key但是未修改引用处。
3.UI调试受阻：在产品经理交付翻译结果之前，无法进行外语页面展示效果的调试
4.翻译结果交付较慢，影响提测进度：大部分产品经理翻译文案会先利用翻译工具得到参考的翻译结果，然后再进行微调，当文案较多时，翻译过程比较耗时。
5.代码可读性变差：中文改成VueI18n语法之后，无法直接确认代码中的中文内容
二、相关工具和解决方案调研为了解决上述问题，我们对现有前端国际化的相关工具和解决方案进行了调研。
因为部门项目使用的都是VueI18n，因此首先调研了VueI18n相关的vscode插件和命令行工具，对比结果汇总如下：
其次，我们还调研了阿里开源的一套国际化解决方案kiwi，它集成国际化框架kiwi-intl、vscode插件kiwi-linter、命令行工具kiwi-cli为一体，功能比较完整，基本解决了国际化开发中存在的大多痛点，但它并不适用于Vue项目。
经过调研，我们发现可以通过引入i18n-ally插件解决代码可读性变差的问题，但因为它不能支持项目级别的代码批量处理和分析，无法用于解决其他问题。借鉴阿里的kiwi的思路，我们最终决定自主研发一个适合于Vue项目的前端国际化命令行工具。
三、yidun-i18n-cli的设计与实现下图描绘的是一个迭代开发周期的工作流：首先，前端根据产品的需求文档进行功能开发，对vue、js等文件的修改。完成功能开发后，再根据VueI18n规范进行代码转换，并更新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已投入使用，为部门国际化的开发工作提供了极大的便利，之后将会持续改善仍旧存在的一些不足。