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


Posted in Javascript onJanuary 29, 2019

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

pot/po文件

  • pot文件 是po文件的模板文件,一般是通过 xgettext 程序生成出来的。
  • po文件 是根据pot文件通过msginit程序,设置对应的国家语言生成用于填写实际翻译内容的文件。

xgettext/msginit/msgmerge

  • xgettext 程序可以扫描指定的代码文件,取出其中gettext部分的内容生成对应的pot文件。
  • msginit 根据对应的pot文件生成对应语言版本用于实际翻译的po文件。
  • msgmerge 如果对应语言版本的po文件存在的话,则需要使用msgmerge方式把pot文件中新加入的一些msgid合并到po文件当中。

多语言支持流程

安装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

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

  • code

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

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

  • ngettext

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

  • sprintf

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文件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
为javascript添加String.Format方法
Aug 11 Javascript
关于 文本框默认值 的操作js代码
Jan 12 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
简单理解vue中实例属性vm.$els
Dec 01 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 #Javascript
vue实现的下拉框功能示例
Jan 29 #Javascript
angular4中引入echarts的方法示例
Jan 29 #Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 #Javascript
微信小程序实现页面浮动导航
Jan 28 #Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 #Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 #Javascript
You might like
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
跟老齐学Python之用while来循环
2014/10/02 Python
python文件写入实例分析
2015/04/08 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
python入门之基础语法学习笔记
2020/02/08 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
人事档案接收函
2014/01/12 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
研究生毕业鉴定
2014/01/29 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
南京青奥会口号
2014/06/12 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
早安问候语大全
2015/11/10 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis