如何用i18next-parser提取React组件中的纯文本节点？

希望无需使用自定义组件，直接从React组件中提取纯文本节点并保存到文件。原本以为这是i18next-parser的默认行为，但经过5小时的配置与自定义脚本尝试后发现无法实现。示例需求如下：

<Button variant="white" size="base" onClick={handleClose}>
    Cancel // 无需包裹Trans组件即可提取
</Button>
<p>
 This text should be extractable, it's a normal text node
</p>

请问是否有可行的解决办法？若不可行，该工具与i18next-scanner的区别是什么？以下是我配置的JsxLexer选项：

lexers: {
    js: [
        {
            lexer: 'JsxLexer',
            functions: ['t', 't.rich'], // Array of functions to match
            transKeepBasicHtmlNodesFor: ['p'],
            transSupportBasicHtmlNodes: true,
            componentFunctions:[p]
        },
    ],
},

提取纯文本的可行办法 #

i18next-parser 默认不会主动提取没被Trans组件或t()函数包裹的纯文本节点，要实现你要的效果，可以试试这两种方式：

• 调整配置参数
  在你的JsxLexer配置里补上几个关键选项，注意componentFunctions里的p要加引号（是字符串类型）：

  lexers: {
      js: [
          {
              lexer: 'JsxLexer',
              functions: ['t', 't.rich'],
              transKeepBasicHtmlNodesFor: ['p'],
              transSupportBasicHtmlNodes: true,
              componentFunctions: ['p'],
              extractFromDefaultValue: true, // 开启从默认值提取文本
              scanJsx: true // 强制扫描JSX文本节点
          },
      ],
  }
  

  这个配置会让工具尝试扫描JSX里的纯文本节点，把它们提取出来。
• 自定义AST遍历脚本
  如果配置调整后还是不行，就自己写个小脚本用@babel/parser解析React代码，遍历AST里的JSXText节点，把文本内容捞出来，再生成对应的i18n键值对存到文件里。这种方式更灵活，完全可控。

i18next-parser和i18next-scanner的区别 #

• 提取逻辑：
  • i18next-parser 是「标记式提取」，默认只认你指定的t()函数、Trans组件这类标记过的内容，没标记的纯文本不会碰，适合精准控制要提取的文本。
  • i18next-scanner 是「全量扫描」，默认就能抓JSX里的纯文本节点，不用额外包裹组件或函数，适合需要一次性提取所有文本的场景。
• 配置复杂度：
  • i18next-parser 配置项多，能精细控制提取规则，但要花时间调参数。
  • i18next-scanner 配置简单，开箱即用，适合快速搭建提取流程。
• 扩展性：
  • i18next-parser 支持自定义Lexer和插件，能适配复杂项目的特殊需求，但需要自己写扩展代码。
  • i18next-scanner 扩展性不如前者，但内置功能足够应付大部分常规项目。

内容的提问来源于stack exchange，提问作者Hazem