5分钟前端国际化

avatar
数据可视化 @蚂蚁集团

作者简介 Kid 蚂蚁金服·数据体验技术团队

背景

需要国际化的react项目已经迭代了1年多,文件众多,包含了jsx和普通的js对象文件。粗略估计有几千个中文词条。本文先介绍了采用的国际化方案,然后给出了国际化的过程和一个自己开发的脚本i18n-pick,按照教程,可以帮助前端jsx项目5分钟快速国际化。

方案选择

先大体上介绍下我选择的国际化方案。国际化方案很多,我这里列举主要的几种:

  • 编译期间转化:例如wepack的i18n-webpack-plugin,打包的时候对_('key')进行转义
  • 运行期间转化:react-intl等,把中文词条写成intl.get()的方式,在运行时获取中文文案
  • wordpress的getText方案:gettext是一个filter 钩子, 用来替换和本地化翻译文本, 替换 __()、_e()、_x()、_ex() 和 _n() 函数包含的文本

由于项目中我选择了antd作为视觉组件库。所以想和antd提供的官方的国际化方式保持统一。antd推荐的是react-intl,不过另一款类似的react-intl-universal也有不少人推荐,两者都比较成熟。所以我对两种进行了比较:

react-intl react-intl-universal
切换不刷新页面
js文件支持(重要)
名词单双数,默认值,html
无破坏性 劣(装饰器的代码实现会改变ref)

名词单双数,默认值,html这种功能两者都有。我这里就不多说了,具体的功能感兴趣的可以去看下API。比较关注的其实是js文件支持那块。react-intl只支持在jsx文件的内容中使用,但是由于项目配置化编程的缘故,很多中文是写在js对象中的。react-intl不支持在普通js对象中使用,很不方便。而且他的装饰器实现会改变组件的ref。他唯一的好处是他的切换不需要刷新页面,不过这种低频的操作刷新页面倒也无妨。

针对以上的原因,最终选择了react-intl-universal作为国际化方案。不过后来真实使用的时候,发现他提供的支持js对象的方式不是很好,于是还是直接采取了react-intl-universal的思想。简单的包装了下他们的依赖intl-messageformat~这里不详细描述了,他的api官网文档可以查到。

国际化方案选择完了之后,开始执行阶段。以上无论是选择哪种方案,编码时基本都要求一种特殊的形式。要么intl.get(),要么是文案前加上_#这种。对于已经迭代了很久的项目,这就涉及到了一项力气活。对中文文案进行提取以及替换。在这里就直接分享脚本i18n-pick,描述下整个的国际化过程了。

使用教程

主要分为3步,安装,扫描和提取,然后使用翻译工具来进行词条的翻译,具体步骤如下:

安装

cnpm i i18n-pick cnpm用的淘宝镜像,会快一些。

扫描

./node_modules/i18n-pick/bin/i18n-pick.js scan [path] 命令最后的path选择你的代码目录,运行完成后会在项目根目录生成i18n-messages文件夹,包含jsx.text,text.text和zh-CH.json三个文件。具体实现是调用了babel的transformFileSync方法,在编译成语法树的时候,解析下面几种babel-type

  • JSXAttribute
  • JSXText
  • AssignmentExpression
  • ObjectProperty
  • ArrayExpression

这里的基本含括了所有的情况,如果有遗漏的,欢迎联系我。将解析的这几种的value与/[\u4e00-\u9fa5]/进行比对。将包含中文文案的文件名,行数,文案内容记录下来。JSX内的中文文案存到jsx.text,一般JS内的中文文案存到text.text。

分开存的原因是因为替换的时候,JSX内的文案需要加上大括号才行。

同时我会把提取出来的文案内容存到了zh-CH.json中。这里为了配合翻译工具atool-i10n的使用,json中的存储格式也是按照他的要求提供的。这里有个小tip,参见附录。

提取

./node_modules/i18n-pick/bin/i18n-pick.js pick 然后执行pick操作,就是将jsx.text,text.text文件的内容按行分析,对文件进行内容替换。这里最开始我将key值定为了自增长的数字。为了保证源码一定的阅读性,我同时将原文案以/**/注释的形式标在文末。后来,吸取了评论区lany9527同学的建议。将中文作为了key值~~然后我会在文件头部import一下依赖。效果如下:

base/reactIntlUnicersal这个文件需要自己放到自己的项目中,代码可以参考链接

翻译

然后建议安装atool-l18n这种翻译工具,直接翻译成英文文案。就可以编译运行了~当然后续还得有一些css的调整工作。 cnpm i atool-l10n

node_modules/.bin/atool-l10n

总结

本文主要是分享了一个文案提取的脚本,来让前端jsx项目快速国际化。如有使用上的问题,欢迎在评论区询问~

tip

多谢评论区lany9527同学的建议,脚本已经更新。不再以自增长的数字作为key值了。换成以中文名作为key进行提取,已经更新脚本~

附录:

1.目前脚本不支持中文中有换行的情况,所以得修正下scan之后的三个文件的内容。并且这部分内容得手动去替换。不过这种情况很少,我的项目扫出2000个词条只有两条有这个问题。

2.第二种是pick操作执行之后可能会编译出错,那是因为你的项目中可能手写了\n这样的文案,得手动处理下这种情况。

3.第三种是不支持中文中含有\"的情况,这部分也得自己处理,原因是我以中文作为key,为了提取后的值过eslint,得用单引号引起来。就得对双引号单引号进行转义。无法处理已经转义过的内容。在完成了文案的转化之后可以再用scan命令扫描一遍,看下哪些没有处理好的,再手动处理下~

感兴趣的同学可以关注专栏或者发送简历至 'yifei.pyf####alibaba-inc.com'.replace('####', '@'),欢迎有志之士加入~

原文地址:github.com/ProtoTeam/b…