简介
i18n-extractor 是一个用于提取 JavaScript 代码中的国际化文本的 npm 包。它可以自动扫描代码，并将代码中用到的文本提取出来生成一个翻译文件，方便后续的多语言翻译工作。
本文将详细介绍 i18n-extractor 的使用方法，并附带一个示例代码作为演示。
安装
首先，你需要在项目中安装 i18n-extractor：
npm install i18n-extractor --save-dev
配置文件
i18n-extractor 支持使用配置文件来配置其行为。配置文件的默认文件名为 .i18nrc，但你也可以通过命令行参数来指定其他的配置文件。
以下是一个示例配置文件 .i18nrc：
-- -------------------- ---- -------
-
---------- ------ ------
--------- -------------------------
-------- --------------------- ---------------------------
--------- -------
---------------- -
------------ ---------------------- -----------------
--------- --------------------- ----------------
--------- ---------------------- ----------------
--
-------------------- -
------------ -------
--------- -------
--------- ------
--
------------- ------- -------
-其中包含了以下配置项：
locales: 一个字符串数组，列出了所有可用的语言代码。这些语言代码将被用于生成对应的翻译文件。output: 翻译文件的输出路径，可以使用{locale}占位符指定语言代码。input: 待扫描的代码路径，支持 glob 格式。marker: 标识用于打上待翻译文本的标记字符串，默认为i18n。functionNames: 一个对象，用于指定识别哪些函数作为文本提取器，以及这些函数在 JS 代码中的名称。对象的键名应该是函数类型（如"translate"、"plural"、"select"等），键值应该是一个字符串数组，列出了所有可能的 JS 函数名称。jsxAttributeNames: 一个对象，用于指定识别哪些 JSX 属性作为文本提取器，以及这些属性在 JSX 代码中的名称。对象的键名应该是函数类型（如"translate"、"plural"、"select"等），键值应该是一个字符串数组，列出了所有可能的 JSX 属性名称。extensions: 待扫描的文件扩展名，如".js"、".jsx"。
使用方法
在项目的根目录下运行以下命令来提取所有待翻译文本：
npx i18n-extractor extract
此时，i18n-extractor 将会扫描指定的代码路径，并提取出其中的待翻译文本，然后将其保存到输出路径中的翻译文件中。
生成的翻译文件格式如下：
-- -------------------- ---- -------
-
----- -
----------- ------- --------
------- --- ---- -- ---------
------ --------- ------- ------- -- ----- ----- ----- ---------- -- ----- ----- ----- ---------- --- ----- ----- -------
--
----- -
----------- ---------
------- ---------------
------ --------- ------- ----------------- ------------------- ---------------------
-
-而源代码中的待翻译文本，则通过 marker 标记被注释掉：
-- -------------------- ---- -------
-- ----- ------ ------
------------------- ---------
-- ----- -- ---- -- -------
--------------- ---- -- -----------
-- ----- -------- ------- ------- -- ----- ----- ----- ---------- -- ----- ----- ----- ---------- --- ----- ----- ------
--------------------------------
--- ------
--------------- --------- ------- ------- -- ----- ----- ----- ---------- -- ----- ----- ----- ---------- --- ----- ----- --------
-- - ------- --- ----示例代码
以下是一个演示用的 React 代码，其中包含了多种可翻译的文本：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------------- ---------------- --------------------- - ---- -------------
----- -------- - -
-
--- -----------
--------------- ------- --------
--
-
--- -------
--------------- --- ---- -- ---------
--
--
----- ----------- - -- ----- ------- --- -- -- -
------ -
-----
----------------- ------------- ---------------------- ------- --
----------------- --------- ------------------ ---- -- -------- --------- ---- -- --
----------------
--------
-----------
------------------------ ------- ------- -- ----- ---- ----- ---------- -- ----- ---- ----- ---------- --- ----- ----- -------
------------- ------- ------- -- ----- ---- ----- ---------- -- ----- ---- ----- ---------- --- ----- ----- -------
--------------- ------- ------- -- ----- ----- ----- ---------- -- ----- ----- ----- ---------- --- ----- ----- -------
---------- ------ --
--
----------------------
----------------
-------------------- -- - ------------ ------------- --- ---- -- - ------------- ----------
--------- ------- --------- -- --------------------------- -- --------- -- ---------------- --
--
-----------------
----------------
-------------------- -- - ---------- --------------- --- ---- -- - ------------- --------------
--------- ----- --------- -- ------- ----------------------------- -- --------- -- -- -------------------- --
--
------- ----------- -- ------------- ----------
----------------- ------------- ------------------- ------ --
---------
-- --------------
----------------- -------------- ---------------------- --
----
------
--
--
------ ------- ------------运行 i18n-extractor，它会将所有可翻译的文本提取出来，生成一个翻译文件，其中包含了如下内容：
-- -------------------- ---- -------
-
----- -
----------- ------- --------
------- --- ---- -- ---------
------ --------- ------- ------- -- ----- ---- ----- ---------- -- ----- ---- ----- ---------- --- ----- ----- --------
-------------- ----- -- - ------------ ------------- --- ---- -- - ------------- -----------
----------- ---- -------
------------ -------
--
----- -
----------- ---------
------- ---------------
------ --------- ------- ----------------- ------------------- ----------------------
-------------- ----- --------------------- --- ---------------
----------- ------
------------ ------
-
-随着项目中可翻译文本的不断增多，i18n-extractor 能够帮助我们快速、准确地提取这些文本并交由翻译人员进行翻译。同时，它的配置参数也让我们能够更加灵活地进行提取，以应对不同的代码场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77006