5分钟前端国际化

做者简介 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…