前端项目国际化开发体验优化

背景

在公司内部从0开始第一个新的前端项目之后，新接手的项目有多语言的要求，原先的其他旧的前端项目中已经有使用vue-i18n做过国际化，在前端项目中有i18n相关的方案，但是总体而言翻译效率和开发体验等都有待提高，比较依赖开发去手动做翻译词条的录入和翻译结果录入。

目标

本篇博文旨在提高国际化开发的效率，不涉及vue-i18n相关的使用，帮助团队成员用更少的时间来完成国际化的工作。

现状

国际化的思路是在代码中维护多个语言的词条，以key value的形式存放，然后在具体的代码中去根据具体的key获取对应的value，展示当前语言的文本。对于团队内部的前端开发，在原先的开发姿势中，一般碰到国际化的工作会有下面的步骤

在原先的简体中文的词条表中找有没有现成的，没有现成就自己添加一个
根据这次的文案，想一个英文的key，然后添加到词条表中
在代码中用这个英文的key，配合$t等命令来渲染
补充其他语言的翻译词条，例如英文，将中文复制到xx翻译网站进行翻译，然后补充到代码中英文的词条中
查看下其他语言下的效果

问题

上面的这种步骤是常规的一些开发模式，但是存在不少的问题，笔者结合自己团队的一些情况做出说明

容易添加重复的词条，由于判断有没有现成的词条全靠开发自己判断，部分开发可能随意添加一些词条，导致一些重复词条的出现
想一个英文的key也会重复，这个key是开发自己写的，一般会按自己的习惯将中文的意思大概转成英文得到一个key，这个存在一些问题。比如重复的key，比如有些中文是【确定】，有的是【确定】，都是用了confirm这个英文，这样就会出现key重复的情况。另外每次想这个key值也是挺花时间，同时因为key给开发的阅读性不高，最后还是得回到词条表中才能看到具体的文案。
设置了一个key之后，在具体的代码中还要手动复制替换使用才可以使用，这个过程可以优化
没有批量替换的方案，一旦要做一个旧系统从0到1的翻译替换，就要一个个排查替换，效率太低
其他语言的翻译得一个个去其他翻译网站做转换然后复制回来，没办法一次性集成，效率太低
没有办法检测分析出哪些词条漏翻译，少翻译等

方案

基于上面的这些问题，这里采用的是vue-i18n-ally这个vscode插件，在webstorm也会有同名的插件，这里笔者就以vscode来做这个插件的使用教程。

插件使用步骤

插件安装

这个我们直接在vscode中搜索这个插件即可，点击安装即可

打开姿势

i18n-ally插件会根据配置读取当前工作区的目录，所以如果你是vscode的话，请用一个窗口单独打开你的项目，不要一个窗口里面打开一堆项目，这个是笔者在协助其他同事使用插件的时候发现的问题，如果有类似的问题请留意打开方式。

基本设置

设置资源文件的路径

这一步主要是要指定到时候资源文件存储的位置，后续生成的词条都会存到这个位置，识别词条也是这样，例如设置src/locales 或者是src/lang这个目录

json 复制代码

"i18n-ally.localesPaths": ["src/locales"]

设置语言词条的文件

可以在指定的目录创建好语言对应的json文件，例如中文简体用zh-cn.json，可以参考

笔者接手的一些旧项目，之前是以.js文件的形式存放词条，有多个.js文件存放，最后合成一个并export default出来，笔者觉得配合这种插件的话没必要这么复杂，并且多个文件也没办法保证key是全局唯一的，看下原先的保存多语言词条的文件结构

这里为了让插件能够生效，笔者就将原先的结构统一改成为了一个.json文件，单个语言的词条都在这个文件中维护即可

设置主体语言

因为我们都是中文的开发者，首选的开发语言就是简体中文，所以这里要设置好这个主体语言。注意，这一步主要是用来让插件知道开发中文案用的主体语言，提取的时候会将其提取到指定的json文件中，比如我们是用简体中文，我们就设置一下

json 复制代码

"i18n-ally.displayLanguage": "zh-cn"

可视化设置

词条key设置

