详解基于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 相关文章推荐
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
package.json文件配置详解
Jun 15 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
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
239军机修复记
2021/03/02 无线电
动态新闻发布的实现及其技巧
2006/10/09 PHP
PHP文件操作方法汇总
2015/07/01 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
js格式化时间小结
2014/11/03 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
Python 获取div标签中的文字实例
2018/12/20 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
通过实例解析python描述符原理作用
2020/01/22 Python
sklearn+python:线性回归案例
2020/02/24 Python
Python绘制组合图的示例
2020/09/18 Python
大学班级干部的自我评价分享
2014/02/10 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
死亡诗社观后感
2015/06/05 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技