国际化（i18n）

面对的问题

文案

• 静态文案翻译

  使用i18n国际化插件匹配字典重新赋值（预估工作量相当大，尽量配合编辑器插件直接进行机翻，后续再给业务人员校准）

• 动态文案翻译(server端下发的动态数据)

样式

• 不同语言长度不一样造成的样式错乱

  根据语言切兼容样式的class

图片替换

时区问题

长文案加变量的翻译问题

切换语言与服务端数据间的更新

兜底解决，直接刷新当前页面

方案

• 定义国际化配置
  定义的方式有多种，多以文件的形式单独保存，如json，js，properties 等，并且将配置信息以键值对的形式保存备用

  当前采用JSON格式，易于后期远端维护及更新

• 根据环境读取配置

1. hash型：#cn; #en; #us
2. saerch型：?lan=cn; ?lan=en; ?lan=us
3. url/meta型： 163.com/cn/; 163.com/en
4. 缓存型：缓存形式多为cookie，默认cn，用户重新设定后将缓存更新

   当前方案采用缓存型，默认根据用户浏览器设置的语言自动选择，兜底语言默认设置为 en，语言状态会存储再本地storage及cookie中。

具体方案

react-i18next + i18next-browser-languagedetector + i18next-http-backend

• react-i18next: 作为主核心，提供对语言包切换及字段映射的支持
• i18next-browser-languagedetector: 用来初始化语言环境，针对用户的浏览器进行嗅探，使用对用的语言包，并维护切换后的语言信息（存储在本地localstorage及cookie - 后续后端可直接根据cookie中的该字段进行对应处理）
• i18next-http-backend: 提供了语言包异步加载的能力，后续支持到远端维护语言包的能力

Antd国际化

通过对 react-i18next 中 useTranslation 拿到 i18n 中的 当前的 语言信息，再通过顶层容器 ConfigProvider 动态的切换对应的 Antd 语言包

编辑器配套插件

希望通过插件形式，简化前期开发流程，尽可能减少国际化对研发效率的影响。

VSCode - i18n Ally

• VSCode插件直接搜索 i18n Ally 进行安装

• 打开命令工具 Cmd + Shift + P 输入 i18n 过滤出 i18n Ally 命令，自动设置语言包地址（未能识别可手动选择）
  

• 终端下方可选择显示自己希望显示的语言
  
  这样就能在文本失焦状态显示对应的语言译本，选中后又能显示源码
  
  

• 快速提取文本至本地化文件
  选中文本内容 打开命令工具 Cmd + Shift + P 选择 提取文案到i18n（建议将此设置为快捷键）
  
  新建路径时可用 . 分隔，这样就可以形成嵌套
  
  然后选中你使用的语法
  
  再回头看一下本地化的JSON文件，我们可以发现所有文件都新增了该字段，默认的语言文件也已成功填充该字段，剩下就是翻译未翻译的对应语言。
  
  我们再利用工具直接将未翻译的语言直接通过机翻，待后续业务人员二次校准
  
  点击翻译文案，如果没有意外的话对应的文本就成功翻译并赋值该字段

  因为此处调用的机翻接口是谷歌，可能会因为ip污染导致调用失败，可以间隔一段时间再尝试调用，插件本身还提供了其它翻译提供商，后续自行研究。

文档地址：lokalise/i18n-ally

WebStorm 待续….

目前看了一下，i18n Ally 没提供 WebStorm 的版本，其它插件使用感觉还是有些欠佳…