在前端项目开发中，我们需要本地化我们的应用程序以吸引更多的用户。而 gettext-extractor 是一款非常有用的 npm 包，可以帮助前端开发者提供对多语言的支持，并且具有极高的灵活性。本文将会在深入讨论 gettext-extractor 在前端开发中的细节和使用方法。
简介
gettext-extractor 的作用是从代码中提取出待翻译的文本并生成 .po 文件。这样我们就可以用 .po 文件来进行语言翻译，然后再将翻译好的 .po 文件编译成 .mo 文件，最后加载到我们的应用程序中。
gettext-extractor 允许我们提取 JavaScript 和 HTML 文件中的文本，支持多种注释语法，可以自定义提取规则，并且支持文件黑白名单过滤。
下面我们来介绍 gettext-extractor 的使用方法。
安装
使用以下命令来安装 gettext-extractor:
npm install gettext-extractor --save-dev
配置文件
gettext-extractor 需要一个配置文件来提取文本。我们需要在项目中创建一个 .gettext.js 文件，并在其中编写 extractor 的配置项。以下是一个示例配置文件：
module.exports = {
input: ['./**/*.js', './**/*.html'],
output: './translations/template.pot',
functionNames: {
gettext: ['msgid'],
ngettext: ['msgid', 'msgid_plural', 'count']
}
};input: 需要提取文本的文件路径。output: 生成的 .po 文件路径。functionNames: 我们需要指定多语言处理的函数名和对应的参数。functionNames的参数格式为：函数名: ['msgId的参数位置', 'msgPlural的参数位置', '参数个数变量的名字']。
可选的配置项
我们来补充一下一些可选的配置项的使用方法。
commentKeyword: 注释关键词。默认是gettext。basePath: 基准路径。默认是项目根目录。extractors: 提取规则列表。
我们来看一下一个完整的配置文件：
-- -------------------- ---- -------
-------------- - -
------ ------------- ---------------
------- ------------------------------
-------------- -
-------- ----------
--------- --------- --------------- --------
--
--------------- ----------
--------- --------------
----------- -
-
----------- -------- --------
---------- ----------------------------
--
-
----------- --------
---------- -------------------------------
--
-
----------- --------
---------- --------------------------
-- -- -- -- ---- -- - -- ---- ---
------- ------ -- -----------------------------------------------------
--
-
--使用方法
一旦我们创建好了 gettext-extractor 配置文件，我们就可以使用它来提取我们代码中的待翻译文本了。
我们需要在项目根目录中使用以下命令：
node_modules/.bin/gettext-extractor --config path/to/your/config (.gettext.js)
在生成 .po 文件之前，我们需要创建一个 .pot 文件，这是 gettext-extractor 的默认输出。接着我们在 .po 文件中编辑翻译文本。
// i18n
gettext('hello'); // 1 要翻译的一般字符串必须匹配 gettext 指定的 msgId ，否则无法翻译
//'lorem-ipsum'
gettext('Hello ${user}', { user: 'Marta' }); // 2 参数化字符串
ngettext('One apple', 'Many apples', choices.length); // 3 选择字符串 现在我们来运行 gettext-extractor 命令以生成我们的 .pot 文件，并在之后翻译相关文本。
node_modules/.bin/gettext-extractor --config path/to/your/config (.gettext.js)
接着我们来使用 gettext 来加载翻译好的文本。以下是一个示例代码：
import { loadTranslations } from 'gettext-extractor';
await loadTranslations('./translations/ja_JP.po');现在 gettext 已经可以为我们提供多语言的支持了。
结论
本文深入介绍了 npm 包 gettext-extractor 的使用方法以及各项功能的详细使用说明。gettext-extractor 可以非常方便地为我们提供多语言支持，并且具有很高的灵活性。在开发前端应用程序的过程中，我们可以利用 gettext-extractor 来大大提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/gettext-extractor