详解基于webpack&gettext的前端多语言方案

gettext 是GNU 提供的一套 国际化与本地化 处理的相关函数库。大多数语言都有对应的gettext实现。本文主要使用jed 来实现gettext 一系列方法对应的功能。

pot/po文件

xgettext/msginit/msgmerge

多语言支持流程

安装gettext

brew install gettextbrew link gettext

langs-loader 加载语言文件

npm install git@github.com:ezbuy/langs-loader.git --save-dev

需要修改webpack.config.js文件在module->rules（webpack 2.0）下面添加loader规则：

{  test: //.pot$/i,  use: [    "json",    {      loader: 'langs',      options: {isLoadAll: isDev,format:"jed1.x", "fallback-to-msgid":true, code:langCode}    }  ]}

isLoadAll表示会把所有语言版本的文件通过po2json转换成json，然后组合成一个json作为数据传给引用的地方。

code选项一般需要在代码发布时指定，不同语言版本打包时通过传入不同的code区分不同语言版本的代码打包。

代码中使用gettext系列函数

各端开发时使用各自实现的gettext方法去包装需要实现多语言的文案。使用gettext函数包装后， langs-util 就能知道代码中有需要多语言翻译的地方，并可以通过 langs-util 生成相关的pot及po文件。gettext方法底层我们使用jed 来实现其对应功能。

import toi18n from "common/i18n";const _ = toi18n(require("langs/index.pot"));const hiStr = _.gettext("Hi!");const num = Math.ceil(Math.random() * 2);const numStr = _.ngettext("item", "items", num);// I like your red shirt.console.log(_.sprintf( "I like your %1$s %2$s.", 'red', 'shirt'));

一般使用 gettext 方法包装一个需要翻译的字符串。

可以用于单复数处理，第一个参数传入单数情况下的翻译，第二个参数传入复数情况下的翻译，第三个传入实际需要执行判断的数据。

Jed内置提供了sprintf的支持，它是使用javascript-sprintf的sprintf函数的实现。

通过gettext 一系列函数的配合，使用 langs-util 进行生成处理后就能生成对应的pot及po文件。

langs-util gen -i src/

# langs/index.potmsgid "Hi!"msgstr ""msgid "item"msgid_plural "items"msgstr[0] ""msgstr[1] ""