Remix 中文社区贡献的第一个功能 -- 国际化

[drafish]

功能介绍

什么是国际化

简单来说，就是多语言切换。用户可以根据自身喜好，自由地选择自己熟悉的语言。

现在 Remix IDE 已经支持两种语言，中文和英文。点击左下角，进入设置，滚动到最下面，就可以切换语言啦。

今天要给大家介绍的，就是这个多语言切换的功能。这是我们 Remix 中文社区贡献的第一个功能。

为什么要贡献这个功能

我想应该没有人会质疑这个功能的必要性吧。任何一个面向全球用户的产品都有国际化的诉求。Remix 也不例外。

早在 2020 年的时候，Remix 就建了一个叫 UI Translation 的 issue ，那个时候就说要开发这个功能。但因为优先级比较低，一直没有开发。等到我们中文社区想帮忙翻译的时候，发现这个功能还没有开发。

这就很尴尬了。如果只做翻译，那就会像智谷星图和汇智网的镜像站那样，只能支持中文。Remix 官方不会接受这种翻译，也没法接受。因为 UI 上的英文文案是硬编码的，他们不可能把它硬编码成中文。

所以，没错，我就是为了这口醋，才包的这顿饺子。

怎么实现

我是用 react-intl 这个库来实现国际化的。同类型的库有很多，当时大概都了解了下，react-intl 的 star 是最多的。emmm，没错，每当犹豫不决的时候，我就看 star ，star 多的一定是好的。虽然这不绝对，但是管他呢。反正以太坊官网的国际化也用了这个库。

选定 react-intl 后就开始开发了。整个开发过程基本上就是找到英文文案，然后替换成 react-intl 的组件，并且给这个文案指定一个 unique key 。

<label className="py-2 align-self-center m-0" style={{fontSize: "1.2rem"}}>
-  Learn
+  <FormattedMessage id="home.learn" />
</label>

我一般是以文案所在模块的模块名为前缀，加上文案本身的小驼峰写法，来命名 key 。有时候碰到特别长的文案也会偷懒，直接写 home.text1、home.text2 这样。

react-intl 组件会根据 key 和当前用户选择的语言，去匹配对应的文案，展示到操作界面上。

完成度

这个功能开发起来并不是很难，但过程特别繁琐。因为要把文案一个个找出来，然后再替换成国际化组件。Remix 上的文案特别多，并不是只有表面上看上去这些。

完成了哪些

我已经陆陆续续给这个功能提交了 4 个 PR

1. UI Translation remix-project-org/remix-project#2581
2. Intl patch1 remix-project-org/remix-project#3171
3. Intl patch2 remix-project-org/remix-project#3219
4. Intl patch3 remix-project-org/remix-project#3992

前三个 PR 已经都 merge 了，最新版的 Remix 已经包含了这三个 PR 。第四个是最近刚提交的，还没有 merge ，估计要等到下个版本才会发布。

到现在为止，我也不敢说已经 100% 实现了国际化。但是，到第4个 PR 的时候，我已经明显地感觉到开发成本在增加。因为操作界面上一眼就能看出来还没有支持国际化的文案越来越少了，大多都是些需要经过一些操作才能显示出来的文案，这种文案找起来很难，测起来也很麻烦。

还剩哪些

我大概理了下，还有这么几种文案还不支持国际化。

1. 在 react 组件外的

我之前都是把一个字符串替换成一个国际化组件，仅此而已，侵入性很小，很容易做 codereview ，后期也很容易维护。但这有个前提，就是这个字符串必须在 react 组件中。如果在 react 组件外，就会报错。

虽然 react-intl 对这种情况有解决方案 -- RawIntlProvider，但需要引入一些额外的代码逻辑。这就会给 remix 本身的代码带来一定的侵入性。

还有一种解决方案，是改 remix 本身的代码逻辑，UI 相关的字符串都放到 react 组件中处理，react 组件外只处理逻辑。但这种方式同样会引入很多侵入性代码。

