背景

需要国际化的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-intlreact-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命令扫描一遍，看下哪些没有处理好的，再手动处理下~

希望本文能帮助到您！

点赞+转发，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）

关注 ｛我｝，享受文章首发体验！

每周重点攻克一个前端技术难点。更多精彩前端内容私信 我 回复“教程”

原文链接：https://github.com/ProtoTeam/blog/blob/master/201710/1.md

作者：蚂蚁金服数据体验技术团队