在前端开发中，i18n 国际化是一个重要的功能。为了方便管理和维护国际化资源，我们通常使用 npm 包进行管理。s-i18n-extract 是一个轻量级的 npm 包，可以帮助我们自动提取项目中的文本，并将其转化成 JSON 格式的国际化资源文件。本文将详细介绍如何使用 s-i18n-extract。
安装 s-i18n-extract
首先，你需要在你的项目中安装 s-i18n-extract。你可以使用 npm 命令进行安装：
npm install -g s-i18n-extract
安装完成后，你可以使用命令行来验证是否已经安装成功：
si18n --help
如果成功安装，你将看到 s-i18n-extract 的帮助信息。
配置 s-i18n-extract
接下来，你需要配置 s-i18n-extract。你可以在项目根目录下创建一个 .s-i18n-extract.json 的文件，用来存放配置信息。示例配置如下：
-- -------------------- ---- -------
-
-------- -----------------------------
--------- -
-------------- -----------------
---------------- -
-
----------- -------------
--------- -------
--
-
----------- -------------
--------- -------
-
-
-
-配置中，input 表示需要提取文本的文件路径，这里我们设置为 .js、.jsx、.ts 和 .tsx 文件。output 表示输出的配置信息，其中 localesPath 表示输出的国际化资源文件存放路径，languageFiles 表示需要输出的语言和对应的文件名，这里我们设置为英文（en-US）和中文（zh-CN）。
提取文本
配置完成后，我们可以使用 s-i18n-extract 命令来提取文本并生成国际化资源文件。运行以下命令：
si18n extract
命令执行完成后，你将在 localesPath 指定的路径中看到生成的国际化资源文件。例如，我们设置的英文文件（en-US.json）内容如下：
{
"Hello world!": "Hello world!",
"I love {name}!": "I love {name}!",
"{count, plural, one {1 person} other {# people}}": "{count, plural, one {1 person} other {# people}}"
}使用国际化资源
国际化资源文件生成之后，我们需要在项目中使用这些资源。首先，我们需要引入 i18next 和 react-i18next 这两个库，它们可以帮助我们实现在 React 中使用国际化资源。
npm install i18next react-i18next
然后在项目中用以下代码初始化 i18next：
-- -------------------- ---- -------
------ ---- ---- ----------
------ - ---------------- - ---- ----------------
------ -- ---- -----------------------
------ -- ---- -----------------------
----- --------- - -
-------- -
------------ --
--
-------- -
------------ --
-
--
----
----------------------
-------
----------
---- --------
------------ --------
-------------- -
------------ -----
-
---在 React 组件中使用国际化资源：
-- -------------------- ---- -------
------ - -------------- - ---- ----------------
-------- ----- -
----- - - - - -----------------
------ -
-----
------------- --------------
-------- ---- --------- - ----- ------- -------
----------------- ------- --- -- ------- ----- -- ---------- - ------ ----- -----------
------
--
-以上就是 s-i18n-extract 的使用教程，希望对你的国际化开发有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600564f581e8991b448e1948