npm 包 gettext-loader2 使用教程

作为前端工程师，我们在开发过程中经常需要处理多语言的问题。其中，gettext 被广泛应用于多国语言的支持。而 gettext-loader2 是一个能够使得 gettext 功能在 webpack 打包过程中实现的 npm 包。本文将介绍如何使用它来在前端项目中实现多国语言支持。

什么是 gettext

gettext 是一个 GNU 项目中的 i18n 国际化工具集，主要用于将多语言文本翻译为不同语言。

在 gettext 中，将需要翻译的文本标记为 "__"，例如：

var message = __("Hello World");

当使用 gettext 进行翻译时，会对其中的 "__" 进行解析，将其翻译成对应的语言。

什么是 gettext-loader2

gettext-loader2 是一个 webpack 装载器，在编译时能够将需要翻译的文本提取出来，生成一个 PO 文件。通过这个 PO 文件，可以将需要翻译的文本发送给翻译者进行翻译。将翻译后的结果保存到对应的 MO 文件中，再通过 gettext 将文本替换成翻译结果。

如何使用 gettext-loader2

安装

安装 gettext-loader2 可以通过 npm 或 yarn：

npm install gettext-loader2 --save-dev
yarn add gettext-loader2 --dev

配置 webpack

在 webpack 的配置文件中添加 gettext-loader2：

{
  test: /\.(js|jsx|vue)$/,
  use: [
    'babel-loader',
    'gettext-loader2'
  ],
  exclude: /node_modules/
}

编写代码

在代码中，使用 gettext 标记需要翻译的文本，例如：

var message = __("Hello World");

或者使用 gettext 的别名 _：

var message = _("Hello World");

提取文本

在代码完成之后，使用 xgettext 将文本提取为 PO 文件：

xgettext -o locale/messages.pot -L JavaScript **/*.js

这里的 locale/messages.pot 是 PO 文件的输出路径，**/*.js 匹配所有 js 文件。

翻译文本

将生成的 PO 文件发送给翻译者进行翻译。翻译后的结果保存在 MO 文件中，例如 locale/zh_CN/LC_MESSAGES/messages.mo。

替换文本

在项目启动时，将 MO 文件加载到 gettext 中，并使用 gettext 替换需要翻译的文本：

import msgs from './locale/zh_CN/LC_MESSAGES/messages.mo';

if (msgs && typeof msgs === 'object' && typeof msgs.default === 'object') {
  window.gettext = msgs.default.gettext;
}

var message = gettext("Hello World");

总结

gettext-loader2 使得在 webpack 打包过程中自动提取需要翻译的文本变得非常简单。通过这个工具，我们能够实现多语言的支持，大大提高了应用程序的国际化能力。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005581b81e8991b448d5436