在前端开发中，国际化（i18n）技术扮演着重要的角色。i18n 可以提高网站或应用程序的可用性和可访问性，并使其更具有全球范围的适用性。有很多工具和框架可用于实现国际化，其中一个非常流行的工具就是 i18next，它是一个支持多语言的 JavaScript 库。i18next-scanner 可以帮助我们自动提取 JavaScript 中的 i18n 字符串，并将它们保存在 JSON 或 PO 文件中，以便翻译员进行翻译。本文将介绍 i18next-scanner 的使用方法，并提供示例代码。
安装 i18next-scanner
安装 i18next-scanner 的最简单方法是通过 npm 进行安装：
npm install i18next-scanner --save-dev
配置 i18next-scanner
在安装完 i18next-scanner 后，我们需要先创建一个配置文件，以告诉 i18next-scanner 哪些文件应该被扫描，如何解析 i18n 字符串，以及如何将它们保存到文件中。下面是一个示例配置文件的内容：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -
--------------------
----------------------
--
------- ------------------------------------
-------- -
------ ------
----- -----
----- -
----- ------------- ----------
----------- ------- --------
--
----- ------ ------
--- ---------- --------
---------- ---------
------------- ----------------------------
--------- -
--------- ------------------------------
--------- ------------------------------
----------- --
----------- -----
--
------------ ----
------------- ----
-------------- -
------- -----
------- -----
--
--
--配置项说明：
input: 要扫描的文件路径。可以使用 glob 匹配模式来匹配多个文件。output: 保存翻译结果的路径。$LOCALE,$NAMESPACE表示占位符，会被实际的语言代码和命名空间替换。options: 其他配置选项。debug: 是否打印调试信息。sort: 是否按照键名进行排序。func: 用于匹配 i18n 函数的配置。list: 匹配函数名的数组。extensions: 匹配文件扩展名的数组。
lngs: 支持的语言列表。ns: 命名空间列表。defaultNs: 默认的命名空间。defaultValue: 当字符串没有被翻译时的默认值。resource: 用于读写翻译文件的配置。loadPath: 读取文件的路径。savePath: 保存文件的路径。jsonIndent: JSON 文件的缩进量。lineEnding: 行末的换行符。
nsSeparator: 命名空间分隔符。keySeparator: 键名分隔符。interpolation: 插值表达式的配置。
执行 i18next-scanner
配置好后，我们可以使用 i18next-scanner 进行扫描：
npx i18next-scanner -c i18n.config.js
这里使用了 npx 命令来执行 i18next-scanner，以确保我们使用的是项目中安装的 i18next-scanner。-c 参数指定了使用哪个配置文件。
执行成功后，i18n 字符串会被提取并保存在相应的翻译文件中。
在 JavaScript 中使用 i18next
在编写使用 i18next 的代码时，我们需要创建一个 i18next 对象，并将其初始化：
-- -------------------- ---- -------
------ ------- ---- ----------
------ ------- ---- -----------------------
------ ---------------- ---- -----------------------------------
------ ------- ---- --------------------------------
-------
-------------
----------------------
-------------
-------
------------ -----
------ ------
-------------- -
------------ ------
--
-------- -
--------- -------------------------------
--
---这里使用了 i18next、i18next-http-backend、i18next-browser-languagedetector 和 i18next-sprintf-postprocessor 四个包，它们分别用于：
- i18next: i18next 核心包。
- i18next-http-backend: 用于从远程服务器加载翻译文件的插件。
- i18next-browser-languagedetector: 用于检测浏览器语言的插件。
- i18next-sprintf-postprocessor: 用于支持插值表达式的插件。
示例代码
下面是一个示例代码，演示如何在 React 中使用 i18next：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- ----------------
-------- ------ -
----- - - - - -----------------------
------ -
-----
---------------------
-------------------------
------
--
-
------ ------- -----其中，useTranslation 是一个自定义的 React Hook，它用于获取当前组件所需的翻译函数。'home' 参数代表使用 home 命名空间中的字符串。t 函数用于获取翻译后的字符串。
总结
i18next-scanner 是一个非常有用的工具，它可以帮助我们自动提取 i18n 字符串，极大地提高了国际化的效率。只需简单的配置文件，就可以快速扫描项目中的 i18n 字符串，并将其保存在 JSON 或 PO 文件中，以便翻译员进行翻译。此外，本文还提供了如何配置 i18next 和示例代码，以帮助您更好地理解并使用 i18n 技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64231