设置key的生成规则为随机，当然也可以自己输入，key的风格为驼峰式。因为本身key的阅读性不是很高，保证唯一即可，所以笔者选择了直接用随机值的方式来生成key。可以根据自己的实际考虑调整这个方式，插件本身也是有多种的key生成方式。

json 复制代码

"i18n-ally.extract.keygenStrategy": "random",
"i18n-ally.extract.keygenStyle": "camelCase",
"i18n-ally.keystyle": "nested",

整体翻译插件的配置

json 复制代码

    "i18n-ally.localesPaths": ["src/lang"],
    "i18n-ally.indent": 4,
    "i18n-ally.extract.keygenStrategy": "random",
    "i18n-ally.extract.keygenStyle": "camelCase",
    "i18n-ally.keystyle": "nested",
    "i18n-ally.extract.autoDetect": true,
    "i18n-ally.displayLanguage": "zh-cn"

翻译单个词条

打开文件，在vscode左边操作栏打开插件，可以看到当前硬编码的文案

在编辑区域可以看到对硬编码的文案有了下划线的提示，我们用快捷键打开提示

这里有三个快捷操作，按顺序分别是

提取文案作为一个翻译词条
在当前文件中忽略这个文案，不需要做翻译
在全局中忽略这个文案，不需要做翻译

选中第一个作为翻译词条，在最顶部会弹出一个输入框，这里可以自己设置词条的key，如果没有设置用随机值的方式，默认是用slug拼音的方式生成的，这里设置为了驼峰的方式作为key。如下

回车之后可以替换原先的硬编码文案，可以选择对应的替换规则

这里我们选中第一个$t的格式看下效果

可以看到这里被我们替换为了指定的规则，看一下对应的翻译文案，我们在插件中设置默认的开发语言是zh-cn，这里添加之后会在zh-cn.json中添加上这个词条

因为我们在上面的那一步已经设置为了用随机值的方式生成key，所以使用起来是这样的

如果已经有同样的中文词条的时候，可以直接选择，比如下面的projectList，如果想重新创建一个词条，直接选第一个，插件已经帮我们生成好一个唯一key，选择回车即可

翻译成其他语言

打开插件，可以看到progress，这里会展示当前翻译词条的翻译进度，我们在上面的步骤中增加了一个词条，只做了zh-cn的翻译，其他en zh-tw需要机器翻译或者手动添加

看下插件的tree操作区域，这里可以看到词条的信息以及对应的翻译文案，比如我们上面操作的【用户邮箱】

我们选择翻译这个文案，右上角有这个icon，可以翻译

有提示问是否翻译，直接yes即可

翻译的时候会提示转圈圈，这个插件底层用的机器翻译引擎是有多个可以选择的，比如google翻译百度翻译，甚至是gpt，每个翻译引擎需要配置的东西不太一样。笔者这里是用google翻译，因为不需要额外的配置，只需要打开梯子

翻译完成之后

我们看一下资源文件，可以看到翻译的词条已经添加到资源文件中了，到这一步已经完成了词条的多语言翻译

单文件批量翻译

在上面的例子中我们已经配置了我们想要生成的key的规则，用随机生成的方式，如果是要通过页面选择的话可以搜索这个插件更改下这个配置@id:i18n-ally.extract.keygenStrategy ，这里改为random。设置好我们想要的key规则再去批量翻译

vscode侧边栏点击插件的icon，打开要批量翻译的文件，然后看一下current file，这里列出了所有硬编码的文案，基本上就是我们要处理的文案。当然可能存在已一些缺漏，这个就需要自己去判断。

右键处理整个文件的文案

看下结果，zh-cn.json里面已经将所有的识别到的文案都添加到词条中

人工走查下是否有遗漏，笔者的经验是这个插件不能完美的替换或者提取，可能有部分硬编码的字符串没有被识别到，或者替换的时候遗漏一些处理，所以我们整个文件处理完之后最好还是要人工走查下保证。
例如可能会有一些在dom中的硬编码字符没有被识别到这时候我们就在一些插件可以识别到的地方添加这个字符，然后调用插件的快捷键提取这个字符，然后手动改一下这个硬编码的字符

还有就是处理一些操作符，比如笔者碰到的是用vue2的项目，替换完之后是这样