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

2017-03-16  本文已影响1060人  ezbuy研发

gettext 介绍

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

pot/po文件

xgettext/msginit/msgmerge

多语言支持流程

安装gettext

brew install gettext
brew 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.pot

msgid "Hi!"
msgstr ""

msgid "item"
msgid_plural "items"
msgstr[0] ""
msgstr[1] ""



# langs/index.th.po

msgid "Hi"
msgstr ""

msgid "item"
msgid_plural "items"
msgstr[0] ""
msgstr[1] ""

把生成的文件交由对应的翻译人员完成翻译就可以重新放回到文件夹当中替换目标po文件。

打包&发布

各端打包方式都会有相应的差异，最终目的无非就是使线上代码可以按照不同语言的版本加载不同的语言文件。对于后台等系统则可以使用isLoadAll的方式把所有语言版本的文件都加载进来，通过i18n的包装函数去从数据源中拿出不同国家的多语言数据文件。


cross-env LANG_CODE=th

移动端发布使用环境变量LANG_CODE来区分要编译成的语言版本。

const langCode = process.env.LANG_CODE

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

生成完所有语言语言版本的静态文件后，需要让浏览器能够运行不同语言版本的js文件。一种方式可以通过后台程序读出语言版本，再把正确语言版本的js路径输出到html当中。另外一种方式可以新建一个多语言loader的文件，通过前端js代码动态插入正确语言版本的js代码（文件打包的时候需要把各语言版本的js文件路径输出到页面之中）。


import {languageCode} from "common/constant";

const loadScript = (path: string) => {
    const script = window.document.createElement("script");
    script.setAttribute("src", path);
    window.document.body.appendChild(script);
    return new Promise((resolve, reject) => {
        script.onload = resolve;
        script.onerror = reject;
    });
};

const {mainFilePath} = window;

if (typeof mainFilePath === "string") {
    loadScript(mainFilePath);
}else if (typeof mainFilePath !== "string") {
    loadScript(mainFilePath[languageCode] );
}

langs-loader 实现

在loader代码中拿到require文件的实际路径，如果存在code选项的话则根据pot文件找到对应code的po文件，然后使用po2json转换为对应格式的json文件，最后再返回给引用的地方。如果存在isLoadAll选项并且isLoadAll选项为true的话，则会load 同名pot文件的所有对应语言版本的po文件，然后再通过po2json转换组合成一个json文件，再返回出去。

langs-util 实现

langs-util主要整合了xgettext/msginit/msgmerge等方法。传入所需要解析的文件或文件夹，生成对应的po及pot文件。


const genPoFiles = (inputFilePaths: string | string[], potFilePath: string, langs: string[]) => {
    const potDirName = dirname(potFilePath);
    const filename = basename(potFilePath, extname(potFilePath));
    const filePaths = typeof inputFilePaths === "string" ? inputFilePaths : inputFilePaths.join(" ");
    execOnlyErrorOutput(`xgettext --language=JavaScript --add-comments --sort-output --from-code=UTF-8 --no-location --msgid-bugs-address=wanglin@ezbuy.com -o ${potFilePath} ${filePaths}`);

    checkFileExists(potFilePath).then((ifPotFileExists) => {
        if (ifPotFileExists) {
            console.log(green(potFilePath));
            writeFileSync(potFilePath, readFileSync(potFilePath).toString().replace("charset=CHARSET", "charset=UTF-8"));
            langs.forEach((lang) => {
                const poFilePath = join(potDirName, `${filename}${lang === "" ? "" : `.${lang}` }.po`);
                checkFileExists(poFilePath).then((ifExists) => {
                    if (ifExists) {
                        execOnlyErrorOutput(`msgmerge --output-file=${poFilePath} ${poFilePath} ${potFilePath}`);
                    }else {
                        execOnlyErrorOutput(`msginit --no-translator --input=${potFilePath} --locale=${lang} --output=${poFilePath}`);
                    }
                });
            });
        }
    });
};

生成po文件时，需要传入需要给xgettext解析的文件列表以及目标pot文件路径还有生成的多语言版本种类。xgettext会根据传入的解析文件生成新的pot文件，如果生成成功则开始生成对应语言版本的po文件，如果对应的po文件存在则使用msgmerge更新po文件，如果不存在则使用msginit创建新的po文件。

上一篇下一篇

猜你喜欢

热点阅读