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

背景

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

方案选择

先大体上介绍下我选择的国际化方案。国际化方案很多&＃xff0c;我这里列举主要的几种&＃xff1a;

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

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

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

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

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

使用教程

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

安装

cnpm i i18n-pick cnpm用的淘宝镜像&＃xff0c;会快一些。

扫描

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

• JSXAttribute
• JSXText
• AssignmentExpression
• ObjectProperty
• ArrayExpression

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

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

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

提取

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

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

翻译

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

node_modules/.bin/atool-l10n

总结

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

tip

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

附录&＃xff1a;

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

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

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

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

原文地址&＃xff1a;github.com/ProtoTeam/b…