前端如何优雅实现 i18n?

923 阅读3分钟

前言:

相信!近几年各位前端大大做的国际化项目越来越多了,我们配置i18n语言包越来越多方式了,有传统的最基础的自己配置两个文件en.json&zh-cn.json。也有开始用i18n Ally插件来自动翻译。再或者有直接用一些auto插件来自动生成翻译文本

但是这些方式都需要前端来操作,或者就是翻译准确率问题。传统的配置方式,要自己集成需要翻译的文本给到上面,再发下来给我们前端自己去改配置文件,繁琐。

这时候出现i18n Ally插件,不用直接写json文件了,可以帮你生成key(虽然这个key是拼音,不过可以生成的时候改),也帮你自动翻译到其他语言配置文件里,但是准确率是个问题;第二就是不好维护,后面会出现越来越多不用的文本;第三,有时候想通过文本来查询代码,查询步骤也要+1,先查询到该文本的key,才能找到对应代码,不过可以在生成key的时候改成中文也方便查找,但是操作起来还是不太方便,如果要翻译一篇文章,例如用户条例那些东西,就很麻烦。

然后还有一些插件,能够直接线上翻译,不过这种方式只合适一些小站点,大一点的网站就不太好了,体验不好,机翻明显,没有上下文等问题。

那么有没有一种方法,准确率又高,不用我们前端做太多事情,后期好维护的方案呢?

有,我们可以把翻译工作,翻译原剥离完全剥离出我们前端项目之外,交给产品策划去管理。我们可以把翻译文本集成一个Excel表,前端只需要录入key跟原文本(中国人就zh-cn简中)就好了。后面就交给产品去负责找翻译。后面我们只要把Excel表转成对应配置文件就好了。

D66A4CF8-F414-4aed-A423-E228F88BD30B.png

我们是程序员,前端项目也需要打包,有node的环境在,对于一些静态文件管理,很多时候不用一个一个配置上去,完全可以利用nodeJs来生成一些配置文件。

我们在打包的时候,或者本地环境调试,都调用这个文件,将Excel表生成我们需要的json文件

image.png

至于怎么自动的执行我们这个脚本,我这里以vite为例,我们在vite.config文件里面的写个方法runExcelToJson

然后在plugins里面调用runExcelToJson,这样就能生成我们要的json文件了。后续如果要加语言,只要加多一列语言配置就好了,像下图就加了很多东南亚的语言配置,然后这文件丢给产品去维护(把锅都丢出去)。

image.png

image.png

当然,方法是可行的,至于合适不合适你所在的项目组,得看情况了,毕竟不是所有产品都想做这些事情,可能他们也能接受直接机翻。

以前做过游戏项目,游戏项目里面,程序一般都是专注于功能开发,翻译工作一般都是策划去负责,不过游戏项目自带翻译表格的功能(以UE项目为例子),不用自己额外去写脚本生成配置文件。所以现在做前端项目,如果项目复杂度上来一点,我都考虑这种方式,把翻译管理工作丢出去,不再考虑由程序自己做了。