我觉得这样做有点得不偿失，所以这部分文案，我都没做国际化处理。

2. 不适合翻译的

有些文案，你一看英文就知道是啥意思，但如果翻译成中文，就会有点懵逼。

比如说 calldata ，翻译成中文就是调用数据。我自己看着感觉 calldata 更顺眼一点。所以对于这种文案，我一开始是直接跳过的。

但后来又觉得，要不还是改下吧。虽然现在可能 calldata 看着更顺眼一点，但保不齐以后中文用户越来越多，大家可能就更习惯于叫调用数据。我可以先让这个文案支持国际化，至于翻译，大家喜欢翻成什么就翻成什么。所以后来就又改了一部分。

但改着改着，就又觉得我这操心操的太早了点吧。等到大家改变习惯不知道得等到啥时候，我现在就废这功夫有点不划算，等到时候大家反馈了我再改也来得及。

所以对于这部分文案我是相当纠结的，最终是改了一部分，剩了一部分。

3. 被我遗漏的

这部分就没啥好解释了。就是很明确要改，但是就是被我漏了的。前面提到的第4个PR就是为了查漏补缺。越改到后面，查漏的成本就越高。补缺其实很快的，只要找到位置，很快就改好了。

现在查漏的成本已经非常高了，因为已经没有多少漏可以查了。而且就算我们现在真的把最后那一点漏给补上了，随着 Remix 本身的版本迭代，又会产生新的文案，又得去补漏。所以我觉得没必要为了最后那一点点漏，再专门花时间精力去查漏补缺。

后续怎么维护

以后每次 Remix 发布新版本，我们都会去看看产生了哪些新文案，我们会把这些新文案都替换成国际化组件。

然后我们还会收集社区的反馈。如果大家在使用过程中发现有未翻译的文案，大概率就是这个文案还没实现国际化。那么大家就可以反馈给我们，然后我们就会把这里改掉。

我们计划每次 Remix 发版后我们都会提交一个 PR 来查漏补缺。

怎么贡献

欢迎社区的小伙伴们给这个功能做贡献。贡献方式有两种

贡献代码

就是前面提到的查漏补缺。这活的难度其实挺低的。前面的坑我基本上已经趟平了，你来了就是依葫芦画瓢，而且这个 PR 是肯定会被 Remix 官方 merge 的。merge 以后，你就是以太坊核心项目的代码贡献者了。

可能有小伙伴不知道 Remix 在以太坊生态中的地位。我简单介绍下。你去看以太坊的 github 主页，Remix 是置顶的5个项目中的其中一个，可以说是核心中的核心。

以太坊核心项目的代码贡献者，这牛逼还是可以吹一下子的。

贡献翻译

如果嫌贡献代码太麻烦的话，这还有个门槛更低的贡献方式，就是翻译。

Remix 已经把 UI 界面上的文案都放在 crowdin 上了。所有人都可以去 crowdin 上翻译，或者审阅别人的翻译。如果你觉得别人翻译的对，就可以投个赞成票，如果觉得翻译的有问题，可以投反对票，还可以评论说出你的意见。

Remix 官方会定期把 crowdin 上的翻译同步到 Remix 源码中。虽然在 Remix 的代码贡献中看不到翻译者的名字，但是在 crowdin 上可以看到。

抛砖引玉

自认为国际化这个功能含金量不是很高，主要就是个苦活累活，没人愿意干，所以被我捡了个漏。

我也借此机会得到了 Remix 官方的认可，并且成立了 Remix 中文社区。我们现在每周都会和 Remix 官方开同步会议。另外，我们还得到了普朗克和 GCC 的支持。普朗克是以太坊生态中最大的中文社区。GCC 是一个专注于捐赠公共物品的基金会。

写这篇文章，一方面是为了展示下我们做了什么，另一方面也是为了抛砖引玉，吸引更多的小伙伴加入我们，一起来给 Remix 做贡献。